How to twist geometry around the Y axis?

Questions
, ,
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 :

step-two
step-two523×704 41.7 KB

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();
2 
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…

1 Like
3

here is one of my old examples
three r168

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

5

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

2 Likes
6

Instanced twisted boxes, as something related.

изображение
изображение943×860 87.7 KB

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

4 Likes