Wil*_*eMe 2 javascript three.js
我有 .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);
});
| 归档时间： |
|
| 查看次数： |
13237 次 |
| 最近记录： |