Как сделать поверхность цилиндра волнистой в three.js?(фото включены) - PullRequest
Новая
       60

Как сделать поверхность цилиндра волнистой в three.js?(фото включены)

0 голосов
/ 02 января 2019

У меня есть геометрия цилиндра, к которой я пытаюсь добавить волнистую поверхность, я хочу, чтобы она выглядела так: What i want it to look like

Но после применения кода ниже, этовыглядит очень искаженно так: enter image description here второй угол моей фигуры second angle of bad shape

Я перебираю все вершины и применяю к ним синус следующим образом: 

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;
}

Кто-нибудь знает, почему происходит моя странная форма?а как нанести волнистую форму на цилиндр?спасибо за любую помощь

1 Ответ

0 голосов
/ 02 января 2019

Вам нужно найти результат функции 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>
...