I have a problem I don't known how I can select the position of the selected inside scene and move camera into it
I found a project sample, and I want to build an example like it
Sample project
Thank you so much!
You basically solve this problem in two steps:
First, you have to make 3D objects selectable which can be done via raycasting. There are many official examples that demonstrate 3D interaction based on raycasting, for example:
https://threejs.org/examples/webgl_interactive_cubes
If you know that a certain 3D object was clicked, you animate the camera from its current position to a defined target position. The possible target positions can be defined prior or you compute the in some way on the fly based on the object's bounding volume and the current camera position. The actual animation can be done in many ways. One approach is using a tweening engine like tween.js. Check out the following example to see how it is used together with three.js:
https://threejs.org/examples/css3d_periodictable
Related
I am trying to achieve movement of an object on walls, instead of only one plane. In this example, an object dragged on walls by using:
intersects = raycaster.intersectObjects([walls]);
object.position.copy(intersects[0].point);
However, with this method, the object jumps because the object's center moves to the mouse. There is a related question and helpful JSFiddle for dragging on one plane without jumpin Would you please help me to modify it for multiples planes (walls)? Thanks
After reading your comment, I think what you're looking for is you want the object to animate to the position. You can do this a few ways. The "threejs" way is to move it each frame (within the animate/update loop). You could do this with Vector3.lerp by storing intersects[0].point as your target location and lerping your object.position to it each frame. Another option is to use an animation library like animejs or gsap.
I'm looking for a point where to start and how to do it right. I have a 3d model of an object. On this object are special points. Another thing I have is real photo of this object with source of light
coming from one of the points. What I want to achieve is to in some way comapre this photo and model to be able by basing on source of light to determine what specific point it is.
Which technology/library will allow me to achieve desired result and where I should start looking?
Edit:
To be more accurate. I don't have any data yet. But camera will be placed in fixed position same as metal part. This part will be rotated only in single axis. And this part have different shapes on different angles so it will be easier (I think) to match it with 3d model.
I have a cupboard with 9 boxes. On one of them I have animation, which open / close box. It is only change X coordinate of the box, but I can't apply this animation to another boxes, because animation will move it to the coordinate of the first box.
In the debug mode parameter Keep Original Position XZ are disabled. Can't understand, what is wrong.
Should I create 9 similar animations for 9 boxes?
I know that it is possible to animate stuffs using relative positions on the UI when using the anchors, but there does not seem to be any clean solution for 3D objects... This post offers what seem to be the "best" solution for now (it uses an empty parent transform to move the animated object correctly...)
You should be able to apply the animation to any object. I would recommend making a prefab of the "box" with the animation attached, then using the prefab for each. Honestly I don't have much experience with animations of 3D objects, but even my 2D animations are in a 3D space, and each object animates properly with the same animations individually regardless of their location.
Does anyone know how can I perform a simple collision check to push back camera so that it doesn't "go through" scene? Is it possible to make a camera respect the 3D objects "masses"? I'm trying to make a small simulator to fly around a building, and enter some rooms, but the camera will always go inside objects.
You can set 3 raycasters for each 3D directions. You append them and the camera to an empty object that you move (not the camera) so everything moves at once.
When your raycasters intersects something you make the difference between the intersection point coordinates and the empty object position. This gives you all the information you can need.
If you want to define objects parameters like masses, add them to object.userData and access them via the returned intersection array.
I'm using the excellent code provided in threex to allow me to capture clicks on various objects in my scene, which allows me to select them. This works with no issue.
I'd like to extend the selection functionality, where the user can draw a selection box(working), and I can detect all the objects in the scene which are rendered in this selection.
Looking at threex / three, the general onclick algorithm seems to be:
project mouse co-ords to Ray
using ray.intersectObjects(scene), it tests each object in the scene for ray
intersection
This works for a single '1D' ray in the system, but there doesn't seem to be an easy way to modify it to work with a selection box.
Before I attempt to extend this mechanism to work with a selection frustum, is there an alternate / existing facility?
The answer to your question is no, there is no such existing facility.
I would not use Raycaster.intersects() for this.
Probably the easiest thing to do is to assign a 2D screenCoords property to each object, and set it equal to the screen projection of the object's world position. Search this site for how to do that.
Then, consider as selected, those objects whose screenCoords are inside the selection box in screen space.
If you need complete containment, then you have to either do the above for each vertex, or use something like a bounding sphere as an approximation.
three.js r.58