I have a scene where the user can rotate an object around the surface of the sphere, keeping its local Z axis normal to the surface. Heres a JS fiddle, with sliders at the top to rotate around the sphere.
https://jsfiddle.net/dftroy58/14/
This works fine, but now I want to be able to apply a heading to the object, essentially rotating it along its Z axis. At 0 degree heading, the Y axis should point up towards the north pole of the sphere.
I tried to set therotation.z of the object which works when the latitude is 0 degrees, but moving around the sphere, it then rotates where X becomes up at 90 degrees, -Y at 180 and -X at 270.
marker.rotation.z = THREE.Math.degToRad(Number.parseFloat(heading.value, 10));
With that line commented out, the Y axis always points up. How do I get it so I can set the local Z rotation such that it points to the north pole at 0 degrees, but is rotatable by the user?
I could solve this by instead of rotating the marker, change it to axesHelper.rotation.z. This ends up working, but I'd like to remove the axes helper and want to just understand these kind of transformations more.
// Works but I want to avoid this
axesHelper.rotation.z = THREE.Math.degToRad(Number.parseFloat(heading.value, 10));
How would I, without nesting another object, calculate the correct the Z rotation to keep the heading the same as you change latitude?
Related
I really can't understand why this is happening, but let me start from the beginning:
I have this finger texture on a plane, and on idle rotation the finger is pointing to the Y+.
I want it to point to X+ so here is what I did:
1- I first make the finger point to Z+ by adding -90 for the x-axis.
Exactly as I expected!
2- the issue is, I set y to 90 and expected it to rotate on Y axis, but instead it rotates on the Z-axis, this is what I got:
it is still pointing to Z+, changing the y rotation didn't work as expected!
What I am doing wrong here? how to make it point to Z+?
Possible Errors
The Plane Object3D is the child of a PlaneHolder Object3D which is rotated, so when you rotate Plane, it is only rotating in the local space of its parent, so it will act weird. use Plane.rotateOnWorldAxis(new Vector3(0, 1, 0), THREE.Math.degToRad(90)); to rotate plane on world axis.
in the first image you provided, the y-axis blue is pointing to the opposite direction, however in the 2nd/3rd images it is in the proper direction.
in the first image you provided, the x-axis red the tip arrow is pointing to the opposite direction, and if you rotate 90deg on x-axis it should be pointing to Z+ but it is pointing to Z-, so even the 2nd image is wrong
Tip
The Three.js Axis-Helper has 3 colors (red: x-axis, green: y-axis, blue: z-axis), and the default options are => red pointing to the right, green pointing upwards, and blue pointing to the camera (if camera is added on V3(0,0,5) and looking at V3(0,0,0) which has the axis-helper)
I'm trying to add clouds to my scene using the approach in https://codepen.io/teolitto/pen/KwOVvL, which is to make a large number of plane objects at random positions that each rotate continuously around their z axes.
But I would like to be able to move my camera, change its target, etc., and still have the cloud planes look right.
What I need to do is rotate the planes so that as the camera moves and changes target, the cloud planes stay perpendicular to the camera's axis. And I need to do this without changing the planes' rotation around their own z-axis, because otherwise that would break the cloudlike appearance.
I've tried cloudplane.lookAt(camera.position) but of course that doesn't work. It aims all of the planes at the camera, instead of making them all perpendicular to the camera axis. It also sets the object's z-axis, so the clouds don't evolve.
Any advice is appreciated. (I'm new to three.js, so if I have some of the terminology wrong, I apologize for that.)
Edit:
Setting the cloudplane's rotation.x and rotation.y to match the camera's rotation.x and rotation.y seems to get me pretty close, but it doesn't quite get there - its still possible to orbit the camera to a position where the clouds are all invisible because they're all parallel to the camera.
I have the problem of rotating my object correctly. What I need is to create a line ( along x-axis) grabbed to the point so that when you move it, horizontally, vertically or a combination of those two movements, the end of the line circles part of the sphere plane and the beginning of the line stays at rest.
I am using the bullet physics engine, which provide objects like quaternions and functions to set their values e.g. using Euler angles or just creating 3 quaternions, filling their fields (W,X,Y,Z) and finally multiplying them, getting the final quaternion.
I've tried to use Euler angles and when I used EulerYXZ setting (only Yaw and Roll) it works well. But when I add pitch (which should be rolling in the direction of the line's axis) object's do rotate, but it doesn't circle the sphere any more. Probably my additional rotation incorporated some dislocation and I don't know how to figure it out.
Firstly, I created Quaternions which represent yaw and roll like this :
btQuaternion qx,qy,qz,
qx.setW(1);
qx.setX(0);
qx.setY(0);
qx.setZ(0);
qy.setW( btCos( -x*DEGREE/2.0f )); //x is the example angle value, * DEGREE provides radians
qy.setX(0);
qy.setY(btSin( -x*DEGREE/2.0f ));
qy.setZ(0);
qz.setW(btCos(( y+inclined )*DEGREE/2.0f ));
qz.setX(0);
qz.setY(0);
qz.setZ( btSin( (y+inclined)*DEGREE/2.0f ));
Now I can get final quaternion by multiplying them:
TransformStick.setRotation(qx*qy*qz);
How should I add rolling along the line's axis in order not to change the line's end position ?
I've a tube geometry with 174 points, 12 radius segment, 100 radius and 174 segments.
When I double click at any part of a tube, the scaled portion of a tube with +/- 8 points will be displayed.
Now the issue is when I click at bending part of a tube, the scaled portion does not look as good as I click on a straight part of a tube.
Please find below the 2 images.
Please find jsfiddle here.
Please find below the code of scaling.
tube = new THREE.TubeGeometry(extrudePath, segments, 100, radiusSegments, closed, debug);
tube.dynamic = true;
tube.computeBoundingBox();
console.log(tube);
tube.scale.x = tube.boundingBox.max.x;
tube.scale.z = tube.boundingBox.max.z;
Is there anyway to scale it properly or transform that bending portion into cylinder so that it looks like the straight portion of a tube ?
I think the scaling you are doing is improper. Since the section you are trying to scale may not have its axis along the y axis, scaling the x and z parameters only will result in distortion. Is it possible to know the axis of the section? Then there are 2 ways -
1) Rotate the section so the axis is aligned with y axis, scale x and z coordinates and rotate the section back.
2) Come up with a formula to scale a cylinder with axis in arbitrary direction.
Since this is a very old question you probably have the answer already. Please let me know if I am wrong and what worked for you.
How does one rotate a model and change the forward direction of it with the rotation?
I rotate but it just rotates on the axis and the forward is still the same.
This is probably a noob question but it's been kicking me buttocks.
You can use look at method to rotate your spatial to a target point. Below sample makes a spatial look at camera with up vector 1,0,0
spatial_x.lookAt(cam.getLocation(),new Vector3f(1,0,0));
If you just want to rotate about x axis for 0.2 radians:
spatial_x.rotate(0.2,0,0);
Y axis for 1 radian and Z axis for 3 radians:
spatial_x.rotate(0,1,3);