我正在尝试在我的JavaScript文件中导入3D模型，这是'test.html'代码：
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<script type="module" src="./three.js-master/examples/jsm/loaders/GLTFLoader.js"></script>
<script src="./three.js-master/build/three.js"></script>
<script src="./test.js"></script>
</body>
</html>
这是'test.js'代码：
var camera, scene, renderer;
window.onload = function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, 1.8, 0.1, 20.0 ); // fovy, aspect, near, far
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(1280, 720); //Size of the camera
document.body.appendChild(renderer.domElement);
var loader = new THREE.GLTFLoader();
loader.load( 'duck/source/mindbreaker.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
camera.position.x = 0.0;
camera.position.y = 0.0;
camera.position.z = 10.0;
render();
}
function render(){
requestAnimationFrame(render);
renderer.render(scene, camera);
}
我在FIREFOX上运行它，并尝试更改所有可能的路径。我还创建了一个本地主机来读取文件，但是出现相同的错误。
这是因为您正在加载ES6版本的GLTFLoader，但使用的是预先构建的（ES5）three.js。从examples/js/loaders文件夹中加载GLTFLoader的ES5版本（并在three.js之后加载）。例如。
<script src="./three.js-master/build/three.js"></script>
<script src="./three.js-master/examples/js/loaders/GLTFLoader.js"></script>
<script src="./test.js"></script>