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)
Related
I'm using ThreeJS, but this is a general math question.
My end goal is to position an object in my scene using 2D screen space coordinates; however, I want a specific z position in the perspective projection.
As an example, I have a sphere that I want to place towards the bottom left of the screen while having the sphere be 5 units away from the camera. If the camera were to move, the sphere would maintain its perceived size and position.
I can't use an orthographic camera because the sphere needs to be able to move around in the perspective projection. At some point the sphere will be undocked from the screen and interact with the scene using physics.
I'm sure the solution is somewhere in the camera inverse matrix, however, that is beyond my abilities at the current moment.
Any help is greatly appreciated.
Thanks!
Your post includes too many questions, which is out of scope for StackOverflow. But I’ll try to answer just the main one:
Create a plane Mesh using PlaneGeometry.
Rotate it to face the camera, place it 5 units away from the camera.
Add it as a child with camera.add(plane); so whenever the camera moves, the plane moves with it.
Use a Raycaster’s .setfromCamera(cords, cam)
then
.intersectObject(plane)
method to convert x, y screen cords into an x, y, z world position where it
intersects the plane. You can read about it in the docs.
Once it’s working, make the plane invisible with visible = false
You can see the raycaster working in this official example: https://threejs.org/examples/#webgl_geometry_terrain_raycast
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?
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.
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);
I am facing problems in rotation of cube , my requirements is rotate the cube so that its new position starts from end of one face ,
I tried to rotate the cube using opengl es command glrotatef ( 90,0,1) , here rotation happening at center of cube I want to shift the right corner of cube .
If I am not clear please let me know
rotatef rotates around the origin. So you can either adjust your cube geometry so that its coordinates are arranged with the origin on the face you want to rotate around, or you can do it yourself at runtime with a quick call to translatef.
So, assuming your cube is 2 units in every direction (ie, extends one unit from the centre both positively and negatively), then where you probably have something like:
glRotatef(90, 0, 1, 0);
somehowDrawCube();
You'd put:
glRotatef(90, 0, 1, 0);
glTranslatef(-1, 0, 0); // to align the right face onto the local origin
somehowDrawCube();