Is there a way to vary the length of vertices in three.js meshes using randomization?

Question

Is there a way to vary the length of vertices in three.js meshes using randomization?

Recently, I came across a mesmerizing mesh randomization effect in three.js that I really admired. I wanted to replicate it in my own codepen, so I took inspiration from the original source and made some adjustments (refer to line 56 of my codepen). However, despite my efforts, the desired distorted edges didn't come through, and instead, the code broke.

Specifically, this part seems to be causing the issue:

var noise = randomRange(1,5);
for(var i=0; i<Ico.vertices.length; i++){
      var v = Ico.vertices[i];
      v.x += -noise/2 + Math.random()*noise;
     v.y += -noise/2 + Math.random()*noise;
     v.z += -noise/2 + Math.random()*noise;
   };

I'm at a loss here. Have I overlooked something crucial? Any assistance or pointers would be highly valued.

javascript three.js

Answer 1

Answer №1

Here is a recommended approach to solving your issue:

function generateRandomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

// Geometry

var shape = new THREE.IcosahedronGeometry(25, 3);

var noiseLevel = generateRandomRange(1, 5);
for(var j = 0; j < shape.vertices.length; j++){
  var vertex = shape.vertices[j];
  vertex.x += -noiseLevel/2 + Math.random() * noiseLevel;
  vertex.y += -noiseLevel/2 + Math.random() * noiseLevel;
  vertex.z += -noiseLevel/2 + Math.random() * noiseLevel;
};

// Meshes

var polyhedron = new THREE.Mesh(shape, cyanMaterial);
polyhedron.rotation.z = 0.5;

Answer 2

Here is a recommended approach to solving your issue:

function generateRandomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

// Geometry

var shape = new THREE.IcosahedronGeometry(25, 3);

var noiseLevel = generateRandomRange(1, 5);
for(var j = 0; j < shape.vertices.length; j++){
  var vertex = shape.vertices[j];
  vertex.x += -noiseLevel/2 + Math.random() * noiseLevel;
  vertex.y += -noiseLevel/2 + Math.random() * noiseLevel;
  vertex.z += -noiseLevel/2 + Math.random() * noiseLevel;
};

// Meshes

var polyhedron = new THREE.Mesh(shape, cyanMaterial);
polyhedron.rotation.z = 0.5;

Answer 3

Answer №2

Instead of

var Ico = new THREE.Mesh(
new THREE.IcosahedronGeometry(25,0), cyanMat);
Ico.rotation.z = 0.5;

replace it with

function randomRange(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

var icoGeom = new THREE.IcosahedronGeometry(25,1);
var noise = randomRange(5,10);
console.log(icoGeom);
icoGeom.vertices.forEach(function(vertex){
  console.log(vertex);
  vertex.x += Math.random()*noise - noise/2;
  vertex.y += Math.random()*noise - noise/2;
  vertex.z += Math.random()*noise - noise/2;
});

also, don't forget to include the randomRange() function in your code.

Answer 4

Instead of

var Ico = new THREE.Mesh(
new THREE.IcosahedronGeometry(25,0), cyanMat);
Ico.rotation.z = 0.5;

replace it with

function randomRange(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}

var icoGeom = new THREE.IcosahedronGeometry(25,1);
var noise = randomRange(5,10);
console.log(icoGeom);
icoGeom.vertices.forEach(function(vertex){
  console.log(vertex);
  vertex.x += Math.random()*noise - noise/2;
  vertex.y += Math.random()*noise - noise/2;
  vertex.z += Math.random()*noise - noise/2;
});

also, don't forget to include the randomRange() function in your code.

Is there a way to vary the length of vertices in three.js meshes using randomization?

Answer №1

Answer №2

Similar questions

fetching indexeddb information using the equivalent of a "WHERE IN (a,b)" query

Ajax handling all tasks except for adding HTML elements

Steps to store radio button selections in local storage

How to utilize JS variables for filtering an array in EJS?

How to access selection range styles using JavaScript

In Vue.js, the 'select' option is consistently set as the default choice

Efficiently handling multiple responses in Express.js per single request

React application failing to recognize environment variables (create-react-app)

A nested DragSource component within a parent DragSource component in React DnD

Asserting within a specific condition's scope in TypeScript

Having Trouble with window.location in Chrome Browser

Updating the state of an object within a mapping function

Infuse the theme into the sx prop of MUI 5

Using 'if' conditions in Reactjs: A step-by-step guide

Exploring different ways to navigate JSON data dynamically and efficiently modify it

methods for controlling data in Datatables

What is the method for determining if a given point falls within a 3-dimensional cube?

Achieving consistent scroll position when utilizing the history.js library to navigate back with the click of a button

When using Lockdown.js with NPM, I encounter a blank file being returned

"Exploring Mocha and Chai: Tips for Generating a Comprehensive List of Errors in Test Cases