So basically, I'm attempting to emulate a UI sort of like those used in Halo Reach menus. I plan on going about this by setting the background of the webpage to some image, creating a plane in front of it, and setting its texture to an image with some semi-transparent rectangle shapes on it to be used as the main background of the UI itself. I'll worry about the buttons and what not in the future, but as of now I can no longer get it to render anything on the canvas. Previously it was able to render the plane in the correct spot with a white material, but at some point while attempting to apply a texture to it I managed to mix something up and as a result it doesn't render anything.
Here is a link to the source if anyone is able to help me:
https://dl.dropbox.com/u/40043006/test.zip\
Thanks in advance for any help!
I suspect you're hitting this. However, I would suggest using plain HTML/images for UI stuff.
Related
I am keen to try and recreate something on my website with effects similar to what can be seen here?
http://www.williamhoza.com/text/?t=Hello
I have searched the web for canvas pixel manipulation along with other searches and cannot see anything that could help with this.
It would be great if someone has any knowledge of how this effect is achieved or even has information as to where I should be looking for help
also, would it be possible to achieve effect with an image?
Split the text into particles. Each particle should have a vector pointing to it's start position. If you move you mouse close, you should add a new vector to the particles around the mouse. This way you particles will move, but return to the original position.
I want to build a UI that is a three dimensional sphere. It is able to rotate and scroll in and out. I have posted a sphere here that I was hoping to use:
http://jsfiddle.net/Lance_Bitner/vbvfnxxz/
<div id="rootDiv">
<!-- Main Canvas -->
<canvas id="renderCanvas"></canvas>
</div>
Here is what I want to do with this sphere. I want to make it more interactive. Specifically, I want to make cubes or square tiles form the outside of the sphere, like these images:
http://www.123rf.com/photo_10160495_a-sphere-made-up-of-tiles-featuring-question-marks-symbolizing-a-world-of-confusion-or-curiosity-and.html
http://www.dreamstime.com/royalty-free-stock-photos-sphere-made-small-cubes-image11662558
I wanted to give you my overall vision. Ideally, I would have a sphere that is made of cubes/tiles and you can rollover those cubes. Each cube has an icon of an application. Once one of the cubes is rolled over it expands out much larger so you can see the description of the application. I can then click on the cube to go to a page for that application.
I know this kind of UI design is probably really difficult and probably not done often or at all. And I can’t use Flash unfortunately. But I can use jQuery, JavaScript, and HTML5. I figured since you can make elaborate video games in HTML5, it should be able to handle this. So my question is how do I use cubes/tiles to form the outside of my 3D sphere? Any direction would be MUCH appreciated!
i just started using the three.js library and have a question concerning decals:
I created a sphere with a texture on it. How is it possible to add another texture on top of it without repeating it. Short example: if my sphere gets "hit" i want to add another texture on it that looks like a bullethole - of course only on that certain point. Im thinking of a transparent .png-file for that.
Is that the right approach? Or do i have to make another sphere for each "impact" that is slightly bigger than the original sphere, and then give it the bullethole texture, which will be a transparent png, and find a way to only show it once on the new sphere with a certain size ?
Can somebody point me in the right direction? I'm new to 3D-Design / coding / threejs
Here's a samply video on youtube of somebody doing it by clicking on an object, but i've no clue how he did that:
http://www.youtube.com/watch?v=ckLghsutfmA
Thank you very much!
It seems that the author of the video you had linked released the code behind it on github:
https://github.com/benpurdy/threejs-decals
And here's another take on this:
https://github.com/spite/THREE.DecalGeometry
Both of these are based on the technique described here.
I have been trying to find a good resource to point me in the correct direction and I'd really like someone to help me in this regard.
I'm developing an app that uses phonegap, js and html5. One component of this app is to have an image that can be overlayed with freeform scribbles.
I'm not sure if its the canvas object I should be using and if so how do I go about implementing a drawing solution.
You create a and position it absolute over image.
can have transparent pixels (alpha=1.0) and those pixels will display the underlying image.
Then you flip pixels accordingly your scribbling to black etc. You need to listen to touch events, transform their coordinates to coordinates and then use canvas.getContext() draw operation to manipulate pixels hitting in those coordinates.
If you need further assistance please ask individual questions for each part as a complete solution would be longish source code and outside the scope of simply answering the questions.
I have a full screen canvas I am drawing to, and I've set it up to allow the user to drag and drop objects that are within the canvas.
I also want to enable them to select an object, and then 'resize handlers' show up (the little circles in the corners) to allow them to click/drag and resize them.
I can code this manually by drawing circles in each corner and detect a click, etc.... but was wondering if anyone has any better way to do this? Maybe there's a library out there that already handles this?
Any help is appreciated!
There isn't any simpler way than doing it yourself or getting a library to do it for you.
I wrote a tutorial here on the use of sizing handles. That should get you started if you plan to make your own.