Céc*_*leu 2 javascript three.js objloader
我正在尝试将 OBJ 3D 模型显示为可以使用 Three.js 通过 OrbitControls 移动的线框。我是three.js的新手，所以如果我遗漏了一些“明显”的东西，我深表歉意。
我已经能够使用 OrbitControls 将立方体显示为线框。在不同的设置中，我能够将 OBJ 3D 模型显示为线框。因此，该问题与 3D 模型无关。
当我尝试将两种方法混合在一起时，就会出现问题。
我试图通过两种方式解决这个问题：
大多数其他的答案集中脚本的顺序：是的，我曾尝试向移动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 运行它，但也尝试上传到服务器以查看问题是否与本地文件或任何类似内容有关。
<script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
It seems you are loading the files from the wrong path. Files from the jsm directory are ES6 modules which are imported via ES6 import syntax. Try to include the files from the js directory:
<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
| 归档时间： |
|
| 查看次数： |
687 次 |
| 最近记录： |