I've been experimenting with setting up the basic ThreeJS Water2 example that can be found here:
You can access the source code here: https://github.com/mrdoob/three.js/blob/master/examples/webgl_water.html
The process appears simple at first glance - provide a plane's geometry to the constructor, provide parameters, and then add the object to the scene. A specific example of this can be seen on line 86 of the examples' source code referenced above.
Here's my attempt at implementing this within 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);
}
});
However, I'm facing issues with this implementation. If I use object3D.attach(), it triggers an error stating sphere is undefined (unclear what "sphere" refers to), and if I use object3D = waterObj, only the color of the plane changes slightly, with no other visible effects.
Has anyone successfully set up this configuration before?