如何在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

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

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://threejs.org./build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

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

How to make the surface of cylinder wavy in three.js? (pics included)

javascript

geometry

vertices

three.js

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

How to make the surface of cylinder wavy in three.js? (pics included)

javascript

geometry

vertices

three.js

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