CODEWITHSUNDEEP
javascript3dthree.jsmesh
Amanda Harvey
Amanda Harvey

Reputation: 549

How to randomize the size of faces on a mesh in three.js?

I recently started experimenting in three.js, and have been wondering if there is a way to randomize the size of the faces in a mesh created from one of their existing geometries.

Three.js is excellent for low-poly work, but the symmetry of the generated meshes ruin the effects somewhat-- I'm looking to find a way to give each face a slightly different size and perhaps jitter/rotation as well, to give it a more "handcrafted" look, so to speak.

I thought there might be a way to do it with math.random, but I'm a javascript newbie and am not sure how to go about using it.

This is the code for the object I want to give a less uniform appearance:

function createObject() {
    var geometry = new THREE.SphereGeometry(70, 31, 17);
    var material = new THREE.MeshPhongMaterial({
        color:Colors.blue, 
        shading:THREE.FlatShading
    });
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(45,100,0);
    sphere.castShadow = true;
    sphere.receiveShadow = true;
    scene.add(sphere);
}

Here's a fiddle with the rest of the code, but for whatever reason, although the code works locally, I can't get it to run in the browser. Still, it's there if you want to look at it. https://jsfiddle.net/redheadedmandy/f8fy4Lg8/1/

If anyone has a suggestion for how one might go about roughing up the uniformity of a three.js mesh, I would much appreciate it!

Upvotes: 1

Views: 441

Answers (1)

prisoner849
prisoner849

Reputation: 17596

There's the jsfiddle example, based on yours. Well, mostly it's your example, just slightly modified, uses the latest version of Three.js.

As an option for "roughing", you can do it like that:

  var geometry = new THREE.SphereGeometry(70, 31, 17);

  geometry.vertices.forEach(v => {
    v.x += THREE.Math.randFloatSpread(2);
    v.y += THREE.Math.randFloatSpread(2);
    v.z += THREE.Math.randFloatSpread(2);
  });

  geometry.computeFaceNormals(); // don't forget to do it, when you change vertices

Actually, there are many ways of how to change coordinates of vertices in a geometry. Creativity is up to you.

Upvotes: 1

Related Questions