如何将框架平面导出到 glb 对象

Question

我知道 three.js 可以将对象导出到 glb。

我想做的是将 aframe 平面导出到 glb 文件。

我认为 aframe 包括 three.js 所以我尝试了这样的事情：

<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>

我无法从三个 JS 中获取 GLTF 导出器。我尝试了新的 GLTFExporter(); 只有 GLTFExporter() 和 THREE.GLTFExporter() 没有 new 关键字。（检查是否已有可用实例）

none这些作品？那么如何将这架飞机导出为GLB文件呢？

亲切的问候

Answer 1

I thought aframe included three.js

a-frame 使用 three.js - super-three 的分支。它有点落后（为了保持稳定），并且有一些细微差别（实用功能，一些加载器）。

另一件值得一提的事情 - three.js 构建仅限于一些核心功能 - 如果您需要，其余的应该包括在内。

所以 - 如果您浏览三个 js 示例并看到一个 exporting gltf, you should check the source. A line like this:

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

表示，GLTFExporter是从别处导入的。 jsm 有模块，js 有 js 对象。

因此，在您的情况下，一个简单的脚本导入：

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

创建导出器并使用它应该足够了：

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

您可以查看与 a-frame here 一起使用的简单示例。

如何将框架平面导出到 glb 对象

how to export aframe plane to glb object

aframe