Making a Shape with Vertices

[TimothyRoberts]

Hi guys, I'm new to r3f/threejs. I was wondering how to make a more intricate shape than a box or sphere using vertices? For example there is a tail on a character made here in three js (https://codepen.io/Yakudoo/pen/yNjRRL), can anyone help me to reproduce something like this in r3f?

// tail
 this.tail = new THREE.Group();
 this.tail.position.z = -20;
 this.tail.position.y = 10;

 var tailMat = new THREE.LineBasicMaterial({
   color: 0x5da683,
   linewidth: 5
 });

 var tailGeom = new THREE.Geometry();
 tailGeom.vertices.push(
   new THREE.Vector3(0, 0, 0),
   new THREE.Vector3(0, 5, -10),
   new THREE.Vector3(0, -5, -20),
   new THREE.Vector3(0, 0, -30)
 );

 this.tailLine = new THREE.Line(tailGeom, tailMat);

[drcmda]

it seems crazy to do this by code, instead of 1043 LOC this would be a 15 LOC app if the model was made in blender. but if you want to, the above translates into r3f either just like that 1:1 using primitive, or make it declarative.

const vertices = useMemo(() => points.map(point => new THREE.Vector3(...point)), [points])
return (
  <line>
    <geometry vertices={vertices} />
    <lineBasicMaterial color="red" />
  </line>
)

[TimothyRoberts]

This is exactly what I needed, thanks! I realise Blender would make my life easier, I will stick with the code for now until I learn how to use Blender. PS thanks for r3f, I'm seriously enjoying learning it.

[Loddgrimner]

Is there a way to set the vertices inside of the return part? I know you can do it by 'cheating' with the regular threejs stuff above but I want to do everything inside the react fiber tag stuff for simple things like drawing a line. Something like this:

 return (
   <line>
     <bufferGeometry>
       <vector3 args={[0,0,0]} />
       <vector3 args={[100,0,0]} />
     </bufferGeometry>
   </line>
 )

In a more general case with threeJS it seems to sometimes depend on functions like the BufferGeometry().setFromPoints(points) (or setAttribute, copy) to construct the objects, I don't understand how (if possible) you translate that it into the fiber declarative way? Falling back on building it imperatively is the only way then?

I guess usually you would want to do things like this imperatively for reasons when setting up a large amount of vertices for example, but it still bugs me like I am missing an important part of the puzzle on how to do the 'translation'.

[dangrabcad]

@Loddgrimner Don't bother trying to construct a BufferGeometry one point at a time like this. It's not an efficient use of React, it puts data inside of your code, and it's not how 3D graphics is made in real-world projects, so the library isn't set up for working this way. There's no right way to express this in a React tree. Just put your vertices in a 3D mesh file (such as a gltf) and use useLoader or some other way to put the whole mesh in your declarative tree.