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.
Related
Has anybody used ThreeJS StereoEffect and Raycaster together for collision detection (in stereo view). In standard full screen view I can easily check if a Vector2 in the middle of the screen colides with an object in my scene. When I switch on the stereo effect I in effect get 2 scenes, and the collision detection stops working, but I am not really sure how to proceed. Should I create two new vector2d objects, one for each view - help :) ...
It's a bit late, but ...
I encountered a similar problem, I eventually found the reason. Actually in StereoEffect THREE.js displays the meshes on the two eyes, but in reality is actually adds only one mesh to the scene, exactly in the middle of the line left-eye-mesh <-> right-eye-mesh, hidden to the viewer.
So when you use the raycaster, you need to use it on the real mesh on the middle, not the illusion displayed on each eye !
I detailled here how to do it
Three.js StereoEffect displays meshes across 2 eyes
Hopes it solves your problem !
You can use my StereoEffect.js file in your project for resolving problem. See example of using.
I was making my own custom geometry with three.js (using typescript). Something was wrong with it, the object appeared all dark with Lambert material. I checked the three.js source code to see if I forgot to do something when creating the geometry. I saw these two lines appear at the end of the constructor of nearly every geometry class:
this.computeCentroids();
this.computeFaceNormals();
Adding the computeFaceNormals solved my problem. I remember something about normals having to do with lighting (so that makes sense).
But I don't know what the computeCentroids does, and where/why those centroids are needed. Can someone explain? Also do I need to call that function? What can happen if I don't?
computeCentroids calculates the centroid of each triangle in a mesh, not the center of the mesh itself.
Probably the easiest way to see their purpose is to search for .centroid in the three.js source code. AFAICS, they are not used for much apart from lighting, but then only if you're using CanvasRenderer.
I have a problem with my simple three.js code. The code contains a few lines for the setup and displays a few cubes. But the some cubes in the background are displayed in the foreground.
Did I forgot something to do?
I hosted the code on http://goo.gl/qUZKRt (press shift to rotate the camera).
Any sort of help would be great!
Thank you
First of all - you have 2 renderers in your code, both - WebGL and Canvas. Check it. Than, since you are using lights in your scene, setting just color to your material would not be enough. So check it as well. The rest - just a matter of playing around with your lights' values.
See this example: http://jsfiddle.net/FeMq7/1/
Hope that helps, Alex
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.
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.