I am building a basic Web VR application using AFrame, https://aframe.io/. I am trying to to a frame particle components following this example, https://aframe.io/docs/1.3.0/introduction/entity-component-system.html#example. Basically, I copied the code as mentioned on the official documentation.
This is my code:
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
<a-entity id="sphere" geometry="primitive: sphere"
material="color: #EFEFEF; shader: flat"
position="0 0.15 -5"
light="type: point; intensity: 5"
animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>
<a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
rotation="-90 0 0"></a-entity>
<a-entity id="sky" geometry="primitive: sphere; radius: 5000"
material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
scale="-1 1 1"></a-entity>
<a-entity id="light" light="type: ambient; color: #888"></a-entity>
</a-scene>
</body>
</html>
When I run my application in the Chrome web browser, I am getting the following error in the console and I cannot see the particles.
What is wrong with my code and how can I fix it?
The issue is with
aframe-extras.ocean. It is based on an older version of aframe (and three.js) and uses amergeVerticesfunction that has changed in newer versions. That error breaks the rest of the application.You can either downgrade your aframe version to 0.9.0, or fork and update
aframe-extras.ocean. I would usually suggest you report this to the maintainers of aframe-extras, but they may not be active enough to fix it in a timely manner.