CODEWITHSUNDEEP
javascript3dthree.js
whitwhoa
whitwhoa

Reputation: 2489

Three.js unexpected render result?

Created the following mesh in blender: enter image description here

Whenever I load it into three.js I receive the following result: enter image description here

I export to .obj format and triangulate all of my faces. Not sure why this is happening. Below is the threejs code I am using to render the mesh. I use the same code with other meshes and they render as expected. I'm guessing I've done something that three.js doesn't like with this mesh?

<!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>

EDIT Are meshes required to be watertight in three.js? If so that could be the problem as there are a couple areas that are not in this mesh. That's the only thing I can think of at the moment that differs between this and the meshes that render properly.

Upvotes: 0

Views: 310

Answers (2)

YoGorgar
YoGorgar

Reputation: 11

Renders like that turned up with OBJ models in three.js R76. It turned out that any object containing a stray "l" (line) element blew up just like what you have shown. I found the bad objects by searching the ASCII OBJ file on "l ", got rid of the strays by selecting and hiding all of the faces, and dealing with whatever was left.

Upvotes: 1

whitwhoa
whitwhoa

Reputation: 2489

Solved. Turned out I had left a few faces drawn inside of the mesh. This was causing the unexpected behavior. Interesting debugging method. I just started stripping away vertices and rendering with threejs until I found the section that was causing the issue.

Upvotes: 0

Related Questions