In my application, I have a 3D scene displayed from 2 points of views, one an usual camera where all the objects are displayed in 3D, and one orthographic camera where the scene is displayed from above.
My 3D object are lying on a plane perpendicular to the axis of the orthographic camera. In my application a cube of size 30 describe in the real world a cube of size 30 mm.
In my view from above, I’d like that the user can measure some distances between the 3D object.
Has anyone had an idea or have a sample of code that can do that?
In particular, I can’t find a way to draw a point on the 3D scene.
Thanks,
there is a library for the react eco system for threejs that does this
generally, this stuff requires a pointer event system, hover, pointer over/out, clicks, possibly event bubbling and pointer capture. im not sure how feasible this will be in vanilla to rewrite this stuff from scratch over and over again. but other than that, once you have the objects the math should be relatively simple. you can consult the source code of the library maybe.
Your solution is working if the Three.js scene is displayed alone in the page.
Unfortunately, my web page is composed of 2 vertical div,
the left one is a text explaining what going on the right one where I display my three.Js scene.
In your fonction getIntersections below, I can’t figure out what the vector “vector” is.
Do I need to compute it by an another way to my specific layout?
function getIntersections(event) {
var vector = new THREE.Vector2();
vector.set(
event.clientX / window.innerWidth * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1
);
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vector, camera);
var intersects = raycaster.intersectObjects(scene.children);
return intersects;
}