ThreeJS FBXLoader 通过 cdn 导入不工作

Question

我正在尝试通过 cdn 导入 ThreeJS 和 ThreeJS FBXLoader 示例。为此，我创建了以下导入。

<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three';
import * as FBXLoader from 'https://cdn.skypack.dev/three/examples/js/loaders/FBXLoader';
</script>

ThreeJS 导入成功，因为之后我可以访问THREE渲染场景，没有任何问题。但是，FBXLoader 导入失败并显示以下错误消息。

<html>
<head>
    <style>
        #canvas {
            display: flex;
            width: 100%;
            height: 100vh;
            flex-direction: column;
        }
    </style>
<script type="module">
    import * as THREE from 'https://cdn.skypack.dev/three';
    //ThreeJS working fine when commenting out this import
    import * as FBXLoader from 'https://cdn.skypack.dev/three/examples/js/loaders/FBXLoader';

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xeeeeee);
    const parent = document.getElementById("canvas");
    const camera = new THREE.PerspectiveCamera(75, parent.offsetWidth / parent.offsetHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    const manager = new THREE.LoadingManager();
    //const loader = new FBXLoader(manager);

    renderer.setSize(parent.offsetWidth, parent.offsetHeight);
    parent.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });

    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    };

    animate();
</script>
</head>
<body>
  <div id="canvas"></div>
</body>
<html>

为什么 FBXLoader 无法访问之前导入的三个？

Answer 1

记得从 'jsm' 子路径导入以确保 three.js es6 模块和 es6 插件模块（在你的例子中是 FBXLoader）之间的兼容性。

对我来说，在导入路径的 'three' 之后添加一个版本解决了这个问题。

import { FBXLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/FBXLoader';

虽然我不知道为什么。

希望对您有所帮助。

ThreeJS FBXLoader 通过 cdn 导入不工作

ThreeJS FBXLoader import via cdn not working

html

javascript

cdn

three.js

es6-modules