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);
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 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 working app that uses Libgdx engine and decals in 3d space.
Now I need to rotate decals around X,Y,Z axis, but around custom pivot point that stands somewhere in the 3d space.
I found that decals have transformationOffset field, which might work with some calculations, but is Vector2 only. It means that I can move pivot point only over X and Y axis.
And when rotating decals over Y axis, wherever the pivot is, the result is the same.
decal.transformationOffset = new Vector2(0, -5);
decal.rotateX(newValues[0]);
decal.rotateY(newValues[1]);
decal.rotateZ(newValues[2]);
I need to move pivot over Z axis, too.
Is there some workaround for this issue?
Tnx!
EDIT:
I have succeded to rotate decal over pivot point in 3d space, but only if pivot's and decals's Z position is the same. If they are not I don't get what I've expected.
This is the code that works for pivot with same Z value:
decal.transformationOffset = new Vector2(pivotPosition.x - decal.getPosition().x, pivotPosition.y - decal.getPosition().y);
Tween.to(decal, DecalTween.XYZ_ROTATION, 5f).target(0, 360, 0).repeatYoyo(Tween.INFINITY, 0f).start(tweenManager);
And in tween I do this:
target.setRotationX(0);
target.setRotationY(0);
target.setRotationZ(0);
target.rotateX(newValues[0]);
target.rotateY(newValues[1]);
target.rotateZ(newValues[2]);
How to extend this to use and Z value for pivot. I'm trying to add and translation animation beside rotate to achive this, but the results is weird.
Tween.to(decal, DecalTween.MOVE_XYZ, 2.5f).target(decal.getPosition().x, decal.getPosition().y, pivotPosition.z - decal.getPosition().z).repeatYoyo(Tween.INFINITY, 0f).start(tweenManager);
decal.transformationOffset = new Vector2(pivotPosition.x - decal.getPosition().x, pivotPosition.y - decal.getPosition().y);
Tween.to(decal, DecalTween.XYZ_ROTATION, 5f).target(0, 360, 0).repeatYoyo(Tween.INFINITY, 0f).start(tweenManager);
Any idea how to combine translate and rotate animatio to get decal rotation in circle path over the pivot point?
I will answer my own question I guess.
I have extended Decal class, changed transformationOffset to Vector3.
Then in transformVertices I have added tz value, like there already was tx and ty. And add tz in calculation for vertex position.
Simple as that.
If anyone knows why is this left out from native libgdx support, please let me know.
Cheers.
Good evening,
I was using EaselJS and now I'm trying to figure out how to use ThreeJS.
In EaselJS, you can set the rotation point of an element on the canvas before rotating it, .but it seems impossible to do the same thing in ThreeJS.
So, how can I draw a Sphere very 30deg to form a circle, like a clock.
A sphere at 12, at 1 o'clock, 2 o'clock, 3 o'clock...
I can rotate my sphere (which is useless) and position it, but I don't know how to calculate the coordinates.
Can't wait to hear back from one of you,
Jay
You need to translate then rotate each sphere.
so translate each circle by the radius of the clock,
circle.translateZ(10);
then rotate it into place by rotating around the clock center. In this case around the y axis,
circle.rotateOnAxis(new THREE.Vector3(0.0, 1.0, 0.0), THREE.Math.degToRad(30*i));
Do that for each circle.
Both libraries are based on a hierarchy scene with matrix rotations and translations. But one is 3D. Also the API is kinda different.
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.