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.
Related
I have a model with joints that individual shapes rotate around. The model is translated to the center. The matrix applied with applyMatrix() is a rotation matrix based on a quaternion value so it can rotate around without gimbal lock.
But then I want to translate and rotate around a JOINT point, which uses an offset of the model, so I can find that point, because it's just model.x/y/z + offset.x/y/z. However, this doesn't take into consideration the rotation from applyMatrix(), but I want to be able to calculate where the Joint point (x,y,z) is at whatever rotation it's in.
translate(width/2, height/2, 0);
applyMatrix(m[1][1],m[1][2],m[1][0],0,
m[2][1],m[2][2],m[2][0],0,
m[0][1],m[0][2],m[0][0],0,
0,0,0,1);
pushMatrix();
// rotate around this joint point
translate(offsetX, offsetY, offsetZ);
// !!!!
// WHAT is the new x,y,z right here??
// !!!!
rotate(amt);
translate(-offsetX, -offsetY, -offsetZ);
shape(component)
popMatrix();
Check out the coordinates section of the reference.
Specifically, it sounds like you're looking for the screenX() and screenY() functions. Or you could use the modelX() and modelY() functions to go the other way and convert your screen coordinates into model coordinates.
I was trying to clip left half of a planeBuffer using material.clippingPlanes.
When the object is at center with rotation (0,0,0) then the clipping works.
object.material.clippingPlanes =
[object.getWorldDirection().cross(object.up).normalize(), object.position.z )];
But this code fails when the object is at a non-zero position with non-zero rotation and the cut does not change with orientation of object.
From Material.clippingPlanes:
User-defined clipping planes specified as THREE.Plane objects in world space.
Because the planes are in world space, they won't orient within your object's local space. You would need to apply your object's world transformation matrix to the planes in order to align them with your object.
myMesh.material.clippingPlanes[0].applyMatrix4(myMesh.matrixWorld);
Note that if your mesh is moving around, you'd need to store the original clipping plane for application of the new matrixWorld from each transformation.
// somehwere else in the code:
var clipPlane1 = new THREE.Plane(); // however you configure it is up to you
// later, probably in your render method:
myMesh.material.clippingPlanes[0].copy(clipPlane1);
myMesh.material.clippingPlanes[0].applyMatrix4(myMesh.matrixWorld);
I have a background pixmap, basically a canvas, which I draw a bunch of
rectangles on and I need to rotate the pixmap and rectangles.
However rotating the background pixmap and the rectangles needs to be done
seperately, that is the rotation of the background pixmap gets handled via an
external library routine and I need to rotate and redraw the rectangles
on top manually.
So far I am actually able to rotate the rectangles by applying a
transformation matrix I got from Wikipedia
to each vertex. What I don't know is how to translate them that each rectangle retains its position relative to the canvas.
Here is a quick drawing for illustration of what I want to achieve:
I need to do this with C and Xlib, but I'm not necessarily looking for code but would appreciate some general hints/algorithms.
To get the translated position for the child object, you need to rotate the relative position vector for the child object, and then add it to the origin:
Pseudocode would be:
public static Vector2 OffsetByRotation(Vector2 childPos, Vector2 parentPos, float angle)
{
var relativeVector = childPos - parentPos;
relativeVector = Rotate(relativeVector, angle);
return parentPos + relativeVector;
}
Note that your example image not only rotates the parent object, but also translates it: your left image is rotated around (0, 300), but this point is then translated to (0, 0).
The requested transformation is
X' = 300 - Y
Y' = X
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 am trying to create horizontal cylinder. I have found the below link which is used for creating vertical cylinder.
How to draw a cylinder on html5 canvas
can someone tell me the changes to create a horizontal cylinder?
In general, if you have a drawing you want to rotate, you can use transforms.
Transforms move, rotate (and scale) the canvas without the need to recode your desired drawing.
A Demo: http://jsfiddle.net/m1erickson/RU26r/
This transform will rotate your original drawing 90 degrees:
drawRotatedCylinder(100,100,50,30,90);
function drawRotatedCylinder(x,y,w,h,degreeAngle){
// save the context in its unrotated state
context.save();
// translate to the rotation point
// your object will rotate around the rotation point
// so if you want it to rotate from the center then
// translate to x+width/2, y+height/2
context.translate(x+w/2,y+h/2);
// rotate by 90 degrees
// rotate() takes radians, so convert to radians
// with radians==degrees*Math.PI/180
context.rotate(degreeAngle*Math.PI/180);
// draw your original shape--no recoding required!
drawCylinder(-w/2,-h/2,w,h);
// restore the context to its untransformed state
context.restore();
}