Blender导出的json文件没有加载到three.js

时间：2015-08-06 01:50:27

标签： javascript json three.js

我试图将一个简单的blender导出的json文件加载到three.js中。它没有加载并抛出以下错误：

Uncaught TypeError: Cannot read property 'transparent' of undefined
h @ three.min.js:449
h @ three.min.js:449
render @ three.min.js:560
render @ (index):53

这里发生了什么？我做错了什么？

Here's a plunker（包括在这里加载太大的json文件）。

这是我的json装载机：

// instantiate a loader
var loader = new THREE.JSONLoader();

// load a resource
loader.load(
    // resource URL
    'sole.json',
    // Function when resource is loaded
    function ( geometry, materials ) {
        var material = new THREE.MeshFaceMaterial( materials );
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );
    }
);

**编辑：在阅读了SO之后，我尝试了另一个加载器并遇到以下错误：

Uncaught TypeError: Cannot read property 'type' of undefined
THREE.ObjectLoader.parseObject @ three.js:13062
THREE.ObjectLoader.parse @ three.js:12702
(anonymous function) @ three.js:12673
(anonymous function) @ three.js:11757

这是提供这些错误的新加载程序：

var loader = new THREE.ObjectLoader();
            loader.load( 'sole.json', function ( object ) {
                        scene.add( object );
            } );

第12673行显示：scope.parse( JSON.parse( text ), onLoad ); 第11757行读取：if ( onLoad ) onLoad( this.response );

这里是第11757行的背景：

var request = new XMLHttpRequest();
        request.open( 'GET', url, true );

        request.addEventListener( 'load', function ( event ) {

            THREE.Cache.add( url, this.response );

            if ( onLoad ) onLoad( this.response );

            scope.manager.itemEnd( url );

        }, false );

        if ( onProgress !== undefined ) {

            request.addEventListener( 'progress', function ( event ) {

                onProgress( event );

            }, false );

        }

所以基本上它只是没有正确解析json文件：（

1 个答案:

答案 0 :(得分：2)

好的我明白了。 Here's a working plunker

首先，json loader似乎不喜欢.json文件扩展名。去图......所以首先我将扩展名更改为.js（来自.json）。

然后我使用了Ben Chung的以下JSON加载代码：http://benchung.com/lesson-2-importing-model/（感谢Ben！）。

    material = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'blue'
    });

    group = new THREE.Object3D();

    var loader = new THREE.JSONLoader();
    loader.load('sole.js', modelLoadedCallback);
}

function modelLoadedCallback(geometry) {

        mesh = new THREE.Mesh( geometry, material );

        group.add(mesh);
        scene.add( group );

}

整个JS看起来像这样：

var scene, camera, renderer, geometry, material, cube, group;

init();
render();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
    camera.position.z = 5;

    //set background to have transparency - alpha: true
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.getElementById("viewport").appendChild(renderer.domElement);


    material = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'blue'
    });

    group = new THREE.Object3D();

    var loader = new THREE.JSONLoader();
    loader.load('sole.js', modelLoadedCallback);
}

function modelLoadedCallback(geometry) {

        mesh = new THREE.Mesh( geometry, material );

        group.add(mesh);
        scene.add( group );

}

function render() {
    requestAnimationFrame(render);
    mesh.rotation.y += 0.05;
    renderer.render(scene, camera);

html看起来像这样：

<html>
<head>
  <style>canvas { width: 100%; height: 100% }</style>
</head>

<body>

  <div id="viewport"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

我尝试使用我的json代码和来自blender的常规多维数据集的json导出，它们都有效。

这里是搅拌机导出的多维数据集的json：

{

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

    "scale" : 1.000000,

    "materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "Material",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorSpecular" : [0.5, 0.5, 0.5],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    }],

    "vertices" : [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],

    "morphTargets" : [],

    "normals" : [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],

    "colors" : [],

    "uvs" : [],

    "faces" : [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],

    "bones" : [],

    "skinIndices" : [],

    "skinWeights" : [],

    "animations" : []


}

然而，混合器似乎也以略微不同的格式吐出JSON;更多缩进级别，这不适用于此导入/加载器代码...这里是搅拌器导出的多维数据集的json，它不起作用：

{
    "geometries": [{
        "type": "Geometry",
        "uuid": "13A102A2-FCD7-346C-97EF-339AC4D7C55E",
        "data": {
            "bones": [],
            "normals": [0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,0.577349,0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,0.577349],
            "faces": [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],
            "vertices": [1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1,1,0.999999,1,0.999999,-1,1,-1,-1,1,-1,1,1],
            "skinIndices": [],
            "metadata": {
                "bones": 0,
                "version": 3,
                "generator": "io_three",
                "materials": 1,
                "uvs": 0,
                "normals": 8,
                "morphTargets": 0,
                "colors": 0,
                "vertices": 8,
                "faces": 6
            },
            "name": "CubeGeometry.1",
            "morphTargets": [],
            "influencesPerVertex": 2,
            "uvs": [],
            "colors": [],
            "skinWeights": []
        },
        "materials": [{
            "colorAmbient": [0.64,0.64,0.64],
            "specularCoef": 50,
            "opacity": 1,
            "DbgName": "Material",
            "visible": true,
            "wireframe": false,
            "blending": "NormalBlending",
            "depthTest": true,
            "colorEmissive": [0,0,0],
            "vertexColors": false,
            "transparent": false,
            "shading": "phong",
            "DbgColor": 15658734,
            "depthWrite": true,
            "colorDiffuse": [0.64,0.64,0.64],
            "DbgIndex": 0,
            "colorSpecular": [0.5,0.5,0.5]
        }]
    }],
    "textures": [],
    "object": {
        "type": "Scene",
        "children": [{
            "type": "PerspectiveCamera",
            "name": "Camera",
            "uuid": "DE0714B3-5D16-30EF-9A0A-6C5D6DD394B9",
            "matrix": [-0.685881,-0.010817,0.727634,0,0.31737,0.895343,0.312469,0,-0.654862,0.445245,-0.610666,0,-7.48113,5.34366,-6.50764,1],
            "visible": true,
            "far": 100,
            "near": 0.1,
            "aspect": 1.77778,
            "fov": 35
        },{
            "type": "Mesh",
            "name": "Cube",
            "uuid": "F29D1AC4-D789-3D8E-BAB5-59DC1B758FE2",
            "matrix": [-1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1],
            "visible": true,
            "material": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
            "castShadow": true,
            "receiveShadow": true,
            "geometry": "13A102A2-FCD7-346C-97EF-339AC4D7C55E"
        },{
            "type": "PointLight",
            "name": "Lamp",
            "uuid": "480358C5-FC08-314B-A146-DEE8993A0407",
            "matrix": [0.290865,-0.055189,0.955171,0,0.771101,0.604525,-0.199883,0,-0.566393,0.794672,0.218391,0,-4.07625,5.90386,1.00545,1],
            "visible": true,
            "color": 16777215,
            "intensity": 1,
            "distance": 30
        }],
        "uuid": "9614A834-28AE-4B64-8D0F-B01723515C83",
        "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
    },
    "metadata": {
        "type": "Object",
        "version": 4.3,
        "generator": "io_three"
    },
    "images": [],
    "materials": [{
        "type": "MeshPhongMaterial",
        "uuid": "FC9C3C1C-87E7-3748-8148-105003E5F3D5",
        "vertexColors": false,
        "depthTest": true,
        "ambient": 10724259,
        "blending": "NormalBlending",
        "emissive": 0,
        "color": 10724259,
        "name": "Material",
        "shininess": 50,
        "specular": 8355711,
        "depthWrite": true
    }]
}

**编辑：我发现了以下youtube视频，它们提供了许多从blender到three.js的不同导出/导入场景的清晰示例： https://www.youtube.com/playlist?list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg （因为我在SO上找不到这个，我想我会把这个发布给其他任何想要解决这个问题的人）。

相关问题
最新问题