Three.js:加载JSON摄像头并点亮

时间:2017-02-03 05:07:37

标签: javascript json 3d three.js

我正在与Blender合作,使用io_three导出整个场景,包括Torus,Sphere,Suzanne(Money Head),相机和光点(Lamp)。我得到的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"
    }]
}

我现在使用Object Loader导入场景,一次性获取所有内容,而不是单个对象:

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对象的位置,看看它是否有所作为,但它仍然只有子[0],子[1]和子[2],其中子[0]不是相机,但球体。因此,相机被“忽略”。

所以问题是:

  1. 是否可以使用在JSON文件上设置的相机?
  2. 有没有办法在JSON文件上使用Lamp?
  3. 基本上,我想在Blender上解决所有问题,然后将整个场景导入Three.js - 对象,相机和灯光。 您将给予我任何帮助将不胜感激。提前感谢您的时间!

1 个答案:

答案 0 :(得分:0)

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

我确实使用了自己的JSON,从blender导出:

{
"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":{