通过CDN导入的三js fbxloader不起作用
我正在尝试通过 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无法访问之前导入的三个？
im trying to import ThreeJS and the ThreeJS FBXLoader example via cdn. For this purpose I have created the following imports.
<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>
The import of ThreeJS is successful because I can access THREE afterwards to render a scene without any problems. However, the FBXLoader import fails with the following error message.
<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>Why can't the FBXLoader access the previously imported THREE?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
请记住从“jsm”子路径导入，以确保 Three.js es6 模块和 es6 插件模块（在您的情况下为 FBXLoader）之间的兼容性。
对我来说，在导入路径中添加“三”之后的版本解决了问题。
我不知道为什么。
希望有帮助。
Remember to import from 'jsm' subpath to ensure compatibility between three.js es6 module and the es6 plugin module (in your case FBXLoader).
For me adding a version after 'three' in the import path fixed the problem.
I don't know why though.
Hope it helps.