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.
}
Related
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.
I am trying to draw a line segment from a point a 3D scene to point on a HUD UI. One end of the line segment is specified in 3D e.g. (1.232, -34.12, 4.21) but the other I want to specify in 2D pixel coordinates e.g. (320, 200).
How can I convert the 2D coordinate to a 3D point and have it remain at those pixel coordinates as the camera (Perspective) moves? Initially I thought of taking the 2D position and projecting it onto the near view frustum maybe that would work, but wasn't sure how to do it or if there was a better way?
var vector = new THREE.Vector3(320, 200, 0.5);
vector.unproject(camera);
will return in vector a 3D point which you can use to draw.
If you keep unprojecting as the perspective camera moves you are guaranteed that the 2D point will seem not to move in your HUD.
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.
I would like to create a vertex shader in Three.js to render the faces of a textured geometry so that all the triangles are face-on to the camera.
This is to emulate the functionality and performance of Three.js Points, but without the size limitation of gl_PointSize.
I'm not really sure what calculation to perform in the vertex shader. Any help appreciated.
you will have to add custom attribute to your geometry, easiest one to use would be a vector to the center of the triangle
in vertex shader you will have to calculate how to move each vertex, you now have
vertex position
vector to center
vertex normal == face normal
camera orientation (from matrices)
from that you can calculate the triangle center, which be static and calculate the rotation vertex has to make around the triangle center around axis perpendicular to the vector to center so that normal will come out as inverse of the camera orientation
the math is not very complicated, but writing shader code is tedious because of the non-existent debug - i advise you to first write a code that rotates the positions of geometry(using only the same parametres) and port it to shader
* SOLVED *
It was not about 0,0,0 or distortion. It´s super weird but I found out that compute geometry as a Sphere worked! (even at the tiles corners, where you should think a sphere wouldnt cover it does)
http://threejs.org/docs/#Reference/Core/Geometry
computeBoundingSphere();
Problem desc. follows below.
Hey I'm building a webgl wall for my portfolio site, I need ray intersection to know both when user hovers over the wall and when they click what plane they're clicking on so I can redirect them to correct project.
http://www.martinlindelof.com
What i do is adding all planes on xyz(0,0,0) then I'm using dynamic geometry to place out their vertices on a point grid that's affected by a repelling particle (using traer)
now when I'm doing ray intersect (using examples from threejs r49) I get an empty array back, nothing hit.
could this be because all planes origins are in 0,0,0. should I maybe on each frame not only moving vertices but the entire plane?
or is something else.
(face normals seems to be pointing in the right direction, I see the texture on the plane and it's not inverted as it should be if it was the face backside with double sided planes. guess it's not by default in three.js when creating plane)
Ray got problems with object position 0,0,0 (because somewhere will be divided by position and will result in not dividable). Try another position.