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

Question

i have a cylinder geometry that i'm trying to add waved surface to, i want it to look like this:

But after applying the code below, it looks very distorted like this: second angle of my shape

I iterate all the vertices and apply sine to them like this:

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

does anyone know why my weird shape is happening? and how to apply a wavy shape to the cylinder? thanks for any help

It would be very helpful if you could provide the full code of your example. A code snippet would be best. — a--m, Jan 02 '19 at 00:23
Why are you multiplying the `y` aspect of the vertex by some value that varies from [-1,1]? Surely you don't want to move the vertex around by that much. — JayC, Jan 02 '19 at 00:34

prisoner849 · Accepted Answer · 2019-09-06T06:41:14.513

You need to find the result of sin function for a vertex, having Y-coordinate of the vertex:

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>

awesome this helped me a bunch! got it working perfectly now: ) — Tintinabulator Zea, Jan 02 '19 at 02:36
one thing i noticed is if you use X or Z, instead of Y, and use a small period, the pattern goes against the vase like it was imprinted against a wall. That is, two sides have little to no sine effect, but the front and back do. Do you know how to make the X or Z pattern go around evenly from 0,0,0 ? i tried adding sines together but that only adds little waves to the existing waves — Tintinabulator Zea, Jan 02 '19 at 08:06
@TintinabulatorZea Could you create a new question with more detailed explanation (with pictures, if possible)? — prisoner849, Jan 02 '19 at 08:27
yes! here is a new question with more details https://stackoverflow.com/questions/54003693/how-to-make-a-wave-pattern-circularly-around-a-cylinder @prisoner849 — Tintinabulator Zea, Jan 02 '19 at 09:11

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

1 Answers1