我有 .obj 模型，比我在 c4d 中制作（找到）的模型并以米为单位的比例 1 导出。我尝试使用 OBJLoader 在 Three.js 中加载它，没有错误，但模型未显示。这是什么问题
<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<body style="margin:0;padding:0;">
</body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);
var render = new THREE.WebGLRenderer();
camera.position.set(0, 0, 53);
render.setSize(innerWidth, innerHeight);
document.body.appendChild(canvas = render.domElement);
render.setClearColor(0x111111, 1);
function loadScene() {
var loader = new THREE.OBJLoader();
loader.load("./fox.obj", function(model) {
model.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = 0xffb830;
}
});
model.position.set(0, 0, -53);
scene.add(model);
window.model = model;
});
render.render(scene, camera);
}
window.onload = loadScene;
</script>
我通过以下方式使其工作：（下面更简单的更正，在更新中）
1 - 删除此行：
render.render(scene, camera);
2 - 在初始化后添加这段代码：
function animate() {
requestAnimationFrame( animate );
render.render( scene, camera );
}
animate();
3 - 还可以为 Three.js 库使用不同的源。我将当前在另一个项目中使用的本地副本包含在内，并且它有效。可能您从过时的来源获取它...尝试直接从下载链接下载文件：https://github.com/mrdoob/ Three.js/archive/master.zip
您还应该尝试将 OrbitControls 添加到场景中，以便您可以在场景中进行轨道/导航，因为该对象可能比您预期的大并且因此不会（显然）显示。 您可以通过包含 Three.js 源中提供的 OrbitControls.js 并将以下行添加到代码中来添加轨道控件：
var controls = new THREE.OrbitControls( camera, render.domElement );
更新：
只需在 load 方法的函数中调用 render 即可，就像 ManoDestra 建议的那样：
loader.load("./fox.obj", function(model) {
model.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = 0xffb830;
}
});
model.position.set(0, 0, -53);
scene.add(model);
window.model = model;
render.render(scene, camera);
});
问题是您在对象加载之前渲染场景。
以仅在模型加载后才调用的方式放置 render.render(scene, camera) 调用。例如
function loadScene() {
var loader = new THREE.OBJLoader();
loader.load("./fox.obj", function(model) {
model.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = 0xffb830;
}
});
model.position.set(0, 0, -53);
scene.add(model);
window.model = model;
render.render(scene, camera);
});
}
我还会确保您的所有源代码都存在于头部（或 HTML 的尾部，如果这是您的偏好）。然后，只需在窗口的加载事件上调用初始化代码即可。并且，如上所述，仅在加载所有资源后才首次渲染场景。
您可能还需要打电话来查看您的场景，例如......
camera.lookAt(scene.position);
哦，还有，child.material.color 是一个对象，例如
child.material.color = { r:1, g:1, b:1 }THREE.MeshBasicMaterial({color:'red'})model.children[N].geometry.vertices