Three.js：加载一个 JSON 摄像头和灯光答案

【问题标题】：Three.js: loading a JSON camera and lightThree.js：加载一个 JSON 摄像头和灯光
【发布时间】：2017-06-20 09:45:44
【问题描述】：

我正在使用 Blender，使用 io_three 导出整个场景，其中包括一个圆环、一个球体、Suzanne（金钱头）、一个相机和一个光点（灯）。我得到的 JSON 文件包含这些元素作为子元素：

"object":{
    "type":"Scene",
    "matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
    "uuid":"3FF28BA1-D2C4-4191-B85E-6CF740855E1C",
    "children":[{
        "name":"Camera",
        "uuid":"B7190F03-3E64-4CE9-80C4-4C4830CDE149",
        "matrix":[-0.685881,-0.0108168,0.727634,0,0.31737,0.895343,0.312469,0,-0.654862,0.445245,-0.610666,0,-8.96977,10.5794,-7.42916,1],
        "visible":true,
        "type":"PerspectiveCamera",
        "far":100,
        "near":0.1,
        "aspect":1.77778,
        "fov":28.8415
    },{
        "name":"Sphere",
        "uuid":"0BD547AA-5356-467A-B9B9-F14F1E6B14F3",
        "matrix":[-1,0,0,0,0,0,1,0,0,1,0,0,2.73509,4.09248,-1.14813,1],
        "visible":true,
        "type":"Mesh",
        "material":"F6D51381-509B-460A-9468-D7FB4011BAEF",
        "castShadow":true,
        "receiveShadow":true,
        "geometry":"7953F05E-3773-435D-9C37-1F2F004F2328"
    },{
        "name":"Suzanne",
        "uuid":"B195305E-3E34-484F-BC36-9F7E2F25C8C3",
        "matrix":[-1,0,0,0,0,0,1,0,0,1,0,0,-0.0103972,6.33829,0.0395848,1],
        "visible":true,
        "type":"Mesh",
        "material":"9B00D2EB-ABD8-44CB-9CB9-C9CD431BE867",
        "castShadow":true,
        "receiveShadow":true,
        "geometry":"2264D3C6-FBE8-4ED2-927A-DC8B9261DCEE"
    },{
        "name":"Lamp",
        "uuid":"68A14BA0-1A6D-41B2-9DE3-D96F954A6939",
        "matrix":[0.290865,-0.0551891,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,
        "type":"PointLight",
        "color":16777215,
        "intensity":1,
        "distance":0,
        "decayExponent":2
    },{
        "name":"Torus",
        "uuid":"B4469FFE-114C-4FA8-91F3-A14E4186C74A",
        "matrix":[-1,0,0,0,0,0,1,0,0,1,0,0,0.0785838,1.71657,3.25101,1],
        "visible":true,
        "type":"Mesh",
        "material":"4C8B09D5-5C78-431A-815E-B5D94C4B9CFF",
        "castShadow":true,
        "receiveShadow":true,
        "geometry":"9BC4AAA5-E636-42F8-80AF-AD2AC955A727"
    }]
}

我现在正在使用对象加载器导入场景，以便一次获取所有内容，而不是单个对象：

var Sphere;
var Monkey;
var BlenderCam;

var loader = new THREE.ObjectLoader();
// load a resource
loader.load(
    // resource URL
    'models/suzane/scene.json',
    // Function when resource is loaded
    function ( loadedScene ) {
        scene.add( loadedScene );

        //Getting the objects. This works fine and I can handle them:
        Sphere = loadedScene.getObjectByName( "Sphere", true );
        Monkey = loadedScene.getObjectByName( "Suzanne", true );

        //Trying to get the camera object. The camera doesn's seem to be found
        BlenderCam = loadedScene.children[ 0 ];

        loop();
    }
);

我可以成功处理任何网格：Torus、Suzanne 和 Sphere。但是，我找不到处理相机或灯的方法。

我什至尝试使用此属性查找每个孩子：

BlenderCam = loadedScene.children[ 0 ];

我尝试了从 0 到 4 的数字（有 5 个孩子），但 Three.js 只能识别其中的三个。它忽略了相机和灯。我什至更改了 JSON 文件中 Lamp 对象的位置，看看是否会有所不同，但它仍然只有 children[0]、children[1] 和 children[2]，其中 children[0] 不是相机，但球体。所以，相机被“忽略”了。

所以，问题是：

有没有办法使用在 JSON 文件中设置的相机？
有没有办法在 JSON 文件上使用 Lamp？

基本上，我想在 Blender 上解决所有问题，然后将整个场景导入 Three.js - 对象、相机和灯光。您能给我的任何帮助将不胜感激。提前感谢您的宝贵时间！

【问题讨论】：

标签： javascript json 3d three.js

【解决方案1】：

这对我来说很好。尝试console.log(BlenderCam)，您可以看到您的相机显示为 JSON 对象（使用 Firefox 的内置开发者工具）。

我确实使用了自己的 JSON，从搅拌机导出：

{
"textures":[],
"images":[],
"metadata":{
    "type":"Object",
    "sourceFile":"scene.blend",
    "version":4.4,
    "generator":"io_three"
},
"materials":[],
"object":{
    "type":"Scene",
    "matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
    "uuid":"E0F9A974-447E-4CEA-B027-B6456FBBC425",
    "children":[{
        "name":"Camera",
        "uuid":"BC347E50-122A-46CD-940F-16E2B12CFDFE",
        "matrix":[1,3.25841e-07,1.00656e-07,0,-3.3837e-07,0.984808,0.173648,0,-4.25448e-08,-0.173648,0.984808,0,-4.37114e-06,-6.61029,49.9782,1],
        "visible":true,
        "type":"OrthographicCamera",
        "far":5000,
        "near":1,
        "left":-43.9843,
        "right":43.9843,
        "top":25.8771,
        "bottom":-25.8771
    },{
        "name":"Plane",
        "uuid":"C0EB7E6E-9C9E-4AD1-917F-6FF31A1B956E",
        "matrix":[-1,0,0,0,0,0,1,0,0,1,0,0,0,4.48201,-5.35856,1],
        "visible":true,
        "type":"Mesh",
        "castShadow":true,
        "receiveShadow":true,
        "geometry":"88218586-75A2-43BA-96E7-F6C70558CD1C"
    },{
        "name":"Plane.001",
        "uuid":"F5255EE0-8CAA-45C9-9DFA-395B8AFDE8C7",
        "matrix":[-0.1541,0.0340519,0.683852,0,0.667744,-0.147553,0.157817,0,0.151432,0.685295,1.05509e-08,0,-14.3255,-6.97558,-0.000347044,1],
        "visible":true,
        "type":"Mesh",
        "castShadow":true,
        "receiveShadow":true,
        "geometry":"C1549503-40B8-495F-874B-9C58CFEA65BB"
    }]
},
"geometries":[{
    "type":"Geometry",
    "data":{

【讨论】：