how to export aframe plane to glb object

I know that three.js can export an object to glb.

What I'm trying to do is to export a aframe plane to a glb file.

I thought aframe included three.js so I tried something like this:

<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <title>Demo</title>
  </head>
  <body>
    <a-scene
          embedded
          vr-mode-ui="enabled: false;"
          background="color: #24CAFF;"
          renderer="colorManagement: true;"
          inspector=""
          keyboard-shortcuts=""
          screenshot=""
          device-orientation-permission-ui=""
        >
          <a-plane
            id="plane"
            position="0 0 0"
            rotation="0 0 0"
            width="10"
            height="10"
            material="src: texturefile.jpg; repeat: 16 16">
          ></a-plane>
        </a-scene>
        <script>
          var gltfExporter = new THREE.GLTFExporter();
          gltfExporter.parse(document.querySelector('#plane').getObject3D('mesh').el, function (result) { 
console.log(result);
    };
        </script>
      </body>
    </html>

I can't get the GLTF exporter from three JS. I tried new GLTFExporter(); Just GLTFExporter() and THREE.GLTFExporter() without the new keyword. (to check if there is already an instance available)

none of these work? So how can I export this plane to a GLB file?

kind regards

Solution

I thought aframe included three.js

a-frame uses a fork of three.js - super-three. It's a bit behind (to keep things stable), and it has some minor differences (utility functions, some loaders).

Another thing worth mentioning - the three.js build is limited to a number of core features - the rest is supposed to be included if you need them.

So - if you browse the threejs examples and see the one exporting gltf, you should check the source. A line like this:

import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';

indicates, that the GLTFExporter is imported from elsewhere. jsm has modules, js has js objects.

So, in your case a simple script import:

<script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script>

should be sufficient, to create the exporter and use it:

const exporter = new THREE.GLTFExporter();
exporter.parse(obj, callback, error, options)

You can check out a simple example of using it with a-frame here.