"THREE.OBJLoader不是构造函数“和”意外令牌{“在OBJLoader和OrbitControls中
"THREE.OBJLoader不是构造函数“和”意外令牌{“在OBJLoader和OrbitControls中
提问于 2019-07-19 05:46:08
我正在尝试将OBJ3D模型显示为一个可以使用OrbitControls使用Three.js移动的线框。我是three.js的新手，所以如果我错过了一些“明显”的东西，我很抱歉。
我已经能够得到一个立方体显示为一个线框与OrbitControls。在不同的设置中，我能够将OBJ 3D模型显示为一个线框。因此，这个问题与三维模型无关。
当我试图将这两种方法混合在一起时，问题就会发生。
我试着从两方面着手：
- 我试图将OBJLoader插入到多维数据集环境中。(最有希望)
- 我试图将OrbitControls添加到工作但不可移动的线框OBJ环境中。(一点也不起作用)
大多数其他的答案都集中在脚本的顺序上:是的，我尝试过以每一种可能的方式将three.min.js、OrbitControls.js、OBJLoader.js和我的主要工作model.js移到有序和无序的位置。
这是我的密码：
<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运行这个程序，但我也尝试上传到服务器上，看看这个问题是否与本地文件或其他类似的文件有关。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-19 09:08:33
<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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57106202
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号