Tips for creating a wavy surface on a cylinder using three.js (with images)

Question

Tips for creating a wavy surface on a cylinder using three.js (with images)

I've been working on giving my cylinder geometry a wavy surface, aiming for a look like this: https://i.sstatic.net/aCaV7.png

However, after implementing the following code, it ended up looking quite distorted as shown in these images: https://i.sstatic.net/7dxVN.png and here from a different angle: https://i.sstatic.net/jWzXJ.png

The approach I took was iterating through all the vertices and applying the sine function to them like so:

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

I'm puzzled by why my shape turned out weird. Can anyone shed some light on what might have caused this distortion and provide insights into achieving a wavy shape on a cylinder? Your help is greatly appreciated!

javascript three.js geometry vertices

Answer 1

Answer №1

If you want to determine the outcome of a sine function for a vertex with a Y-coordinate, here's one way to do so:

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(); // temporary vector
cylinderGeom.vertices.forEach(v => {
  vec3.copy(v); // copy the current vertex to the temporary vector
  vec3.setY(0); // keep x and z values (making the vector parallel to the XZ plane)
  vec3.normalize(); // normalize the vector
  vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25); // multiply it by the sin function
  v.add(vec3); // add the temporary vector back 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>

Answer 2

If you want to determine the outcome of a sine function for a vertex with a Y-coordinate, here's one way to do so:

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(); // temporary vector
cylinderGeom.vertices.forEach(v => {
  vec3.copy(v); // copy the current vertex to the temporary vector
  vec3.setY(0); // keep x and z values (making the vector parallel to the XZ plane)
  vec3.normalize(); // normalize the vector
  vec3.multiplyScalar(Math.sin(v.y * Math.PI) * 0.25); // multiply it by the sin function
  v.add(vec3); // add the temporary vector back 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>

Tips for creating a wavy surface on a cylinder using three.js (with images)

Answer №1

Similar questions

Instructions for separating a string into smaller parts, further splitting one of the resulting parts along with another associated value, and then combining the leftover segments with the remaining parts

Detecting the existence of a scrollbar within the document object model using JavaScript - a guide

JavaScript Equivalent to C#'s BinaryReader.ReadString() Function

Promise rejection not handled: Trying to modify headers after they have already been sent to the client

Organize data in a table using a dropdown selection menu

establish the data type for the key values when using Object.entries in TypeScript

React's memo and/or useCallback functions are not functioning as anticipated

Is there a way to represent this specific #define in webgl?

The attribute 'subtle' is not found within the definition of 'webcrypto' type

Manipulate the value of an HTML element's style parameter with jQuery

What is the most efficient way to generate a pug file with a hashed resource name using Webpack 2.0?

Struggling to make AngularJS routes function properly

Retrieve an item from an array using AJAX

Refreshing image does not reload

Switching to '@mui/material' results in the components failing to render

How do I resolve the jQuery error "unable to find function url.indexOf" when working with Vide?

Enhancing x-axis presentation in D3.js-generated charts

The error encountered is due to an invalid assignment on the left-hand side

The issue of linking .then() functions

Gridsome server-side rendering encounters issues with Auth0 authentication when the window object is not defined