I've added some text to my scene with THREE.TextGeometry, and the text seems to be stuck in whichever xy plane I place it. Any way to have it adjust to always be in plane with the screen- readable for the user?
Try
mesh.lookAt( camera.position );
The local z-axis of the mesh should then point toward the camera.
To make the text always face the screen (rather than the camera):
mesh.quaternion.copy(camera.quaternion);
Note that this differs from object.lookAt(camera); since this will result in different orientation depending on where on the screen the object is located.
Object3D.onBeforeRender can be used to update the orientation on each frame. It might be useful to disable frustum culling using Object3D.frustumCulled = false; to ensure that the callback always is triggered.
Related
I'm trying to sync the camera orientation of one threejs scene with another by passing the world matrix of the first scene's camera to the second and then using
camera.matrix.fromArray(cam1array); //cam1array is the flattened worldmatrix of the 1st scene
camera.updateMatrixWorld( true );
However, when I print camera.matrixWorld for the second scene, it would appear that there has been no update (matrixWorld is the same as before the previous commands). The second scene does use OrbitControls so maybe they are overriding my commands, but I wondered if anyone could advise me on how to achieve the same world matrix for the second scene as the first?
I should also clarify that part of the issue is that it would appear that setting
camera.matrixAutoUpdate = false;
in order to prevent overriding seems to prevent OrbitControls from functioning corrrectly.
As a precision I already noticed threads about this but didn't find a way to achieve exactly what I need.
Basicaly I have a board of objects that I need remaining always on top of everything but also attached to the camera.
I first tried to add the group to the camera and it stayed as wished always in the viewport. But in this configuration the group of objects still be a part of the scene so while zooming to regular objects in the "editor" the board goes into/among these objects of the scene.
My second trial was based on this thread and work wonderfully in order to get all of the board objects rendered above everything. But on such a configuration when rotating around the axis (with orbit control) both scenes rotates. So I tried to update the foreground scene with coordinates of the camera but the update was not immediate and this scene is flickering (I suppose that while rotating the update function is not called immediately).
My best wish would have been to "attach" the foreground scene to the camera so that it would stay on top and sticked on the screen/viewport but I don't even know if it is possible and how to do that (as only groups of objects seem to be capable to be attached to the camera).
I am really stuck on that point. Thanks you for any help!
If this is what you need,
just set object.material.depthTest = false; and object.renderOrder = 1000; for all objects you need to be always on top and attached to the camera.
I have playing a little with clara.io and i want to reproduce an image done with it.
I have searched the web for days looking up to reproduce what they call "Realistic" rendering.
As you can see on the image the six round part have they own shadows on the (one piece) brick from multiple lights sources.
I have no idea how they done that, if it is a simple setup, or a complex shader.
the best i can do is that and i have no idea how to proceed to make and object shadowing itself depending of it's geometry.
any trails ?
actually you need:
renderer.shadowMapEnabled = true;
light.castShadow = true;
object.castShadow = true;
object.receiveShadow = true;
i know its a little counter-intuitive that both the light and the mesh have the same attribute "castShadow", but that's how it works.
also remember to check the near, far, and size of the shadow camera of your light if the shadow doesn't appear or appears incorrectly.
here is an example i made:
http://shahar.thenachts.com/threejs/examples/selfShadow.html
it takes some time to load the model (the model is the floor and walls) and it's textures, so be patient.
to see the code, right click anywhere and choose "inspect element".
ie. Actually it is a very simple setup. The THREE.Object3D has two attributes castShadow and receiveShadow You can achieve the effect you are looking for (ie. self-shadowing) by setting both to true
If you take a look at my fiddle:
http://jsfiddle.net/jmg157/Y35cQ/1/
You'll see I have grid labels on the cube axes. What I'd like to do is whenever the user rotates around the cube, have the text rotate as well so that the numbers are always facing the user.
I tried things like xMarks.rotation = camera.rotation, where xMarksare the text objects, but no success. Any suggestions would be greatly appreciated.
three.js is now quaternion-based.
To make the text created with THREE.PlaneGeometry face the camera, do this:
mesh.quaternion = camera.quaternion; // EDIT - see note below
Updated fiddle: http://jsfiddle.net/Y35cQ/2/
An alternative is to use THREE.Sprite, which always faces the camera.
three.js r.63
EDIT - mesh.quaternion = camera.quaternion; no longer works. You must use this pattern instead:
mesh.quaternion.copy( camera.quaternion );
three.js r.67
I have created a THREE. TubeGeometry and using the THREE.TextGeometry added the text to the tube created. The tube is then added to scene.
Also the I have set the text rotation to camera rotation. The code snippet is below
text.rotation = camera.rotation;
text.lookAt(camera.position);
My application has a button by which I can reset the original position of my tube geometry. Internally, this is done by reseting the camera to its originally position.
Initially, when the page loads up, the tube and text are properly aligned and face the user. But when I rotate the tube and reset it to original position, the tube is properly getting back to original position but text is randomly facing to any direction.
My basic requirement is the text should always face the user. I have followed the steps mentioned in another related query:
TextGeometry to always face user?
But even though I have coded in same way as suggested, I am facing the above mentioned issue. Please point what I am missing?
Note: I am using perspective camera.