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
Related
i am trying to use the combined camera (found it under "Examples").
the problem is when i use it in Orthographic mode i still see the arrow and the box helper like in perspective view.
for example, when i am trying to zoom in with the mouse scroll, i can see the plane in the same size (as it supposed to be in orthographic view) but the arrows and the small box between the arrows is getting smaller or bigger.
when i tried to debug it at the renderer function i saw the camera is still in orthograpic mode when it render the arrows.
any idea how can i make all the object to be in orthograpic view but still use the combined camera?
edit:
i am not sure which part of the code i should post so i add a picture to describe my problem.
you can see that i am in an orthographic camera and i'm trying to zoom in and i can see the axis arrow getting bigger or smaller.
the difference between the plane when zooming
Found a possible answer which worked for me:
under TransformControls.js
change the update function to:
scale = (camera.inOrthographicMode == true)? 100 : worldPosition.distanceTo(camPosition ) / 6 * scope.size;
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.
Created a simple scene with a cube in it. Able to see the color of the containing element, (body), in the background.
Added an FXAA shader and the antialiasing works well. However the background is now black, so can no longer see the color of the background container.
Added the following code:
var target = new THREE.WebGLRenderTarget(512, 512);
var composer = new THREE.EffectComposer( renderer, target );
in order to set the effect composer render target format to THREE.RGBAFormat, rather than the default THREE.RGBFormat.
This makes the background work properly, but then there are black and white edges around the cube and the antialiasing does not look very good.
Repeated the above but used the Sepia shader instead of the FXAA shader. This works correctly. The cube looks sepia and the background containing element color is correct.
Are there any workarounds to allow antialiasing and transparent background?
Thanks for any help
I read your issue and there seems to be a good source that can solve or at least lead you down the right path. Go check out: https://github.com/mrdoob/three.js/issues/2125
Hope this helps.
Check my answer in https://stackoverflow.com/a/21056080/2482976
The FXAA needed to be updated to handle the transparent background
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.
How make an Update function in Three.js, like in Unity3d?
I mean, that i create an object:
var torus = new THREE.Mesh(
new THREE.TorusKnotGeometry(60,20,100),
reflectionMaterial
);
and when i click on the body, i change a reflectionMaterial. But the image don't change, i see a not changed reflectionMaterial (last figure). Always redrawing a render image???
Thank's for attention. Sorry for my English (I'm from Ukrainian).
P.S.: I work with Three.js onn my netbook and on (not my) notebook. On netbook i don't see a shaders. Why?? Did the Three.js support Shader Model number 3 and 0?
If I understand your question, you are having issues changing a material after you click on something? You may need to change a flag depending on if you already have a material or not, there are some dependencies - check the link below:
material.needsUpdate = true;
There is an article on How to update things in Three.js