ThreeJS：Water2 示例抛出 "sphere is undefined," 错误

Question

我正在尝试获取基本的 ThreeJS Water2 示例设置，您可以在此处找到：https://threejs.org/examples/?q=water#webgl_water

源代码在这里：https://github.com/mrdoob/three.js/blob/master/examples/webgl_water.html

这个过程看起来如此简单，以至于它不起作用：将平面的几何形状提供给构造函数，提供参数，然后将该对象添加到场景中。您可以在上面示例源代码的第 86 行看到一个示例。

这是我在 Aframe 组件中进行的尝试：

init() {
    let mesh;
    let waterObj;

    this.el.object3D.traverse(obj => {
      if (obj.type == "Mesh") {
        mesh = obj;
      }
    });

    waterObj = new Water(mesh, {
      scale: 4,
      flowDirection: new THREE.Vector2(1, 1),
      textureWidth: 1024,
      textureHeight: 1024
    });

    this.el.object3D.attach(waterObj);
  }
});

但是好像不行。如果我使用 object3D.attach() 它会产生一个错误，说 sphere is undefined （不知道“球体”是什么），如果我使用 object3D = waterObj 那么平面的颜色会稍微改变，但没有否则。

有没有人有获得此设置的经验？

Answer 1

只要您在构造函数中提供几何体而不是网格，它就应该可以工作：

waterObj = new Water(mesh.geometry, {
  scale: 4,
  flowDirection: new THREE.Vector2(1, 1),
  textureWidth: 1024,
  textureHeight: 1024
});

另请记住，附加不会将父变换应用于 waterObj，因此平面可能出现在 (0,0,0)。

除此之外 - 它应该工作 - 检查 this a-frame + THREE.Water example

ThreeJS：Water2 示例抛出 "sphere is undefined," 错误

ThreeJS: Water2 example throwing "sphere is undefined," error

javascript

three.js

aframe