# How to make a twisted cube

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!

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,
]);

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);

``````

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

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

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

3 Likes

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

2 Likes

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

1 Like

Here is another solution.

Uses BufferGeometry and Quaternion

Twisted Cube

3 Likes