Search code examples
aframe

Why the ocean program in documentation is not working and showing error?

In Official documentation there's a program in which they mentioned reference of Don McCurdy’s aframe-extras to get for Aframe 1.2.0. But when I am running the program using CDN of production link. It never works. And I receive the following error as well.

enter image description here

My code is :

<!

DOCTYPE html>

<html lang="en">
    <head>
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
        <title>Proyectos</title>    
    </head>
<body>
    <a-scene physics>
        <script>
            AFRAME.registerPrimitive('a-ocean', {
            // Attaches the `ocean` component by default.
            // Defaults the ocean to be parallel to the ground.
            defaultComponents: {
              ocean: {},
              rotation: {x: -90, y: 0, z: 0}
            },
            // Maps HTML attributes to the `ocean` component's properties.
            mappings: {
              width: 'ocean.width',
              depth: 'ocean.depth',
              density: 'ocean.density',
              color: 'ocean.color',
              opacity: 'ocean.opacity'
            }
          });
        </script>
        <a-ocean color="aqua" depth="100" width="100"></a-ocean>
      </a-scene>
</body>
</html>
Solution

  • a-ocean is defined in a-frame extras, so there is no need for you to define it again, you should be able to just use it. That explains the first error ("a-ocean is already registered").

    Unfortunately is written using the THREE.js Geometry component, which was deprecated in THREE.js r125.

    That corresponds to A-Frame 1.2.0.

    This explains the second error ("mergeVertices is not a function").

    So (until someone updates a-ocean) you have to use A-Frame 1.1.0 or earlier if you want to use a-ocean.

    This code will give you a basic ocean

    <html lang="en">
    <head>
        <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
        <title>Proyectos</title>    
    </head>
<body>
    <a-scene physics>
        <a-ocean color="aqua" depth="100" width="100"></a-ocean>
      </a-scene>
</body>
</html>

    In terms of getting a-ocean fixed, it looks like there has been some work on this: https://github.com/n5ro/aframe-extras/issues/362

    That issue includes sample code for a fix, but nobody has made it into a PR yet...