Blender导出的json文件未在three.js中加载答案

【问题标题】：Blender exported json file not loading in three.jsBlender导出的json文件未在three.js中加载
【发布时间】：2015-10-28 23:59:19
【问题描述】：

我正在尝试将一个简单的搅拌机导出的 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 文件:(

【问题讨论】：

你能把你的函数改成loader.load( 'sole.json', function ( object ) { scene.add( object ); } );看看会发生什么...这里似乎有一些关于这个的信息-stackoverflow.com/questions/23855693/…
根据我贴的链接，可能是你导出错了。您需要将其导出为对象，而看起来您将其导出为“MshGeometr”
再次感谢@Stretch。不错的链接，没有我需要的东西。不幸的是，“对象”不是 Blenders three.js 导出器的导出选项。只有Geometry 和Buffer Geometry 是选项:(
@Stretch 我找到了解决方案，请参阅下面的答案。

标签： javascript json three.js

【解决方案1】：

好的，我想通了。 Here's a working plunker

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

然后我使用了以下 JSON 加载代码，来自 Ben Chung：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 代码和从搅拌机中导出常规立方体的 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" : []


}

但是，blender 似乎也以稍微不同的格式输出 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 视频，其中给出了从搅拌机到 three.js 的不同导出/导入场景的许多清晰示例： https://www.youtube.com/playlist?list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg （由于我在 SO 上找不到太多关于此的内容，我想我会将其发布给其他试图解决此问题的人）。

【讨论】：

很高兴您在这里找到了解决问题的方法！但是，请确保您的答案只包含答案，而不是进一步提问！考虑到这一点，我已经从答案中编辑了您问题的“问题”部分。随意提出一个新问题，以尝试深入了解该问题...
嗯，我认为这是一个很好的问题，从上面开始，现在问题已经消失了，谁知道它是什么！