Question

我正在尝试将我在今天早些时候看到的类似于this codepen的three.js中的网格随机化（行星有一些扭曲/不规则的边缘）。我尝试在我制作的codepen中复制此效果（通过公开复制之前链接的codepen中的一小段代码片段）并更改参数以适合我的（参见第56行）。如您所见，不会出现所需的效果并破坏代码。

这是不起作用的部分：

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

这里有什么我没有考虑过的吗？非常感谢任何帮助。

Answer 1

这就是你应该如何解决问题：

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;

Answer 2

而不是

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

把

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

是的，你忘了复制/粘贴randomRange（）函数。

如何随机化three.js网格中的顶点长度？

2 个答案: