Three.js 出乎意料的渲染结果？答案

【问题标题】：Three.js unexpected render result?Three.js 出乎意料的渲染结果？
【发布时间】：2016-09-03 09:21:37
【问题描述】：

在搅拌机中创建了以下网格：

每当我将它加载到 three.js 中时，我都会收到以下结果：

我导出为 .obj 格式并对我所有的脸进行三角测量。不知道为什么会这样。下面是我用来渲染网格的threejs代码。我对其他网格使用相同的代码，它们按预期呈现。我猜我用这个网格做了一些three.js 不喜欢的事情？

<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script type="text/javascript" src="/js/three.js"></script>
    <script type="text/javascript" src="/js/DDSLoader.js"></script>
    <script type="text/javascript" src="/js/MTLLoader.js"></script>
    <script type="text/javascript" src="/js/OBJLoader.js"></script>
    <script type="text/javascript" src="/js/OrbitControls.js"></script>



    <script type="text/javascript" src="/js/stats.js"></script>
    <script type="text/javascript" src="/js/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    function init() {
        var stats = initStats();

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.x = 130;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(scene.position);
        scene.add(camera);


        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        //webGLRenderer.setPixelRatio( window.devicePixelRatio );
        webGLRenderer.setClearColor(new THREE.Color(0xffffff, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;


        var ambient = new THREE.AmbientLight( 0x444444 );
        ambient.intensity = 5;
        scene.add( ambient );


        if('stiletto_switchblade_knife.mtl' !== ''){

            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setBaseUrl( '/assets/download/mesh/18/' );
            mtlLoader.setPath( '/assets/download/mesh/18/' );
            mtlLoader.load( 'stiletto_switchblade_knife.mtl', function( materials ) {
                materials.preload();

                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials( materials );
                objLoader.setPath( '/assets/download/mesh/18/' );
                objLoader.load( 'stiletto_switchblade_knife.obj', function ( object ) {
                    //object.scale.set(100, 100, 100);
                    //object.rotation.x = -0.3;
                    scene.add( object );
                });

            });

        } else {

            var objLoader = new THREE.OBJLoader();
            objLoader.setPath( '/assets/download/mesh/18/' );
            objLoader.load( 'stiletto_switchblade_knife.obj', function ( object ) {
                object.material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
                //object.scale.set(100, 100, 100);
                //object.rotation.x = -0.3;
                scene.add( object );
            });

        }


        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);


        var controls = new THREE.OrbitControls(camera, webGLRenderer.domElement );
        render();


        // simple render
        function render() {
            stats.update();
            controls.update();
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

编辑在 three.js 中网格是否需要防水？如果是这样，那可能是问题所在，因为有几个区域不在此网格中。这是我目前唯一能想到的与正确渲染的网格不同的地方。

【问题讨论】：

标签： javascript 3d three.js

【解决方案1】：

在three.js R76 中，OBJ 模型出现了类似的渲染。事实证明，任何包含杂散“l”（线）元素的对象都会像您所展示的那样爆炸。我通过搜索“l”上的 ASCII OBJ 文件找到了坏对象，通过选择和隐藏所有面孔来消除流浪者，并处理剩下的一切。

【讨论】：

【解决方案2】：

解决了。原来我在网格内部画了几张脸。这导致了意外的行为。有趣的调试方法。我刚开始剥离顶点并使用threejs进行渲染，直到找到导致问题的部分。

【讨论】：