Create custom Fish Geometry

[CHOIX]

I want to create a fish model dynamically. What I tried was to create a bunch of cylinders and change the top and bottom radius so that I get the shape of a fish:

    let end= 0.1;
    let start = 0.1;
    let colors = [0xff0000,0xffff00,0x00ff00,0x00f0ff,0x0000ff,0x00ffff,0xf000ff, 0x1200ff,0x0200f0,0x00ff01,0x0fff0f,0xffff00,0x00ff00,0x00f0ff,0x0000ff,0x00ffff,0xf000ff, 0x1200ff,0xffff00,0x00ff00,0x00f0ff,0x0000ff,0x00ffff,0xf000ff, 0x1200ff];
    let fishG = new THREE.Group();

    for(let i=1; i<15; i++){
        start = end;
        console.log("sin",start);
        end = Math.sin(i/4);
        console.log(i)
        geometry = new THREE.CylinderGeometry( start, end, 0.2, 32 );
        material = new THREE.MeshBasicMaterial( {color: colors[i]} );
        mesh = new THREE.Mesh( geometry, material );
        mesh.position.y = 0.2*-i;
        mesh.name = "cyc"+start+"_"+end;
        fishG.add(mesh);
    }

It looks nice, but it is not really the type of fish I want.

The belly of the fish should be flat, what makes the form of the fish not symmetrical anymore, something like this:

my dream goal

But since I know sweep nurbs does not exist in Three.js I don’t know what is the best approach to achieve my goal - I want to have full control over the shape of the fish. What I can imagine is maybe creating one fillet (one of those cones with flat bottom) in another program and arrange them like I did + add skinnedMesh on top of it to adjust the ‘thickness’ during the axis.

I saw Klaus Hoffmeisters work sandbox and think it is possible to create something like that just by code, but I have yet no idea where to start (to learn).

[prisoner849]

@CHOIX

If you can create a set of such paths/curves, then you can get the same amount of points on each path/curve and thus you’ll be able to create faces.

[CHOIX]

How exactly does this “face creating” between lose paths work? Do you have a link to the documentation? I will read it and try it.

Path creating is same like svg splines I think (bezier curves…)… that should not be a big problem (probably I’ll open a new thread for that if I don’t get it )

[prisoner849]

Think of your fish as of a distorted cylinder. And a cylinder, generally, is a distorted plane.
How they build faces for PlaneGeometry, you can see in the source code: three.js/PlaneGeometry.js at 350f0a021943d6fa1d039a7c14c303653daa463f · mrdoob/three.js · GitHub

To build a quad of four vertices, you need to define two triangles:

[0]---[1]
 |   / |
 | /   |
[2]---[3]

First triangle: 0, 2, 1
Second triangle: 2, 3, 1

[prisoner849]

Here is an example of how you can distort/deform a plane geometry, having a curve for profile:

Link: https://codepen.io/prisoner849/pen/PobWvZY?editors=0010

Picture:

[hofk]

My examples work with self-created BufferGeometry. I pulled out a sketch.

---

an arrangement
examples THREEf

---

Here as a plane, which can then be deformed as desired.
ColorWave

This is also how it works in the sandbox.

You can control every single vertex. In THREEf and THREEg I take functions for different properties. But you can also work point by point.

[CHOIX]

I must say: I feel ashamed. I don’t understand this. I don’t get it at all. anyways thank you so much to you both for your replies.

[hofk]

You have nothing to be ashamed of. It takes some preliminary work to get these results. Surely you need some more practice. I also make the Collection of examples from discourse.threejs.org for myself, because I have not yet mastered many things and find solutions there.

This is also helpful. 📕 three.js Bookshelf

[CHOIX]

Thank you Klaus! I really want to understand it, but I could not find any resources, which is about custom geometry for beginners. Can you recommend a book which has some chapters exactly for that? Because how to do the “normal” things (primitives, light, animation, model import…) is simple, but creating geometry by vertices and mathematical functions is not that easy. I appreciate any suggestions.

[hofk]

related
Texture from distorted image, what is the best way to do it?