Raycast to find point that intersects the z-axis at zero - three.js

Is it possible to make a raycast that triggers when it intersects zero on the z-axis, rather than waiting to hit an object?
I have an orthographic camera at (0, 0, -40), and facing directly towards the origin. I want to send a raycast from the center of each edge of the camera's viewport to find the (x, y) points where they intersect the z-axis at zero.

If it's an orthographic camera, the edges of the frustum are parallel like a box. Looking straight down the Z-axis, you can get the x,y values easily with:
x: camera.left or camera.right
y: camera.top or camera.bottom
They don't diverge at all, since ortho cams don't have perspective, so they'll also cross the Z-plane at the position of the camera's edges.

Related

threejs : rotating panorama to look at camera direction

I have two spheres on which panoramic image is mapped. I want to make smooth transition between 2 panoramas with fade effect. for both panorama I have initial camera direction set for best view.
Now the issue is if user is looking at some camera angle in first panorama and then he clicks on some button to switch panorama I want to give fade effect and directly land on initial camera angle of another pano.
But as both pano are sharing common camera, I cannot play with camera to achieve it so I devised following solution -
image depicting problem
rotate target sphere so that it looks at desired camera direction.
rotate target sphere so that it looks at existing camera direction.
fadeout source sphere.
camera look at new panos camera direction.
rotate back pano to initial orientation.
Here I am not able to find formula of rotating panorama to look at camera. (like camera is static and pano is rotated to achieve similar effect as if we are moving camera).
Can somebody please help in finding formula to rotate pano(sphere) relative to camera.
Matrix is a very powerful tool to solve rotation problem. I made a simple to explain.
At the beginning, the camera is in the center of the left sphere and face to initial viewpoint, then, the camera face to another point, now, the camera's rotation has changed, next, camera move to the center of the right sphere and keep its orientation. and we need to rotate the right sphere. If C is the point that we want to make the camera to face, first, we rotate A to B, second, we rotate some angle θ equal to C to A.
So, how to do like that? I used matrix, because A is an initial point, matrix in an identity matrix, and the rotation from A to C can be represented by a matrix, calculated by three.js function matrix4.lookAt(eye,center,up) which 'eye' is the camera position, 'center' is coordinate of C, and 'up' is camera up vector. Then, rotation matrix from C to A is the inverse matrix of the matrix from A to C. Because the camera is face to B now, so the camera's matrix equals to the rotation matrix from A to B.
Finally, we put it all together, the final rotation matrix can be written in:rotationMatrix = matrixAtoB.multiply(new THREE.Matrix4().getInverse(matrixAtoC));
jsfiddle example.
This way is a matrix way, you can also solve the problem with the spherical polar system.

Three.js - sending ray from object to camera

Thanks for the helps in advance.
Three.js Raycaster class allows sending rays from camera to the object. I want to achieve a reverse operation. Imagine that we have a plane in the scene which represents our screen for projection. We also have an object (mesh) to be projected. I'm trying to find where would a vertex be projected on the screen.
Practically, for a vertex, if we project a ray from vertex to camera, we need to find its intersection with the screen plane. Note that everything is in 3D here. So my screen(camera) plane is in 3D coordinates too.
Any advise to solve this problem?
I think what you are looking for is projection of an object3d to screen position.
It was answered here:
answer
then you will have vector2d with x,y screen coordinates.
if you want the point on an actual 3d plane, you can then make a ray from the camera to that position on the screen, add to the ray intersection only that plane you locate infront of the camera, and then get the intersection point:
rayCaster.setFromCamera(vector2d, camera);
var aIntersects = rayCaster.intersectObject(planeInFrontOfCamera);
if (aIntersects.length > 0) {
var positionOnPlane = aIntersects[0].point.
}

Inaccurate calculation of vertex positions in the projection

There is a sphere of radius 7000 that is wrapped in Object3D with the position (0,0,0)
When the zoom camera as close as possible to the heights (eg 0.2 from vertices), we get the following:
That is, the larger the value of the vertices, the worse the approximation accuracy in the camera thereto. And if the node is in the center Object3D, then there is no such problem. How to fix it?
Changing near and far does not give any result, works only if remove Object3D and set the vertices of the geometry closer to the center of the scene

Rotate already rotated object around axis

I have a prefab layer object (rectangle) which is rotated bei some degrees to have the right angle to be seen by my 2d camera.
Now i want to rotate the object by x degrees around the Vector3.up axis.
this.gameObject.transform.RotateAroundLocal(this.gameObject.transform.up,angle);
I also tried Vector3.up as the axis and RotateAround , none of that produces the expected result. It rotates some, but not the correct angle somehow.
When it comes to 2D, I usually use orthographic camera looking at XY plane with Z axis pointing away from it. In which case I rotate things as follows:
gameObject.transform.Rotate(0, 0, angle, Space.World);
Which is angle degrees around Z axis clockwise.
In your case, I guess, it would be
gameObject.transform.Rotate(0, angle, 0 Space.World);

How to find orientation of rubik cube?

I'm trying to make a rubik cube game in webgl using three.js (you can try it here).
And I have problems to detect on witch axis I have to rotate my cube according the rotation of the cube. For instance, if the cube is in original position/rotation, if I want to rotate the left layer from down to up, I must make a rotation on the Y axis. But I rotate my cube 90 degrees on Y, I will have to rotate It on the Z axis to rotate my left layer from down to up.
I'm trying to find a way to get the correct rotation axis according the orientation of the cube.
For the moment I check witch vector of the axis of the rotation matrix of the cube is most parallel with the vector(0,1,0) if I want to move a front layer from down to up. But it do not works in edge cases like this for instance :
I guess there is some simple way to do that, but I'm not good enough in matrix and mathematical stuff :)
An AxisHelper can show the aixs of the scene which you could determine the orientation with.
var axishelper = new THREE.AxisHelper(40);
axishelper.position.y = 300;
scene.add(axishelper);
You could also log your cube and check the position and rotation properties with Chrome Developer Tools or Firebug.
You can store the orientation of each cube in its own 4x4 matrix (i.e. a "model" matrix) that tells you how to get from the cube's local coordinates to the world's coordinates. Now, since you want to rotate the cube around to an axis (i.e. vector) in world coordinates, you need to translate the axis into cube coordinates. This is exactly what the inverse of the model matrix yields.

Resources