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?
Debería funcionar siempre que proporcione la geometría en el constructor, no la malla:
waterObj = new Water(mesh.geometry, { scale: 4, flowDirection: new THREE.Vector2(1, 1), textureWidth: 1024, textureHeight: 1024 }); También tenga en cuenta que adjuntar no aplicará la transformación principal a waterObj , por lo que el plano podría aparecer en (0,0,0) .
Aparte de eso, debería estar funcionando, mira este ejemplo de a-frame + THREE.Water