Is there a way to rotate a cube in Three.js based on the side of the cube the camera is facing?
I'm using the below code to change the orientation the cube rotates from based on the change in the vector returned by camera.getWorldDirection().
Is there a better way to do this? When I use my mouse to scroll around the cube to a different face than the one the camera originally looked at and hit 'w'(the key to move the cube face up), the face the camera originally looked at will move up instead of the face the camera is looking at.
if (camera.getWorldDirection(new THREE.Vector3()).x > 0.50) {
let rotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1),-rotationStep);
cubeQuaternion.multiplyQuaternions(rotation, cubeQuaternion); // rotate cube
}
else {
let rotation = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0), rotationStep);
cubeQuaternion.multiplyQuaternions(rotation, cubeQuaternion);
}
I'm trying to make the object rotate with the camera my code for the rotation currently looks like this:
function update() {
render();
requestAnimationFrame(update)
movement();
var test = camera.getWorldRotation();
player.rotation.y = test.y
}
I can only rotate the object 45 degrees to the left and to the right then the player rotation stops rotating while the camera can keep on rotating.
I'm trying to create a very simple scene containing a triangular planar face continuously rotating about the x axis.
Here's the code creating the geometry object, as indicated in this previous SO question:
// create triangular plane geometry
var geometry_1 = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(3,0,0);
var v3 = new THREE.Vector3(0,3,0);
geometry_1.vertices.push(v1);
geometry_1.vertices.push(v2);
geometry_1.vertices.push(v3);
geometry_1.faces.push(new THREE.Face3(0, 1, 2));
The animation function renders the scene and adds a small rotation to the mesh:
function animate() {
requestAnimationFrame( animate );
mesh_1.rotation.x += 0.005;
renderer.render( scene, camera );
}
Everything works fine until the value of mesh.rotation.x goes into the [Math.PI, 2*Math.PI] interval, at which point it disappears for exactly half of the cycle. This JSFiddle replicates the behavior I'm observing.
This is not a light problem, as there are an ambient light and a directional light supposed to illuminate the mesh at all points of it revolution.
This should not be a material problem, as I did set its side property to THREE.DoubleSide and in fact in the interval mesh.rotation.x into [0, Math.PI] I already observe both faces.
I tried adding another face to the same geometry with geometry_1.faces.push(new THREE.Face3(0, 2, 1)); but that still didn't solve the problem.
Adding a second geometry with an opposite face geometry_2.faces.push(new THREE.Face3(0, 2, 1)); and having the mesh rotate negatively mesh_2.rotation.x -= 0.005; allows me to observe the desired result because the two geometries are now disappearing in opposite halves of the [0, 2*Math.PI] interval. This however is a hacky and not ideal solution.
So what is going on? How can I solve it? Thanks!
Documentation says:
OrthographicCamera( left, right, top, bottom, near, far )
so, set your camera like this:
camera = new THREE.OrthographicCamera(-FRUSTUM_SIDE/2, FRUSTUM_SIDE/2,
FRUSTUM_SIDE/2, -FRUSTUM_SIDE/2);
thus you'll have default near and far camera frustrum planes (0.1 and 2000).
Explanation: You set your cam at z-position, which is equal to FRUSTRUM_SIDE/2 and also you set your far camera frustrum plane with the same value. So you see everything between your cam position and the distance from it, which is FRUSTRUM_SIDE/2. In world coordinates, your far plane is at point (0, 0, 0). That's why your triangle disappears when it goes further then the distance of FRUSTRUM_SIDE/2 from your cam.
Extending the answer from #prisoner849, the problem shown in the JSFiddle has nothing to do with the geometry or the material of the mesh, but with the shape and extension of the frustum defined by the OrthographicCamera.
As explained nicely in this video tutorial and in the documentation the frustum of an OrthographicCamera is a rectangular parallelepiped defined by the values left, right, top, bottom, near, far:
The camera should effectively be thought of as being attached to the surface on the near side and facing towards negative values of the z axis.
Once the frustum's shape is defined with:
FRUSTUM_SIDE = 20;
camera = new THREE.OrthographicCamera(
-FRUSTUM_SIDE/2, FRUSTUM_SIDE/2,
FRUSTUM_SIDE/2, -FRUSTUM_SIDE/2,
-FRUSTUM_SIDE/2, FRUSTUM_SIDE/2);
we will be able to see in our image all the objects in the scene which are entirely contained in it.
However, after defining the frustum the position of the camera is changed: camera.position.z = FRUSTUM_SIDE/2; (line 24 of the fiddle). This effectively moves the whole frustum and not just the location of the image, so while previously any object in (0,0,0) was in the center of the frustum, now it will lie on the very far end plane of it.
The animation function:
function animate() {
requestAnimationFrame( animate );
mesh_1.rotation.x += 0.005;
renderer.render( scene, camera );
}
rotates the triangle towards the image plane, but for angles between [Math.PI, 2*Math.PI] the plane is effectively pointing outside of the frustum and thus becomes invisible.
Removing the camera.position.z = FRUSTUM_SIDE/2; line, or defining a different frustum, or moving the mesh position to the middle of the new frustum are all possible solutions. I.e. corrected fiddle.
I have a THREE.Scene with two meshes added, meshA and meshB, each of which has been rotated in different ways. My goal is to remove meshB from the scene and re-add it as a child of meshA, while preserving its global position and rotation -- in other words, the position and rotation of meshB should appear the same before and after this code.
My current, almost working attempt is as follows:
var globalOffset = new THREE.Vector3().subVectors( meshB.position, meshA.position );
var localOffset = meshA.worldToLocal( meshB.position );
var rotationOffset = meshA.quaternion.clone().inverse();
var rotation = meshB.quaternion.clone().multiply( rotationOffset );
scene.remove(meshB);
meshA.add(meshB);
meshB.position = localOffset;
meshB.rotation.setFromQuaternion(rotation);
The positioning works fine; the rotation only works if both meshA and meshB have been rotated around the same axis -- if meshA and meshB have been rotated around different axes, meshB appears to change rotation before and after this code.
Any ideas how I can correct the code above (or an idea for a different approach) so that meshB still has the same "global" rotation before and after being removed and re-added to the scene?
Thanks!
You want to remove meshB from the scene and re-add it as a child of meshA, while preserving its global position and rotation.
You can do that like so:
meshA.attach( meshB );
three.js r.109
When I create an Object3D model and add the meshes to it, how do I set the position and rotation of the added mesh to same as the Object3D model, like when I rotate and position the Object3D there should be no difference in angle of rotation between the Object3D and the added mesh. How do I achieve such result?
If your Object3D model is called obj, then after obj.add(mesh) any changes to obj (position/rotation/scale) will change mesh in the same way.
If instead you don't want mesh to be attached to obj, but you still want them to have the same position and rotation, you could try
mesh.position = obj.position;
mesh.rotation = obj.rotation;
Hope this helps!