2

我正在尝试将 OBJ 3D 模型显示为可以使用 Three.js 与 OrbitControls 一起移动的线框。我是three.js的新手，所以如果我遗漏了一些“明显”的东西，我深表歉意。

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

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

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

  1. 我试图将 OBJLoader 插入到多维数据集环境中。（最有希望）
  2. 我尝试将 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 运行它，但也尝试上传到服务器以查看问题是否与本地文件或类似文件有关。

4

1 回答 1

5 
<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

于 2019-07-19T09:08:33.907 回答