Best approach to re-create this ethereum logo (custom octahedron)?

I am wondering what would be the best approach to re-create this 3D ethereum logo model:

I know you can download 3D models and render them using three-JS, but I assume it will be more efficient to create it from scratch in three-JS (I will be rendering hundreds of these) so it can be as bare bones as possible. Please correct me if this assumption is incorrect and I would be better off just using the already built 3D model.

My current thinking is two create two objects, one for the top and one for the bottom, and then join them with a THREE.Group which i can then move around as one object.

In terms of creating the top/bottom objects, is there a way to provide the (x,y,z) coordinates of each vertex and then render the 3D shape from those points? Or should I be approaching this differently?

Any tips/advice would be greatly appreciated. Thanks in advance!

if you just want reach your end goal quickly & efficiently then use a premade model or make one quickly in blender and export as glb

also you’ll get a draw call less if the two parts are a single geometry

if you want to learn how to make custom buffer geometry then start your journey here three.js manual

1 Like

Thanks @orion_prime for the response! One [hopefully] quick follow up:

if you just want reach your end goal quickly & efficiently then use a premade model or make one quickly in blender and export as glb

Is it fair to say that the model exported from blender would be more expensive to draw/render in three-JS than a custom buffer geometry? Or would the performance be similar?

@Ian_Whitestone I would just do it in blender or something and import it in. It wouldn’t be that expensive.

1 Like

There are two geometries of the same structure, but different positions of vertices.
4 points are for the contour, 1 point is the pinnacle.
Indices are hardcoded, as there are not so many vertices.

2 Likes