PobbyVo
September 9, 2024, 9:51am
1
Hi everyone!

As the title suggests, I am trying to apply a twist to geometry around its Y-axis.
Take the following picture as an example :

example.zip (2.4 MB)

Help me!
below is my code

```
const twistGeometry = (geometry: THREE.BufferGeometry, factor: number) => {
const q = new THREE.Quaternion();
const up = new THREE.Vector3(0, 1, 0);
const position = geometry.attributes.position.array as Float32Array;
for (let i = 0; i < position.length; i += 3) {
q.setFromAxisAngle(up, position[i + 1] * factor);
const vec = new THREE.Vector3(
position[i],
position[i + 1],
position[i + 2]
);
vec.applyQuaternion(q);
position[i] = vec.x;
position[i + 2] = vec.z;
}
geometry.computeVertexNormals();
geometry.attributes.position.needsUpdate = true;
};
let geometry = new THREE.BoxGeometry(1, 1, 1, 3, 3, 3);
twistGeometry(geometry, 0);
twistedCube = new THREE.Mesh(
geometry,
new THREE.MeshNormalMaterial({
wireframe: true,
})
);
let data = { t: 0 };
const gui = new GUI();
gui.add(data, "t", -Math.PI, Math.PI, 0.01).onChange((t) => {
updateTwistBottom(t);
});
gui.open();
```

```
function twist(geometry) {
const quaternion = new THREE.Quaternion();
for (let i = 0; i < geometry.vertices.length; i++) {
// a single vertex Y position
const yPos = geometry.vertices[i].y;
const twistAmount = 10;
const upVec = new THREE.Vector3(0, 1, 0);
quaternion.setFromAxisAngle(
upVec,
(Math.PI / 180) * (yPos / twistAmount)
);
geometry.vertices[i].applyQuaternion(quaternion);
}
// tells Three.js to re-render this mesh
geometry.verticesNeedUpdate = true;
}
```

Taken from here… Geometry Manipulation in Three.js — Twisting | by Shay Keinan | Medium

Or another thread with options for the same procedure in different ways here…

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]
1 Like

here is one of my old examples
three r168

1 Like

PobbyVo
September 9, 2024, 10:27am
4
Thank you very much.

I really appreciate it.
I have reviewed the document you sent me. I’m trying to adjust the `t`

value so that when it’s increased, the geometry’s quaternion gradually returns to its original shape before twisting, similar to the video above. Can you help fix and optimize the code to achieve this effect?

That looks like a lot of time and skills required to do that.
Here is something to get you started.

2 Likes

Instanced twisted boxes, as something related.

Demo:

https://codepen.io/prisoner849/full/zYeaaWr

4 Likes