Cannot load JSON model

Question

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>

Is it intended to link up three.js using local path ?

Raptor
– Raptor

2013-10-09 09:20:02 +00:00
Commented Oct 9, 2013 at 9:20 — Raptor
– Raptor, Commented Oct 9, 2013 at 9:20
Also using the full path it works for me.

Ramy Al Zuhouri
– Ramy Al Zuhouri

2013-10-09 09:28:47 +00:00
Commented Oct 9, 2013 at 9:28 — Ramy Al Zuhouri
– Ramy Al Zuhouri, Commented Oct 9, 2013 at 9:28

Darryl_Lehmann · Accepted Answer · 2013-10-10 12:50:10Z

1

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.

edited Oct 10, 2013 at 12:50

answered Oct 9, 2013 at 13:22

Darryl_Lehmann

2,20816 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ramy Al Zuhouri Over a year ago

Truly I'm not using any exporter, I've found the file on the web.

Darryl_Lehmann Over a year ago

I've editted my response above, alas, the JSON file you have isn't going to work with Three.js without some heavy lifting on your part.

Collectives™ on Stack Overflow

Cannot load JSON model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related