Help | Sphere dots model

[eugenius]

Hello guys!
I’m trying to create something like that
Can you help me please?

maybe you have some examples or similar cases because I don’t know how to do this so that the performance is good
I’ve built the model with 256 lines from center to random position

const geometry = new THREE.BufferGeometry().setFromPoints(lineCoord)
const line = new THREE.Line(geometry, material)

and then I’ve added 256 circles at the end of each line

const circle = new THREE.Mesh(circleGeometry, material)
circle.position.set(circleCoord.x, circleCoord.y, circleCoord.z)

my result

but I don’t know how to do the animations and all my attempts with very poor performance

thank you for tour attention)

[mjurczyk]

Since there’s quite literally zero visual difference in this case - your spheres are rendered without any textures or shading at all - consider using Points instead of Spheres. You should be easily able to render one billion points without worrying about losing even 0.1fps

[eugenius]

still not clear to me
but then how to animate them?

[mjurczyk]

You can animate points using the position buffer.

Alternatively - you can continue with spheres, but consider using instanced spheres instead - but I feel like 256 shouldn’t be an amount that’s affecting performance greatly.

Does this example perform ok for you when you set Raycasters count to 1000 (here’s the code, you can safely ignore the BVH part, it’s just an example) ?

[Chaser_Code]

Here will be about 2 draw calls and about 1-2ms. For dots use point material or instanced planes with custom shader to rotate them to cameraPosition.

[hofk]

Maybe you can experiment with it?

From the Collection of examples from discourse.threejs.org

CloudOfPointsMesh

[seanwasere]

Here is something using R3F.
Animated, and the lines fade in/out : SBCODE Editor

[prisoner849]

An option from the twilight zone of my mind.
LineSegments and Points share the same DataTexture with the data of vertices directions and radii, rotation axes and speeds.

Demo: https://codepen.io/prisoner849/full/ExrJrVV

[eugenius]

thank you guys! very good examples!

[jrlazz]

Hi @eugenius

Please take a look at this page, made with axeshelper:

https://jrlazz.eu5.org/anim/axes_01.html

or with random lengths:

https://jrlazz.eu5.org/anim/axes_03.html

or