I have this code in Threejs where I have a cone and a sphere being children to an Object3D named "sphereGroup"
inside my animate function I have the following
sphere.position.x = -4;
cone.position.x= 3 ;
sphereGroup.rotation.y -= 2* angle ;
when this runs I see that the cone and sphere both rotate both around their axis AND the group center. why does this behavior happen ?
see here : http://ahmedfathishaban.herokuapp.com/index.html
I read that the order is always (TRS)parent * (TRS)child
in my case it will minimize to : R(parent) * T(child) => Translate the cone from the group center then rotate the whole group around the group center.
So I understand the cone (or sphere) needs to rotate around the group center, without spinning around its own axis, What Am I missing ?
Related
In Three.js there seems to be quite a few ways of rotation which i personally do not find very intuitive. See e.g. the example
http://cloud.engineering-bear.com/apps/robot/robot.html
I get very strange unexpected effects when I apply rotation to multiple objects. E.g. when I rotate objects that have been added to each other and start rotating the parent the individual objects will all over sudden by placed differently in respect to each other then they originally where. I am now experimenting with grouping and would like to avoid the same effect.
See http://pi-q-robot.bitplan.com/example/robot?robot=/models/thing3088064.json for the current state of affairs and https://github.com/BITPlan/PI-Q-Robot for the source code.
So i searched for proper examples following the different API options:
rotation
function renderScene() {
stats.update();
//side1.rotation.z += 0.02;
pivot.rotation.z += 0.02;
https://jsfiddle.net/of1vfhzz/1/
https://github.com/mrdoob/three.js/issues/1958
rotateOnAxis
three.js rotate Object3d around Y axis at it center
How to rotate a 3D object on axis three.js?
ThreeJS - rotation around object's own axis
rotateAroundWorldAxis
object.rotateAroundWorldAxis(p, ax, r * Math.PI * 2 / frames);
How to rotate a object on axis world three.js?
https://stackoverflow.com/a/32038265/1497139
https://jsfiddle.net/b4wqxkjn/7/
THREE.js Update rotation property of object after rotateOnWorldAxis
rotateOnWorldAxis
object.rotateOnWorldAxis( axis, angle );
Rotate around World Axis
rotateAboutPoint
Three JS Pivot point
Rotation anchor point in Three.js
setRotationFromAxisAngle
https://threejs.org/docs/#api/en/core/Object3D.setRotationFromAxisAngle
setEulerFromQuaternion
quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );
object.rotation.setEulerFromQuaternion( quaternion );
Three.js - Rotating a sphere around a certain axis
applyMatrix
this.mesh.updateMatrixWorld(); // important !
childPart.mesh.applyMatrix(new THREE.Matrix4().getInverse(this.mesh.matrixWorld))
Applying a matrix in Three.js does not what I expect
I like the jsFiddle for https://stackoverflow.com/a/56427636/1497139
var pivot = new THREE.Object3D();
pivot.add( cube );
scene.add( pivot );
I also found the following discussions
pivot issue in discourcee.three.js.org
https://discourse.threejs.org/t/rotate-group-around-pivot/3656
https://discourse.threejs.org/t/how-to-rotate-an-object-around-a-pivot-point/6838
https://discourse.threejs.org/t/set-dynamically-generated-groups-pivot-position-to-the-center-of-its-children-objects-position/6349
https://discourse.threejs.org/t/my-3d-model-is-not-rotating-around-its-origin/3339/3
https://jsfiddle.net/blackstrings/c0o3Lm45/
https://discourse.threejs.org/t/rotate-object-at-end-point/2190
https://jsfiddle.net/f2Lommf5/3594/
Questions
None of the above information is clear enough to get to the point of the problem to be solved. The graphics above are much clearer stating the problem than the proposals are stating a solution.
a)
I'd like to use the cylinder as the axis even when the cylinder is moved.I'd expect the easiest way to go would be to use rotateAroundWorldAxis - is that available in the latest revision from three.js or do i have to add it from e.g. https://stackoverflow.com/a/32038265/1497139?
b) I'd like to get a chain of objects to be rotated to later apply inverse kinematics as in
https://github.com/jsantell/THREE.IK
https://jsantell.github.io/THREE.IK/
Although i looked at the source code of that solutions I can't really find the place where the parent-child positioning and rotating is happening. What are the relevant lines of code / API functions that would make proper rotation around a chain of joints happen?
I already looked in the Bone/Skeleton API of Three.js but had the same problem there - lots of lines of code but no clear point where the rotation/positioning between child and parent happens.
Question a)
Basically it works as expected:
cylinder.position.set( options.x, 15, options.z );
pivot.position.x=options.x;
pivot.position.z=options.z;
see
https://jsfiddle.net/wf_bitplan_com/4f6ebs90/13/
Question b)
see
https://codepen.io/seppl2019/pen/zgJVKM
The key is to set the positions correctly. Instead of the proposal at https://stackoverflow.com/a/43837053/1497139 the size is computed in this case.
// create the pivot to rotate around/about
this.pivot = new THREE.Group();
this.pivot.add(this.mesh);
// shift the pivot position to fit my size + the size of the joint
this.pivot.position.set(
x,
y + this.size.y / 2 + this.pivotr,
z + this.size.z / 2
);
// reposition the mesh accordingly
this.mesh.position.set(0, this.size.y / 2, 0);
I've created a sphere and the centre of the sphere is located at 0,0,0.
The radius of the sphere is 9.
I've created a cube that is positioned above the surface/faces of the sphere.
When I click on the cube and then proceed to click on any point on the surface of the sphere my cube will rotate it's relative position to the point clicked on the sphere (to look in the direction of the point so to say) and then it will move along the surface of the sphere towards the point clicked. The rotation and movement all happen within a render loop.
What I want to do is cast a Ray from a point relative to the cubes position but at a greater distance to the centre of the sphere. So for instance if the distance to any given point on any given face of my sphere is ~8.8 - 9 (of course the vertices would be at a distance of 9 and the centre of any face would be ~8.8 - 8.9) The distance of my cube from the centre of the sphere is 9.1. I want to cast a ray from about a distance of 12 towards the centre of my sphere.
So, if my cube is located at 0,0,9.1 then I want to cast a ray who's origin would be 0,0,12 and who's destination would be 0,0,0. Then only target the sphere as the object to intersect, determine the distance to any given point along any given face and then set the distance of the cube to 12 - someDistance. That way it would seem as though the cube is actually moving along the surface of the sphere. And if I modify the features of the sphere, the cube would appear to move along the contours of the surface.
Here is my code which is located inside of a looping render function.
Unfortunately it turns up nothing.
var direction = new THREE.Vector3(0,0,0);
var origin = new THREE.Vector3(object_cubi[x-1].posiX, object_cubi[x-1].posiY, object_cubi[x-1].posiZ);
origin.normalize();
origin.x *= 12;
origin.y *= 12;
origin.z *= 12;
var disRay = new THREE.Raycaster();
disRay.ray.set(origin, direction);
var rayIntersect = disRay.intersectObjects( targetList );
document.getElementById("test7").value = rayIntersect.length;
rayIntersect.length is always 0.
What am I missing?
To select the cube and pick a point on the surface I had to use raycaster and that code works fine. However it does incorporate projector().
all I needed to do was cast the ray from the centre of the sphere and make the material of the sphere double sided.
material.side = THREE.DoubleSide;
Now my cube moves along the contours of my sphere.
I have a scene in Three.js (r67) with a camera that is controlled by OrbitControls.
If I now select an arbitrary point (Vector3) in the scene, what would be the best way to bring this point (programmatically) to the nearest camera position just by rotating the camera?
Example Scenario
In the below picture the left side is the starting point. The camera rotates around the green sphere (like OrbitControls) where the center of the camera is the center of the sphere. I now like to automatically rotate the camera around the sphere (doing the minimum amount of moves) so that the red box is nearest to the camera (like on the right side).
Independntly to the method of selecting the point in the scene, there's several understanding to what you mean by "bringing camera just by rotating".
I suppose, You want to rotate the camera in the way, to make the selected point in the center of the screen.
This is simple:
camera.lookAt(your_point_in_scene);
You could do this more complicated. Firstly, find the current pointing vector. By default camera looks in direction Vector(0,0,1). When we rotate it in the same rotation as a camera, we will have camera direction:
var vec = new THREE.Vector3(0,0,1);
vec.applyQuaternion(camera.rotation._quaternion);
Now we must determine angle to rotate our camera, and axis, around which we would rotate.
Axis of rotation could be found as a cross product of camera direction and vector from camera to object. Angel could be extracted from dot product:
var object_dir = object_world_point.clone().sub(camera.position);
var axis = vec.clone().crossProduct(object_dir);
var angle = Math.acos( vec.clone().dot(object_dir) / vec.length() / object_dir.length());
Having angle and axis, we could rotate camera:
camera.rotateOnAxis(axis, angle);
Or, if you want to make it smooth:
// before animation started
var total_rotation = 0,
rotateon,
avel = 0.01; // 0.01 radian per second
if(total_rotation < angle){
rotateon = avel * time_delta;
camera.rotateOnAxis(axis, angle);
total_rotation += rotateon;
}
Well that's not hard Oo
You have a center/target point for the camera. You calculate the difference from the target position to the point position and normalize that vector to the length of the camera-centerpoint-distance (i.e. something like pointdistance.multiplyScalar(cameradistance.length() / pointdistance.length()) ).
And that's it. If I understood your question correctly. All you do is "extend" the point's positioni onto your "camera movement dome" and then you have the ideal new camera position. The camera's rotation is done automatic since you always target the center point.
Aaand if you want to smoothen the camera movement a bit you can just interpolate the angle (not the positions directly) with e.g. an exponential function, whatever you prefer.
Hi Dear please follow this
Independntly to the method of selecting the point in the scene, there's several understanding to what you mean by "bringing camera just by rotating".
I suppose, You want to rotate the camera in the way, to make the selected point in the center of the screen.
This is simple:
camera.lookAt(your_point_in_scene);
You could do this more complicated. Firstly, find the current pointing vector. By default camera looks in direction Vector(0,0,1). When we rotate it in the same rotation as a camera, we will have camera direction:
var vec = new THREE.Vector3(0,0,1);
vec.applyQuaternion(camera.rotation._quaternion);
Now we must determine angle to rotate our camera, and axis, around which we would rotate.
Axis of rotation could be found as a cross product of camera direction and vector from camera to object.
Angle could be extracted from dot product:
var object_dir = object_world_point.clone().sub(camera.position);
var axis = vec.clone().crossProduct(object_dir);
var angle = Math.acos( vec.clone().dot(object_dir) / vec.length() / object_dir.length());
I've searched far and wide, so if there's a similar question please forgive me but I just couldn't find it.
To put what I'm trying to do in context: I want to create an infinitely-generated field of stars that disappear as they go offscreen and reappear at the edge of the screen where the camera is moving. I'm working with a top-down view, so it must be pretty simple to achieve this, but alas I haven't a clue.
I'm using the following code to determine whether a star has gone off-screen and then replace it:
//update camera frustum
camera.projScreenMatrix.multiplyMatrices(
camera.projectionMatrix,
camera.matrixWorldInverse
);
camera.frustum.setFromMatrix(camera.projScreenMatrix);
//loop through stars
var stars=scene.stars.geometry.vertices;
for(var i=0;i<stars.length;i++) {
if(!camera.frustum.containsPoint(stars[i])) {
stars[i]=new THREE.Vector3(
// fill in the blank
);
scene.stars.geometry.verticesNeedUpdate=true;
}
}
Since I'm using a perspective camera, I know I'll need to somehow factor in camera.fov and other perspective elements, but as you can tell I'm no expert on the third dimension.
Assuming I have an angle or normalized vector telling me the direction the view is panning, how would I go about creating a vertex along the edge of the screen regardless of its Z position?
If I'm not clear enough, I'll be happy to clarify. Thanks.
I know this is an old question, but I came across it while looking for an answer and found a simple, trigonometry reliant method to get the left edge of the camera frustum, and I'm sharing it in case someone else might find it useful:
// Get half of the cameras field of view angle in radians
var fov = camera.fov / 180 * Math.PI / 2;
// Get the adjacent to calculate the opposite
// This assumes you are looking at the scene
var adjacent = camera.position.distanceTo( scene.position );
// Use trig to get the leftmost point (tangent = o / a)
var left = Math.tan( fov ) * adjacent * camera.aspect;
Basically, this gets the leftmost point, but if you don't multiply by the aspect ratio you should get a point in a circle around your camera frustum, so you could translate a point any direction away from the cameras focus and it would always be outside the frustum.
It works by assuming that the imaginary plane that is the camera is perpendicular to the line connecting the camera and its focus, so there is a straight angle. This should work if you want objects further away as well (so if you want them at a further point from the camera you just need to increase the distance between the focus and the camera).
Well, countless headaches and another question later, I've come up with a fairly makeshift answer. Just in case by some unlikely chance someone else has the same question, the following function plots a point on the scene relative to the camera's current view with whatever Z specified:
//only needs to be defined once
var projector=new THREE.Projector();
//input THREE.Vector3
function(vector) {
var z=vector.z;
vector.z=0;
projector.unprojectVector(vector,camera);
return camera.position.clone().add(
vector
.sub(camera.position)
.normalize()
.multiplyScalar(
-(camera.position.z-z)/vector.z
)
);
The x and y, in this case, both range from -1 to 1 for bottom-left to top-right. You can use position/window.Width and position/window.Height for extra precision (using mouse coordinates or what have you).
I made a 3D scene where I have three groups of models. I have a camera which is looking at one of those groups.
Models in these groups rotate around the group center (Up axis), and models also rotate their own local center (Up axis).
This is similar to XNA Racing Game car selection screen.
Only difference is that I want to be able to rotate my camera to look at another group.
When rotating camera to look at next group I want to rotate it 120 degrees (I have 3 model groups 360/3=120)
NOTE:
- camera is looking at a group from slightly above the group's plane.
for camera:
viewMatrix = Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
projectionMatrix = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, aspectRatio, 1f, 1000f);
OK:
I can rotate model around its own axis.
I can rotate group of models left or right around the group center point
(in game screen, closest model to the screen is the one currently selected).
Not OK:
I cannot find correct way to rotate camera around it's own Up axis.
Couple of images to clarify this situation:
It looks to me like you want all your rotations to be about the world up axis rather than the camera's up axis.
here's a possible way to change the view from one group to another. This will rotate at a constant rate. If you want it the rotation to slow a little as it arrives at the desired group, addition code is required. This assumes you know the center position of each group.
float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
float rotationRate = 0.01f; //radians per second. set to taste
Vector3 cameraGoal;// the center point of the group that you want the camera to settle on. changes with input.
Vector3 currentLookingDirection = cameraTarget - cameraPosition;//
Vector3 desiredLookingDirection = cameraGoal - cameraPosition;
float angularSeparationFactor = Vector3.Dot(currentLookingDirection, desiredLookingDirection);
if(angularSeparationFactor < 0.98f);//set to taste
{
float directionToRotate = Math.Sign(Vector3.Cross(currentLookingDirection , desiredLookingDirection ).Y);
cameraTarget = Vector3.Transform(cameraTarget - cameraPosition, Matrix.CreateRotationY(rotationRate * elapsed * directionToRotate)) + cameraPosition;
}
else
{
cameraTarget = cameraGoal;
}
view = Matrix.CreatLookAt(cameraPosition, cameraTarget, Vector3.Up);