How to make a twisted cube

Questions
1

Hello, three.js developers!
I am trying to make a twisted cube in the latest three.js version.
As you know, we can’t use geometry.vertices.length in the latest version.
If so, how can I make this 3D object?
Help me!
Thank you in advance.

2

I asked ChatGPT. Here’s is response. I have not checked if its correct

// create a buffer geometry
const geometry = new THREE.BufferGeometry();

// define vertices
const vertices = new Float32Array([
    // front face
    -1, -1,  1,
     1, -1,  1,
     1,  1,  1,
    -1,  1,  1,
    // back face
    -1, -1, -1,
    -1,  1, -1,
     1,  1, -1,
     1, -1, -1,
]);

// define indices
const indices = new Uint16Array([
    0, 1, 2, 0, 2, 3, // front face
    4, 5, 6, 4, 6, 7, // back face
    3, 2, 6, 3, 6, 5, // top face
    0, 4, 7, 0, 7, 1, // bottom face
    1, 7, 6, 1, 6, 2, // right face
    0, 3, 5, 0, 5, 4, // left face
]);

// define normals
const normals = new Float32Array([
    // front face
    0, 0, 1,
    0, 0, 1,
    0, 0, 1,
    0, 0, 1,
    // back face
    0, 0, -1,
    0, 0, -1,
    0, 0, -1,
    0, 0, -1,
]);

// add attributes to geometry
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));

// create a mesh and add to scene
const material = new THREE.MeshPhongMaterial({color: 0x00ff00});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

This code creates a twisted cube using buffer geometry by defining the vertices, indices, and normals of the cube. The positions of the vertices are stored in a Float32Array, the indices of the vertices that form each face are stored in a Uint16Array, and the normals of each vertex are stored in a Float32Array. These arrays are used to create buffer attributes for the geometry using the setAttribute method. The setIndex method is used to set the indices for the faces. Finally, a mesh is created using the buffer geometry and a material, and added to the scene.

1 Like
3

Another idea. It might be possible to make a small change to TubeGeometry. It supports a tube made of only 4 segments. It might be possible to introduce rotation/twist into a new segment as it is added.

1 Like
4

Come on everybody clap your hands
Ah, you’re looking good
I’m gonna sing my song and you won’t take long
We’re gonna do the twist and it goes like this

Come on let’s twist again like we did last summer
Yeah, let’s twist again like we did last year
Do you remember when things were really hummin’?
Yeah, let’s twist again, twistin’ time is here

It can be also done with a skinned mesh over a skeleton, but let’s do it manually:

https://codepen.io/boytchev/full/xxaOaRe

image

3 Likes
5

It would be interesting to have a version of Curve and CurvePath that adds support for scale and rotation at each point.

2 Likes
6

In Suica you can create a tube along a spline, and also have its radius be defined by a spline.

image

image

image

1 Like
7

Here is another solution.

Uses BufferGeometry and Quaternion

Twisted Cube

image

3 Likes