CODEWITHSUNDEEP
aframe
Psychonaut007
Psychonaut007

Reputation: 197

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/[email protected]/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>

Upvotes: 2

Views: 194

Answers (1)

Diarmid Mackenzie
Diarmid Mackenzie

Reputation: 826

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/[email protected]/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...

Upvotes: 1

Related Questions