Estoy tratando de obtener la configuración de ejemplo básica de ThreeJS Water2 que puede encontrar aquí: https://threejs.org/examples/?q=water#webgl_water

Código fuente aquí: https://github.com/mrdoob/three.js/blob/master/examples/webgl_water.html

El proceso parece tan sencillo que duele que no funcione: proporcione la geometría de un plano al constructor, proporcione los parámetros y luego agregue ese objeto a la escena. Puede ver un ejemplo de esto en la línea 86 de la fuente de ejemplos anterior.

Aquí está mi intento de hacerlo dentro de un componente 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); } });

pero no parece funcionar. Si uso object3D.attach() , produce un error que dice que la sphere is undefined (no tengo idea de qué es "esfera"), y si uso object3D = waterObj , el color del plano cambia ligeramente, pero nada más.

¿Alguien tiene experiencia con esta configuración?