I want to develop a 3d point cloud labeling tool, but I have no idea

I want to use three.js to develop a tool like this:

https://www.supervise.ly/_nuxt/videos/adding-red.346077e.webm

But at the moment, I don’t know how to do it.

In particular, the first step is how to create a cube by dragging the mouse.
How to get and set the position of the cube?

I think the zoom of the camera can be changed arbitrarily. How to determine the selected starting position?

Can you give me some ideas to help?
Or tell me which 3D data formulas I should learn.

Thanks.

Best free courses : https://discoverthreejs.com/

Best paid courses : https://threejs-journey.xyz/

@felixmariotto

Thank you, but I have mastered the basic part of the there.js.

I found this example and gave me some ideas.
https://threejs.org/examples/#webgl_interactive_voxelpainter

Maybe I also need to add an invisible floor, and then use raycaster and mouse(event) to calculate the location of the car.

I will try and hope it will come true.


Wow, I have realized it according to this idea !

thanks for the awesome information.

I got an idea, you can get some of the point’s position around the mouse by GPU selection,and then create a plane as the same height as the point did for interaction cause I saw the example u are showing the point’s color is height related.

@ towrabbit
only two sides in a plane at most, check the intersection quickly by using raymaster.
I don’t think we need to use GPU selection

ok thats cool