如何在 three.js 中随机化网格上面的大小？

Question

我最近开始在 three.js 中进行实验，并且一直想知道是否有一种方法可以随机化从现有几何体之一创建的网格中的面孔大小。

Three.js 非常适合低多边形工作，但生成的网格的对称性在某种程度上破坏了效果——我正在寻找一种方法让每张脸的大小略有不同，也许 jitter/rotation，可以这么说，让它看起来更 "handcrafted"。

我认为 math.random 可能有办法做到这一点，但我是 javascript 新手，不确定如何使用它。

这是我想要赋予不太统一外观的对象的代码：

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

这是一个 fiddle 和其余的代码，但无论出于何种原因，尽管代码在本地工作，但我无法在浏览器中将其获取到运行。不过，如果您想查看它，它就在那里。 https://jsfiddle.net/redheadedmandy/f8fy4Lg8/1/

如果有人对如何粗化 three.js 网格的均匀性有建议，我将不胜感激！

Answer 1

有 jsfiddle example，基于您的。好吧，主要是你的例子，只是稍微修改一下，使用最新版本的Three.js。

作为 "roughing" 的选项，您可以这样做：

  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

实际上，有很多方法可以改变几何体中顶点的坐标。创意由你决定。

如何在 three.js 中随机化网格上面的大小？

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

javascript

3d

mesh

three.js