Question

我有.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>

Answer 1

我通过以下方式工作：（下面更简单的修正，更新）

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);
});

Answer 2

将THREE.MeshBasicMaterial({color:'red'})应用于所有已加载的网格，以消除诸如缺少法线，缺少光线，缺少纹理等内容（此材料不需要这些就可以工作）。
查看model.children[N].geometry.vertices，了解您是否拥有有效值

Answer 3

问题是您在加载对象之前渲染场景。

放置你的render.render（场景，相机）调用，只有在模型加载后才会调用它。 E.g。

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);
    });
}

我还要确保您的所有来源都存在于head部分（或HTML的尾部，如果这是您的偏好）。然后，只需在窗口的load事件上调用初始化代码即可。并且，如上所述，只有在加载了所有资产后才首次渲染场景。

您可能还需要打电话来查看您的场景，例如......

camera.lookAt(scene.position);

哦，还有，child.material.color是一个对象，例如child.material.color = { r:1, g:1, b:1 }。

Three.JS OBJ模型没有显示

3 个答案: