Maharkus - 1 year ago 71

Javascript Question

I'm trying to randomize a mesh in three.js similar to this codepen I saw earlier today (the planets have kind of distorted/irregular edges). I tried reproducing this effect in a codepen I made (by blatantly copying a little code snippet from the codepen linked before) and changed the parameters to fit to mine (Look at line 56). As you can see the desired effect doesn't appear and breaks the code.

This is the part that won't work:

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

};

Is there anything I didn't take into account here? Any help is greatly appreciated.

Answer Source

This is how you should approach your problem:

```
function randomRange(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
//Geometry
var geometry = new THREE.IcosahedronGeometry(25, 3);
var noise = randomRange(1,5);
for(var i=0; i<geometry.vertices.length; i++){
var v = geometry.vertices[i];
v.x += -noise/2 + Math.random()*noise;
v.y += -noise/2 + Math.random()*noise;
v.z += -noise/2 + Math.random()*noise;
};
//Meshes
var Ico = new THREE.Mesh(geometry, cyanMat);
Ico.rotation.z = 0.5;
```