Hi, I have no experience with threejs yet, here’s what I wish to do:
Have a rotating point cloud displayed on a web page. the points are placed at each vertices from a imported mesh (GLB), I’d like to load a new mesh for different pages. I may need to subdivide the mesh to have more points, I want to keep the size of the assets low to have the page loading fast.
On top of the rotating animation, I’d like to add a pulsating effect on the points, like a wave running through the mesh.
Is Threejs the right tool for my needs? or do you see a better/simpler alternative? If I go the threejs route, what are the key points I have to look at?
Thank you
I should be possible to implement what you are looking for with three.js. You will find a lot of examples that show you how to import glTF assets. The subdivision part can be a bit tricky since analytical approaches might generate points at places where you don’t want them. However, it’s definitely worth to give three-subdivide a try an see how it goes. When animating points, you can do this with JavaScript or with a shader modification. If you are new to three.js I would probably start with doing this in JS. If the performance isn’t good enough or you want to optimize your app, you have to move the code to the vertex shader of PointsMaterial. I list a few examples below that demonstrate the different approaches outlined in this post.
https://threejs.org/examples/?q=gltf
https://threejs.org/examples/webgl_modifier_subdivision
https://threejs.org/examples/webgl_materials_modified
1 Like
Just a fantasy.
Points: MeshSurfaceSampler + onBeforeCompile.
Demo: https://codepen.io/prisoner849/full/yLRJVVM
3 Likes
Thanks for the pointers, I will try this way. The solution of @prisoner849 seems very interesting and may fill my needs!
