Question

我试图将OBJ 3D模型显示为线框，可以使用Three.js与OrbitControls一起移动它。我是three.js的新手，所以如果我缺少“显而易见的”内容，我深表歉意。

我已经能够使用OrbitControls将一个立方体显示为线框。在不同的设置中，我能够将OBJ 3D模型显示为线框。因此，该问题与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运行此程序，但还尝试将其上传到服务器，以查看问题是否与本地文件或类似内容有关。

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不是构造函数”和“意外令牌{”

1 个答案: