ThreeJS How to move the center coordination of the scene? - three.js

I am trying to move the center of the scene from the center X of the mesh to the lowest x point (floor intersection) ? as I need to inspect intersection point according to the center (0,0,0) using Raycaster ?

if geometry.boundingBox is undefined then you can compute it by
geometry.computeBoundingBox ()
which updates the geometry.boundingBox attribute.
Then you can use geometry.boundingBox.min and geometry.boundingBox.max to figure out how much to move your model.

Related

Convert screen space X,Y position into perspective projection with a specific z position

I'm using ThreeJS, but this is a general math question.
My end goal is to position an object in my scene using 2D screen space coordinates; however, I want a specific z position in the perspective projection.
As an example, I have a sphere that I want to place towards the bottom left of the screen while having the sphere be 5 units away from the camera. If the camera were to move, the sphere would maintain its perceived size and position.
I can't use an orthographic camera because the sphere needs to be able to move around in the perspective projection. At some point the sphere will be undocked from the screen and interact with the scene using physics.
I'm sure the solution is somewhere in the camera inverse matrix, however, that is beyond my abilities at the current moment.
Any help is greatly appreciated.
Thanks!
Your post includes too many questions, which is out of scope for StackOverflow. But I’ll try to answer just the main one:
Create a plane Mesh using PlaneGeometry.
Rotate it to face the camera, place it 5 units away from the camera.
Add it as a child with camera.add(plane); so whenever the camera moves, the plane moves with it.
Use a Raycaster’s .setfromCamera(cords, cam)
then
.intersectObject(plane)
method to convert x, y screen cords into an x, y, z world position where it
intersects the plane. You can read about it in the docs.
Once it’s working, make the plane invisible with visible = false
You can see the raycaster working in this official example: https://threejs.org/examples/#webgl_geometry_terrain_raycast

How to change pivot point for rotation on TrackballControls but keep camera.lookAt position same?

I need to be able to change rotation pivot without changing camera lookAt on THREE.TrackballControls no mater what I tried I could not succeed. Please give me a direction to solve this problem. What I am actually trying to achieve is Revit like mouse controls.
I was able to solve this problem by creating 2 3D objects named orbit and target, then add target and camera into orbit as child objects... camera always looks at target.position, mousemove on x axis rotates the orbit object around Z axis (hence target and camera rotates around the orbit) and mousemove on y axis rotates the camera arm (camera.position vector) around cameraSideways direction.

Raycasting through a custom camera projection matrix

After modifying my main camera's projection matrix, the ScreenPointToRay method that use ray casting begin to fail, so the method which detect touched object use raycast fail too. Is there any way to use ScreenPointToRay method with a custom camera projection matrix?
If you made a custom camera projection matrix, then you probably know where is the user pointing to, how about casting a ray yourself and not using the helper?
If you have a problem with translation of the cursor to world position, there is a good approximation - take four angles on approxiamtely the edges of your camera's viewpoint (top of the viewport horizontal center, left of the viewport vertical center etc.) and interpolate between them.

Three JS How to make ray or rays from camera to all object in rederer to check faceIndex

I have some project for child http://kinosura.kiev.ua/sova/ and i need to check faceIndex of all cubes in screen.
Now i use intersections array from mouse, but is working only when user pointer at the cube.
How to make ray or rays from camera to all object to check faceIndex ?
I try to make four rays to cubes but if i set cube.position as origin of like this:
raycaster.setFromCamera( cube1.positoin , camera )
I get empty array of intersections.
I also try to set static 2d vector as origin (get coordinate from mouse) but i have relative renderer size and this coordinate all time change... its not work(
Thanks for answer anyway.
I suggest that you try another approach It appears that your cubes do not cover one another, relative to the camera view. So use the surface normals, and compare them to the view direction to determine if they are facing the camera or facing away from the camera by a simple one-per-polygon dot product.
When you are creating your geometry, before adding it a THREE.Mesh call .generateFaceNormals() on it.
Instead of ray casting, iterate through all faces, grab the surface normal of the face, transform relative to the view (inverse transpose of the object's matrix), then dot(). might sound complicated, at first, but it's actually just a couple of steps and much faster than doing a lot of raycasts (which will probably include this anyway!)

Getting coordinates of the mouse in relation to 3D space in THREE.js

I have struggled for the past 3 weeks trying to figure this out. If anyone could help me I would appreciate it so much.
I'm developing a game similar to Geometry Wars in where I have a triangle in the middle of the screen which you can move around.
The problem is I need the triangle to rotate and face toward the direction of the mouse curser. I don't need to worry about the z-axis per-say as I always have the camera in a fixed position (z=500) and I am treating the scene as a "2D scene" - all the action occurs on the z=0 plane.
Calculating the angle between the triangle and the mouse is elementary:
targetAngle = Math.atan2(mouseCoord.y-this.position.y, mouseCoord.x-this.position.x)
where this is the mesh.
The problem is that the mouseCoords are in standed Dom window format whilst the position of the triangle is in Three.js format.
Q) How would I convert the mouse coords to represent the coords on the z=0 plane where the triangle is?
I have tryed so many ways including ray intersection but nothing works ;(
Thank you all for your help and thank you so much for an amazing framework!!!!
I don't actually see the problem. use the THREE.vector3 with the z coord in 0. then use something like triangle.rotate(THREE.vector3(targetAngle,0,0) or something
I suspect your intersection isn't working because of a CSS offset by your canvas within the DOM.
If you need the triangle to look at something specific, you should simply be able to use the "lookAt" method of the triangle.
To have it look at the camera for example:
triangleMesh.lookAt(camera.position);

Resources