CODEWITHSUNDEEP
javascriptthree.js
Ramy Al Zuhouri
Ramy Al Zuhouri

Reputation: 22006

Cannot load JSON model

I am trying to load a JSON model and to display it on the canvas. But nothing is drawn on the screen. I tried to put an alert inside the loader.load callback, but the alert is never shown: the callback is never called. I'm wondering if there's something wrong with the JSON file, I've downloaded it from here: https://livingvindonissa.googlecode.com/svn-history/r42/trunk/livingvindonissa/src/model/test/Teapot.json

And this is the code: 

<head>
        <title> Teapot </title>
        <style> 
            canvas {width:100%; height:100%; background-color: black} 
            body {background-color: white};
        </style>
    </head>
    <body>
        <h1 align="center"> Teapot </h1>
        <script src="/Users/ramy/Documents/HTML/mrdoob-three.js-58e4622/build/three.min.js"></script>
        <script type="text/javascript">
            // Scene initialization
            var scene= new THREE.Scene();
            var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
            var renderer= new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth,window.innerHeight);
            document.body.appendChild(renderer.domElement);
            camera.position.z= 50;

            // Teapot creation
            var teapot;
            var loader= new THREE.JSONLoader();
            loader.load("/Users/ramy/Documents/HTML/teapot.json", 
                function(geometry) {
                    var material= new THREE.MeshBasicMaterial({color:0x00ff00});
                    teapot= new THREE.Mesh(geometry,material);
                    scene.add(teapot);
                    render();
                });

            // Rendering
            var render= function() {
                requestAnimationFrame(render);
                renderer.render(scene,camera);
            }
        </script>
    </body>
</html>

Upvotes: 0

Views: 405

Answers (1)

Darryl_Lehmann
Darryl_Lehmann

Reputation: 2198

It appears that the model format you are using isn't the same as that exported from Blender via the Three.js plugin or the Python script converter The tell tale for me was that Three.js has a JSON format that contains a metadata block:

"metadata" :
{
    "formatVersion" : 3.1,
    "generatedBy"   : "Blender 2.65 Exporter",
    "vertices"      : 25253,
    "faces"         : 49658,
    "normals"       : 25252,
    "colors"        : 0,
    "uvs"           : [25399],
    "materials"     : 8,
    "morphTargets"  : 0,
    "bones"         : 0
},

Also the your file has 

"vertexPositions"
"vertexNormals"
"vertexTextureCoords"
"indices"

Instead of

"vertices"
"normals" 
"uvs"
"faces"

I suspect the file was generated in a generic Model to JSON format, not the Three.js JSON format. Could you confirm the exporter you used?

Edit: To clarify, the answer to this question is the JSON format used is not compatible with the Three.js JSONLoader. You'll need to find the original file, and convert it with the aforementioned approaches, or manually convert the JSON file you have to conform with Three.js JSON format.

Upvotes: 1

Related Questions