Recently, I dove into the world of three.js and started playing around with it. I've been pondering whether there's a way to add some randomness to the size of the faces in a mesh created from their existing geometries.
While three.js is fantastic for low-poly work, the symmetry of the meshes it generates can sometimes detract from the desired effect. I'm on a quest to figure out how to give each face a unique size, maybe even throw in some jitter or rotation to create a more "handcrafted" appearance, if you will.
I had the inkling that math.random could be the key, but as a newcomer to JavaScript, I find myself unsure how to implement it.
Displayed below is the code snippet for the object I wish to imbue with a more organic look:
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);
}
Although the code works offline, I'm having trouble running it in the browser. If you'd like to take a peek, here's the link to the fiddle containing the complete code: https://jsfiddle.net/redheadedmandy/f8fy4Lg8/1/
If any of you have any insights on how I could disrupt the uniformity of a three.js mesh, please do share your thoughts. All suggestions are greatly appreciated!