如何围绕圆柱体制作波浪图案？

Question

您好，我正在尝试在圆柱体表面制作波浪图案。波浪应该随着表面的旋转而旋转。在某种程度上，正弦周期在圆周运动，振幅是表面上的长丘。这里有一些图片可以更好地解释我的意思。

这就是我试图让圆柱体的俯视图看起来类似于：

这是我的圆柱体的俯视图。我希望波浪随着圆圈的旋转而改变方向，所以它从各个方向看起来都一样。

我觉得我很接近，我只是不确定与矢量相乘的四元数或角度：

    var geometry = this.threeDHandler.threeD_meshes[0].geometry;
    var vec3 = new THREE.Vector3(); // temp vector

    for (let i = 0; i < geometry.vertices.length; i++) {
      vec3.copy(geometry.vertices[i]); // copy current vertex to the temp vector
      vec3.setX(0); 
      vec3.normalize(); // normalize


      //part i'm confsude about
      const quaternion = new THREE.Quaternion();
      const xPos = geometry.vertices[i].x;

      //trying to twist the sine around the circle
      const twistAmount = 100;
      const upVec = new THREE.Vector3(0, 0, 1);
      quaternion.setFromAxisAngle(
          upVec, 
          (Math.PI / 180) * (xPos / twistAmount)
        );


      vec3.multiplyScalar(Math.sin((geometry.vertices[i].x* Math.PI) * period) * amplitude) // multiply with sin function
      geometry.vertices[i].add(vec3); // add the temp vector to the current vertex

      geometry.vertices[i].applyQuaternion(quaternion);

    }
    geometry.verticesNeedUpdate = true;
    geometry.computeVertexNormals();

Answer 1

您可以使用顶点所属角度的 sin 函数的绝对值。

在这种情况下，您可以使用 THREE.Spherical() 允许获取矢量球坐标的对象：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var cylinderGeom = new THREE.CylinderGeometry(1, 1, 4, 128, 40, true);

var vec3 = new THREE.Vector3(); // temp vector
var vec3_2 = new THREE.Vector3(); // temp vector 2
var spherical = new THREE.Spherical();
cylinderGeom.vertices.forEach(v => {
  vec3.copy(v); // copy current vertex to the temp vector
  vec3.setY(0); // leave x and z (thus the vector is parallel to XZ plane)
  vec3.normalize(); // normalize
  vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25) // multiply with sin function

  // radial wave
  vec3_2.copy(v).setY(0).normalize();
  spherical.setFromVector3(vec3_2);
  vec3_2.setLength(Math.abs(Math.sin((spherical.theta * 4) + v.y * 2) * 0.25));

  v.add(vec3).add(vec3_2); // add the temp vectors to the current vertex
})


cylinderGeom.computeVertexNormals();

var cylinder = new THREE.Mesh(cylinderGeom, new THREE.MeshNormalMaterial({
  side: THREE.DoubleSide,
  wireframe: false
}));
scene.add(cylinder);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/controls/OrbitControls.js"></script>

如何围绕圆柱体制作波浪图案？

How to make a wave pattern circularly around a cylinder?

trigonometry

three.js