I have a PlaneBufferGeometry and its vertex origin is the center of the object, but I'd like to move it to the top left vertex. Is there a function or do I have to create it?
You can translate your geometry using the following pattern:
geometry.translate( x, y, z );
three.js r.84
Related
I am trying to use rotateOnWorldAxis to rotate my mesh object. Before I apply the rotations, the mesh has its rotation data as Euler object with rotation value for each axis.
in mesh.rotation:
// Euler (_x: 1.5707963267948961 _y: 1.3439035240356314 _z: 3.141592653589793)
I have some angles that I would like my mesh to rotate on each axis, so I am doing the following:
// define axis vectors and angles
const xAngle = some angle in Radians
const xAxis = new THREE.Vector3(1, 0, 0);
...same for Y and Z axis
// apply rotateOnWorldAxis
mesh.rotateOnWorldAxis(xAxis, xAngle);
...same for Y and Z axis
After using rotateOnWorldAxis method on my mesh object, I can visually see that my mesh has rotated correctly. However, when I inspect the object after applying the rotations, the mesh.rotation property does not change and still contains values from before the rotations.
In fact, all of its properties regarding transformation (e.g., matrix, matrixWorld, position, quaternion) remain unchanged, while the rendered mesh does rotate visually.
How do I trigger my mesh object to update all of its transformation data after applying rotateOnWorldAxis?
I have mapped an equirectangular image onto a sphere using three.js, placed the camera in the middle of the sphere, and am using the OrbitControls to handle things like zooming & rotation.
This all works fantastically until I want to programmatically adjust what the camera is looking at (I tween camera.target) which ends up changing, I believe, the position of the camera. The issue here is that afterwards when you rotate, you rotate out of the sphere. What would be the proper way to achieve this only by adjusting camera.rotation and camera.zoom. I'm okay with stripping down the OrbitControls but don't fully understand how the rotation should work and am also open to other optins.
If you are using OrbitControls in the center of a panorama, you should leave controls.target at the origin, and set the camera position close to the origin:
camera.position.set( 0, 0, 1 );
By setting
controls.enablePan = false;
controls.enableZoom = false;
the camera will always remain a distance of 1 from the origin, i.e., on the unit sphere.
Then, to look at ( x, y, z ), you programmatically set the camera's position like so:
camera.position.set( x, y, z, ).normalize().negate();
That way, when the camera looks at the target (the origin), it will automatically be looking at ( x, y, z ), too.
three.js r.85
Is there a way to offset the world coordinates in three.js? I want to translate the center(0,0,0) by some value so the center will be at the center of my div element.
You can add a translation transform to your scene hierarchy.
scene.position.set( x, y, z );
But if you have only one object hanging of your scene you should apply the transform there.
I am rotating a cube through a series of 90 degree rotations using quaternions and I want to be able to get relative positions of the quaternions after a rotation compared with its original position that I have stored.
IE I'd like to know which axis is now equivalent to the original x axis (and if it is inverted), and so on...
I'm using threejs, but I'm sure that's not necessary for answering.
Use this pattern to determine the direction the x-axis is pointing after applying a series of rotations.
var dir = new THREE.Vector3( 1, 0, 0 );
dir.applyQuaternion( q1 );
dir.applyQuaternion( q2 ); // etc...
To see it visually, you can add axes as a child of your cube mesh. The axes will be rotated automatically.
var axes = new THREE.AxisHelper( 100 );
mesh.add( axes );
three.js r.71
Are there examples I can borrow from regarding rotating a camera around its own X, Y and Z axes? I learned yesterday that I can use the translate(X|Y|Z) methods to move a camera along its own axes. Are there equivalents for rotation as well?
In the development version ( three.js r58dev ), a new function has been added for rotating an object on it's own axis:
Object3D.rotateOnAxis( axis, angle );
axis must be a unit-length Vector3, and angle is in radians.
three.js r58dev