I am using three.js to create a tube geometry and have a feature where the camera rotates to particular angle with the click of a radio button.
To rotate the camera, I tried using below code:
camera.rotation.set(2.88, -0.9, -2.0);
camera.position.set(-1800, 0, -1200);
It doesn't have any effect. but when i use the same code by first setting auto rotation update to false, it works
camera.rotationAutoUpdate = false;
camera.rotation.set(2.88, -0.9, -2.0);
camera.position.set(-1800, 0, -1200);
The issue with setting rotationAutoUpdate to false is that once the rotation is set, if i try to rotate the tube with mouse event, it messes up the whole rotation functionality. And if i try to set it to true again, the above required rotation effect is not visible.
Please suggest, if I am doing something wrong or if i am missing out something? Thanks
Related
I am using Orthographic camera with OrbitControls and it works fine for zooming in and out (with mouse scrollwheel) and panning left and right (holding mouse right button down).
But I would also like to be able to "pan" the camera up & down (I believe the technical term is "boom" or "jib").
OrbitControls doesn't provide this motion.
What can I do to drive such a vertical motion from the mouse?
You can set which mouse buttons perform which action with OrbitControls.mouseButtons. It sounds like you already have rotating and dolly (AKA zoom in/out), but you still need to set the desired pan (up/down/left/right) button.
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
Don't forget to also set the .screenSpacePanning property to either true or false, depending on what your desired behavior is. My guess is you want it set to true, but play with it to get the desired result.
I am developing a web application that uses 3d buildings as models. I want to create a button that places the camera so that the model is in a suitable position, however when I rotate the camera manually the mouse control resets it again.
Sample here:Link
If I enable //controls.update() the rotation doesn't work. With //controls.update() disabled the camera rotate fine but when I use the mouse, the camera is reset.
¿What can I do? Thanks!
You shouldn't directly change the rotation of the camera, instead you should change the position+target.
When you call controls.update() the rotation of the camera will be calculated based on the position of the camera (the location of the camera) and the target of the controls (the location of focus).
For example you can do:
controls.target.set(0,0,1);
camera.position.set(-0.041, 1.9, -1.21);
controls.update();
I am developing a standard panorama viewer, where a 360 picture is placed inside of a sphere and the user can look around using mouse and touch. I am using OrbtialControls for this and it is working fine.
The user can also load a new 360 picture, after loading the picture, I am trying to set the camera direction so that the user is looking in a certain direction. As I am using orbitalControls, I am using control.target.set(x,y,z) to do so. However that causes the camera to lock at that point and if I use the mouse or touch to look around, the camera position changes and it revolves around that point, rather than looking around inside the sphere.
Has anyone else seen this kind of behavior? Do I need to do something
The code is pretty simple.
controls.reset();
controls.target.set(window.newLookAt.x,window.newLookAt.y,window.newLookAt.z);
The purpose of controls.target.set(x,y,z) is to set the pivot point, so what you are facing is the expected behavior
Instead of setting the target (that has to be (0, 0, 0) in your case), why not putting the camera inside a THREE.Object3D and rotate this object
var camera = new THREE.PerspectiveCamera()
var container = new THREE.Object3D()
container.add( camera )
camera.position.set( 0, 0, 0.1 )
var controls = new THREE.OrbitControls( camera, renderer )
controls.target.set( 0, 0, 0 ) // Optional
container.rotate.y = Math.PI / 2 // Or whatever you want
So I ended up solving this myself. The issue was that my understanding of orbitControls was slightly off. All I needed to do was to set the target point in the same direction but way closer to the camera and presto, issue solved and things are working fine now.
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'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.