Question

在blender中创建以下网格：

每当我将它加载到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中防水？如果是这样可能是问题，因为有几个区域不在此网格中。这是我现在唯一可以想到的，它与正确渲染的网格之间存在差异。

Answer 1

使用三个.js R76中的OBJ模型进行渲染。事实证明，任何包含流浪的对象都是＆＃34; l＆＃34; （线）元素就像你所展示的那样爆炸了。我通过搜索＆＃34; l＆＃34;上的ASCII OBJ文件找到了坏对象，通过选择并隐藏所有面，并处理剩下的任何内容来摆脱错误。

Answer 2

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

Three.js意外渲染结果？

2 个答案: