OBJLoader 和 OrbitControls 中的 "THREE.OBJLoader is not a constructor" 和 "Unexpected token {"

Question

我正在尝试将 OBJ 3D 模型显示为可以使用 Three.js 使用 OrbitControls 移动的线框。我是 three.js 的新手，所以如果我遗漏了什么，我深表歉意 "obvious"。

我已经能够使用 OrbitControls 将立方体显示为线框。在不同的设置中，我能够将 OBJ 3D 模型显示为线框。因此，该问题与3D模型无关。

当我尝试将这两种方法混合在一起时会出现此问题。

我尝试通过两种方式解决这个问题：

我试图将 OBJLoader 插入多维数据集环境。（最有希望）
我尝试将 OrbitControls 添加到工作中但不可移动的线框 OBJ 环境中。（根本没有用）

大多数其他答案都集中在脚本的顺序上：是的，我已经尝试移动 three.min.js、OrbitControls.js、OBJLoader.js 和我的主要工作 [=17] =] 以各种可能的方式进入有序和无序。

这是我的代码：

<head>
    <style media="screen"> html, body { margin: 0; } #model_container { background-color: #333333; margin: 50px; } </style>
    <title>OBJ Wireframe</title>
    <script defer src="script/three/build/three.min.js"></script>
    <script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
    <script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
    <script defer src="script/model.js"></script>
</head>
<body>
    <div id="model_container"></div>
</body>

const globalWidth = window.innerWidth - 100;
const globalHeight = window.innerHeight - 100;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, globalWidth / globalHeight, 0.1, 1000);
camera.position.x = 300;
camera.position.y = -6;
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer({
   antialias: true,
   alpha: true
});
renderer.setClearColor( 0xffffff, 0);
renderer.setSize(globalWidth, globalHeight);

const canvas = document.getElementById("model_container");
canvas.appendChild( renderer.domElement );

const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);

const loader = new THREE.OBJLoader();
loader.load("assets/castle.obj", function(object) {
   const geometry = object.children[0].geometry;
   THREE.GeometryUtils.center(geometry);
   const material = new THREE.MeshLambertMaterial({});
   const mesh = new THREE.Mesh(geometry, material);
   mesh.material.wireframe = true;
   scene.add(mesh);
})

const controls = new THREE.OrbitControls(camera);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed   = 0.1;
controls.target.set(0, 0, 0);

var animate = function () {
   requestAnimationFrame(animate);
   controls.update();
   renderer.render(scene, camera);
};
animate();

以下是我经过 3 天的搜索和尽我所能无法修复的错误：

OrbitControls.js:9: Uncaught SyntaxError: Unexpected token {
OBJLoader.js:5: Uncaught SyntaxError: Unexpected token {
Uncaught TypeError: THREE.OBJLoader is not a constructor at model.js:23

错误似乎源于 THREE.js 文件本身，我觉得这很奇怪。我已经没有想法和文档了。

我运行使用 MAMP，但也尝试上传到服务器以查看问题是否与本地文件或类似问题有关。

Answer 1

<script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>

您似乎是从错误的路径加载文件。 jsm 目录中的文件是通过 ES6 导入语法导入的 ES6 模块。尝试包含 js 目录中的文件：

<script defer src="script/three/examples/js/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/js/loaders/OBJLoader.js"></script>

three.js R106

OBJLoader 和 OrbitControls 中的 "THREE.OBJLoader is not a constructor" 和 "Unexpected token {"

"THREE.OBJLoader is not a constructor" and "Unexpected token {" in OBJLoader and OrbitControls

javascript

three.js

objloader