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

Question

I'm trying to get the basic ThreeJS Water2 example setup that you can find here: https://threejs.org/examples/?q=water#webgl_water

Source code here: https://github.com/mrdoob/three.js/blob/master/examples/webgl_water.html

The process seems so straightforward it hurts that it's not working: Supply the geometry of a plane to the constructor, supply parameters, and then add that object to the scene. You can see an example of this on line 86 of the examples' source above.

Here's my attempt at doing it inside an Aframe component:

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

but it doesn't seem to work. If I use object3D.attach() it produces an error that says sphere is undefined (no idea what "sphere," is), and if I use object3D = waterObj then the color of the plane slightly changes, but nothing else.

Does anyone have experience with getting this setup?

Answer 1

It should be working as long as you provide the geometry in the constructor, not the mesh:

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

Also keep in mind that attach won't apply the parent transform to the waterObj, so the plane might appear at (0,0,0).

Other than that - it should be working - check out this a-frame + THREE.Water example