如何在three.js中使圆柱体的表面呈波浪形？ （包括图片）

Question

我有一个圆柱几何，正在尝试向其添加波浪形表面，我希望它看起来像这样：

但是在应用下面的代码后，它看起来像这样非常失真： 我的形状的第二个角度

我迭代所有顶点并像这样对它们应用正弦：

STC.WarpControls.prototype.waves = function(){
    var geometry = this.threeDHandler.threeD_meshes[0].geometry;
    for (let i = 0; i < geometry.vertices.length; i++) {
        geometry.vertices[i].y = Math.sin(( i + 0.00002)) *
        (geometry.vertices[i].y);
    }
    geometry.verticesNeedUpdate = true;
}

有人知道为什么我的形状怪异吗？以及如何对圆柱体应用波浪形？谢谢你的帮助

Answer 1

您需要找到一个具有顶点Y坐标的顶点的sin函数的结果：

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, 16, 20, true);

var vec3 = new THREE.Vector3(); // temp vector
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
  v.add(vec3); // add the temp vector to the current vertex
})
cylinderGeom.computeVertexNormals();

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

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>