javascript - JS - 如何创建我的世界风格的云？

Question

我目前正在为浏览器开发一种积木游戏（比较 Minecraft），并且正在教three.js。

我想在我的世界中添加某种云（如您在图片中所见） - 但我在动态生成它们时遇到了一些问题。

在我看来，一切都最好根据噪音来完成 - 但我究竟要如何使用它来添加这样的云呢？- 与此相比，我生成的云看起来真的很可怕：D

我期待着任何帮助！

---

如何使用噪声函数来生成这些云？

注意：这是我使用的噪音功能：https ://github.com/josephg/noisejs

---

我的three.js代码：

noise.seed(Math.random());
let cloudsGeometry = new THREE.Geometry();
let cloudSize = {
  width: 100,
  height: 40,
  depth: 100
}

for (let x = 0; x < 100; x++) {
  for (let z = 0; z < 100; z++) {
    let value = noise.simplex2(x / 100, z / 100);
    if (Math.abs(value) > 0.2) continue;
    let geometry = new THREE.BoxGeometry(cloudSize.width, cloudSize.height, cloudSize.depth);
    let cube = new THREE.Mesh(geometry);
    cube.position.z = z * cloudSize.depth
    cube.position.x = x * cloudSize.width
    cube.updateMatrix()
    cloudsGeometry.merge(cube.geometry, cube.matrix)
  }
}

scene.add(new THREE.Mesh(cloudsGeometry, new THREE.MeshBasicMaterial({
  color: 0xffffff
})));

这就是我的云在上面的代码中的样子：

标签： javascriptthree.jshtml5-canvasminecraft