无法加载JSON模型

时间:2013-10-09 09:18:00

标签: javascript three.js

我正在尝试加载JSON模型并在画布上显示它。但屏幕上没有任何内容。我试图在loader.load回调中放置警报,但警报从未显示:永远不会调用回调。我想知道JSON文件是否有问题,我从这里下载了它:https://livingvindonissa.googlecode.com/svn-history/r42/trunk/livingvindonissa/src/model/test/Teapot.json

这是代码:

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

1 个答案:

答案 0 :(得分:1)

您使用的模型格式似乎与通过Three.js pluginPython script converter从Blender导出的格式不同。对我来说,告诉我的是Three.js有JSON格式包含元数据块:

"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
},

您的文件也有

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

而不是

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

我怀疑该文件是以通用的 Model to JSON 格式生成的,而不是Three.js JSON格式。你能否确认你使用的出口商?

编辑:为了澄清,这个问题的答案是使用的JSON格式与Three.js JSONLoader不兼容。您需要找到原始文件,并使用上述方法进行转换,或手动转换您必须符合Three.js JSON格式的JSON文件。