How to create multiple 3D curves in one call to be less expensive

Questions
, ,
1

Hi Experts,

If I want to create the following curve, how to do in three.s to create multiple same objects in one call, in order to be less expensive? And how to animate them all together? Should I just use Three.group? Thanks.

const curve = new THREE.CatmullRomCurve3([
new THREE.Vector3( -5, 0, 5 ),
new THREE.Vector3( -5, 15, 5 ),
new THREE.Vector3( 5, -15, 5 ),
new THREE.Vector3( 5, 0, 5 )]
)

let count = 100;
const geometry = new THREE.BufferGeometry()
const points = new THREE.Points(geometry, material)
const positions = new Float32Array(count * 3)
geometry.setAttribute(‘position’, new THREE.BufferAttribute(positions, 3))
scene.add(points)

2

Please use instancedmesh, and move each base gl_InstanceID

4

Thanks for your info. I’m trying it out.

One more question, if I want to make those multiple curves fixed onto one single surface, like plane or ball, how to use Three.js in the regard?

Thanks.

5

I think depends on how you define the plane/sphere in the coordinate axis. then based on normal and core point to use projection, or projection matrix

6

Maybe batched mesh

7

Something spherical, made of instanced curves :thinking:

2 Likes
8

Thanks for your good examples. You are pro.

9

Hi Pro,

Can I ask you one further question ? How about use MeshSurfaceSampler to get Vertex and Normal from any 3D object like a ball and then add other 3D object onto it?

What’s the difference between using this way and your self-made examples?

Thanks.

10

Explore the source code of this example: three.js examples
All the things you ask about is there

They are totally different things. :thinking:

11

I’m not a technical guy.

From the examples given, MeshSurfaceSampler seems to be able to do the same in the https://codepen.io/prisoner849/pen/LYXGzRb. That’s why I’m curious about the difference they make to implement the similar effect.

12

Neither am I :slight_smile:

If you see it this way, don’t hesitate to implement it with MeshSurfaceSampler. Creativity is up to you :handshake:

13

MeshSurfaceSampler cant, Such implementations are only really possible in some simple geometries like Sphere, Cube (With cube you will need to calculate like Pavel Boytchev did), Plane. Just some simple geometry.

==> As for complex geometries. You must have another method ( SDF/Volume/DepthTexture ) to get the best surface information. Because your case is moving lines, and lines created from points, so you need accurate information of the model surface, so that the line can move like a worm…

14

Thanks for your input. The point you refer to, SDF/Volume/DepthTexture, seems more difficult. I will try to search that.

Thanks.

15

Hi Pro,

Could you teach me how to create multiple objects of the following object on the same surface? https://codepen.io/prisoner849/full/ZEqGpRR

Thanks.

16

I found his work, Pavel Boytchev.

But, my question is how to create the same multiple objects in three.js. If you know, please teach me how to. Thanks.

17

Instancedmesh , u need try use chatgpt , it very good for tutorial

18

Thanks for reply

19

I tried using instancedMesh. When the amount is set at 1000, the browser slows down. Maybe my computer needs to be replaced.