javascript - ThreeJS cannot load Json files - Stack Overflow

admin管理员组

文章数量:1344962

first, i have already read this question didn't help

How i do: first i export a model from C4D to .ojb. Then i import the obj into www.trheejs/editor

I fill all the blank

then from the tree i select my object and export it to a Threejs Object, it save a .json file

My code

<script>
    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);
var kiss = new THREE.Object3D(), loader = new THREE.JSONLoader(true);
loader.load( "brikk2.json", function ( geometry, materials ) {
    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xff0000, ambient: 0xff0000 } ) );
    scene.add( mesh );
}); 
           var render = function () {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
</script>

When i run i have theses error messages

THREE.WebGLRenderer 67                             three.js:20806
THREE.WebGLRenderer: elementindex as unsigned integer not supported.         three.js:26942
XHR finished loading: ".json".     three.js:12018
    THREE.JSONLoader.loadAjaxJSON                  three.js:12018
    THREE.JSONLoader.load                          three.js:11942
    load                                           test.html:23
     (anonymous function)                          test.html:28
 Uncaught TypeError: Cannot read property 'length' of undefined             three.js:12087
    parseModel                                                      three.js:12087
    THREE.JSONLoader.parse                                          three.js:12028
    xhr.onreadystatechange                                          three.js:11969

the Json i load

{
"metadata": {
    "version": 4.3,
    "type": "Object",
    "generator": "ObjectExporter"
},
"geometries": [
    {
        "uuid": "213E28EF-E388-46FE-AED3-54695667E086",
        "name": "brikkG",
        "type": "Geometry",
        "data": {
            "vertices": [0.036304,-0.016031,-0.027174,0.036304,0.......


      ........ 232,1228,1139,1141,1140,1]
        }
    }],
"materials": [
    {
        "uuid": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
        "name": "lego",
        "type": "MeshPhongMaterial",
        "color": 16721408,
        "ambient": 16777215,
        "emissive": 0,
        "specular": 16777215,
        "shininess": 30,
        "opacity": 1,
        "transparent": false,
        "wireframe": false
    }],
"object": {
    "uuid": "3BAAB8CA-1EB7-464A-8C6D-FC4BBB3C63C6",
    "name": "BrikkM",
    "type": "Mesh",
    "geometry": "213E28EF-E388-46FE-AED3-54695667E086",
    "material": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
    "matrix": [1000,0,0,0,0,1000,0,0,0,0,1000,0,0,0,0,1]
      }
     }

structure of the json file

basically i have tried all i have read about importing native json into ThreeJS, i tried files from the treejs/editor or clara.io still have the same error message, i have no idea anymore, i spend 3 days trying all the way i read to solve this.

If i try to create geometry like CubeGeometry it render without problems, but at soon as i try with native json, nothing work anymore

somebody could help ?

first, i have already read this question didn't help

How i do: first i export a model from C4D to .ojb. Then i import the obj into www.trheejs/editor

I fill all the blank

then from the tree i select my object and export it to a Threejs Object, it save a .json file

My code

<script>
    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);
var kiss = new THREE.Object3D(), loader = new THREE.JSONLoader(true);
loader.load( "brikk2.json", function ( geometry, materials ) {
    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xff0000, ambient: 0xff0000 } ) );
    scene.add( mesh );
}); 
           var render = function () {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
</script>

When i run i have theses error messages

THREE.WebGLRenderer 67                             three.js:20806
THREE.WebGLRenderer: elementindex as unsigned integer not supported.         three.js:26942
XHR finished loading: "http://xxxxxx.xx/tst/mrdoob-three2/brikk2.json".     three.js:12018
    THREE.JSONLoader.loadAjaxJSON                  three.js:12018
    THREE.JSONLoader.load                          three.js:11942
    load                                           test.html:23
     (anonymous function)                          test.html:28
 Uncaught TypeError: Cannot read property 'length' of undefined             three.js:12087
    parseModel                                                      three.js:12087
    THREE.JSONLoader.parse                                          three.js:12028
    xhr.onreadystatechange                                          three.js:11969

the Json i load

{
"metadata": {
    "version": 4.3,
    "type": "Object",
    "generator": "ObjectExporter"
},
"geometries": [
    {
        "uuid": "213E28EF-E388-46FE-AED3-54695667E086",
        "name": "brikkG",
        "type": "Geometry",
        "data": {
            "vertices": [0.036304,-0.016031,-0.027174,0.036304,0.......


      ........ 232,1228,1139,1141,1140,1]
        }
    }],
"materials": [
    {
        "uuid": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
        "name": "lego",
        "type": "MeshPhongMaterial",
        "color": 16721408,
        "ambient": 16777215,
        "emissive": 0,
        "specular": 16777215,
        "shininess": 30,
        "opacity": 1,
        "transparent": false,
        "wireframe": false
    }],
"object": {
    "uuid": "3BAAB8CA-1EB7-464A-8C6D-FC4BBB3C63C6",
    "name": "BrikkM",
    "type": "Mesh",
    "geometry": "213E28EF-E388-46FE-AED3-54695667E086",
    "material": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
    "matrix": [1000,0,0,0,0,1000,0,0,0,0,1000,0,0,0,0,1]
      }
     }

structure of the json file

basically i have tried all i have read about importing native json into ThreeJS, i tried files from the treejs/editor or clara.io still have the same error message, i have no idea anymore, i spend 3 days trying all the way i read to solve this.

If i try to create geometry like CubeGeometry it render without problems, but at soon as i try with native json, nothing work anymore

somebody could help ?

• javascript
• json
• three.js

Share Improve this question Follow edited May 23, 2017 at 12:25 CommunityBot 111 silver badge asked May 25, 2014 at 13:18 LeftyLefty 39511 gold badge77 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Ok, i found the answer here: http://helloenjoy./2013/from-unity-to-three-js/

the native json code is perfect, it's just no be mean to be loaded with JSONLoader but with ObjectLoader (do not mismatch with OBJLoader like i did i one of my experiment). JSONLoader is mean to load json, but with a different format/structure. ObjectLoader is mean to load native format that is also written in json but with a native structure/format.

so use

 var loader = new THREE.ObjectLoader();
            loader.load( 'brikk2.json', function ( object ) {

                        scene.add( object );

            } );

and it's working

full example code

<body>
    <script src="build/three.min.js"></script>
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xffffff, 1);
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var ambient = new THREE.AmbientLight( 0x101030 );
            scene.add( ambient );
            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 );
            scene.add( directionalLight );
             var loader = new THREE.ObjectLoader();
            loader.load( 'brikk2.js', function ( object ) {
                        scene.add( object );
            } );
        camera.position.z = 5;
        var render = function () {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        };
        render();
    </script>
</body>

EDIT

The top code i showed in the top question was right but it was for Geometry loading

loader = new THREE.JSONLoader();
 loader.load( 'ugeometry.json', function ( geometry ) {
          mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'environment.jpg', new THREE.SphericalReflectionMapping() ), overdraw: 0.5 } ) );
   scene.add( mesh );

So the recap.

if from threes/editor or Clara.io you save GEOMETRY use JSONLoader, if you save as OBJECT use ObjectLoader, and if you save as SCENE they should be a SceneLoader (unverified)

本文标签： javascriptThreeJS cannot load Json filesStack Overflow