三.JS OBJ模型不显示答案

【问题标题】：Three.JS OBJ Model not showing三.JS OBJ模型不显示
【发布时间】：2016-05-18 00:30:08
【问题描述】：

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

【问题讨论】：

不是答案：将 javascript 放在 head 或 body 中。
那根本不重要
您可以尝试使用boundingbox helper threejs.org/docs/#Reference/Extras.Helpers/BoundingBoxHelper 来检查加载模型的位置和大小是否正确。
这段代码没有渲染循环

标签： javascript three.js

【解决方案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 );

更新：

就像 ManoDestra 建议的那样，只需在 load 方法的函数内调用渲染：

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

【讨论】：

有趣的是，我完全错过了没有渲染循环设置的事实。我在定位加载模型的行之后停止阅读。
我认为 mano destra 的回答更正确。您正在通过轨道控制器和渲染循环添加交互性来扩展原始代码。如果要求只渲染一次，则应在加载对象后完成。
轨道控制器只是给用户的调试建议（试图找到可能比预期大或位于不同位置的对象）。关于渲染循环的需要，我也认为加载对象后只调用一次渲染器函数就足够了，但是我测试了代码，它没有工作。通过添加渲染循环，它完美地工作了。
没关系。我没测试对。我将进行更简单的更正。
这实际上可能是三个如何做的事情，如果有两个 webglrenderer.render() 调用一个接一个，它可能会在没有循环的情况下工作。

【解决方案2】：

将THREE.MeshBasicMaterial({color:'red'}) 应用于所有已加载的网格，以消除丢失法线、丢失灯光、丢失纹理等问题（此材质不需要任何这些才能工作）。
查看model.children[N].geometry.vertices，看看那里是否有有效值

【讨论】：

【解决方案3】：

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

将您的 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.js 支持从场景图中添加和删除节点，即。您可以开始渲染，然后加载某些内容，然后将其添加到场景中，同时运行某种渲染逻辑（不断更新或更复杂的东西）。这对是否绘制此事物具有零 (0) 影响。当然，相机可能没有在看物体，但可以做出一些假设。三是右撇子，所以这些数字确实有意义。默认相机向下看-z，它移动到z==53，物体到z==-53，相机和物体之间有106个单位。
我为评论道歉，您的回答实际上是完全正确的。在加载任何内容之前，他只渲染一次场景。我可能只是对措辞提出异议，这本身仍然不是问题，问题是他之后没有渲染任何东西。此代码很可能缺少渲染循环。我只是在定位对象的行之后停止阅读。
给定代码，并且要求只渲染一次场景（无渲染循环），您的答案是这里唯一有效的答案。
感谢您的资格。是的，这里没有循环来持续渲染场景。并且给定单个渲染，它必须在模型加载后发生。这里还有一些工作要做以使其密封和坚固，但至少它为看到他的模型渲染铺平了道路，这样他就可以继续前进:) 这些单位是一个公平的评论，但我不知道他的模型是什么就好像。我不得不使用我自己的一个并稍微改变一下数字。