Question

首先，我已阅读this question没有帮助

我是怎么做的：首先我将模型从C4D导出到.ojb。然后我将obj导入www.trheejs / editor

我填空了所有空白

enter image description here

然后从树中我选择我的对象并将其导出到Threejs对象，它保存一个.json文件

我的代码

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

当我跑步时，我有这些错误消息

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

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

json文件的结构

enter image description here

基本上我已经尝试了所有关于将本机json导入ThreeJS的内容，我尝试了来自treejs / editor或clara.io的文件仍然有相同的错误信息，我不知道了，我花了3天尝试所有的我读的方式来解决这个问题。

如果我尝试创建像CubeGeometry这样的几何体，它渲染没有问题，但是当我尝试使用原生json时，没有任何工作了

有人可以帮忙吗？

Answer 1

好的，我在这里找到答案：http://helloenjoy.com/2013/from-unity-to-three-js/

本机json代码是完美的，它只是没有意义加载JSONLoader但使用ObjectLoader（不要像OBILoader那样与我的实验中的一个不匹配）。 JSONLoader意味着加载json，但具有不同的格式/结构。 ObjectLoader意味着加载本机格式，该格式也是用json编写的，但具有原生结构/格式。

所以使用

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

                        scene.add( object );

            } );

它正在运作

完整示例代码

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

修改

我在顶部问题中显示的顶级代码是正确的，但它是用于几何加载

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

所以回顾一下。

如果来自threes / editor或Clara.io，则保存GEOMETRY使用JSONLoader，如果保存为OBJECT，则使用ObjectLoader，如果保存为SCENE，则它们应为SceneLoader（未验证）

ThreeJS无法加载Json文件

1 个答案: