Three.js -可以使用JSON来声明对象吗？

Question

我正在努力为我的项目选择最好的Javascript 3D库。

与Scene.js,相比，我更喜欢Three.js，但Scene.js的编码风格似乎更高效，因为我需要动态创建大约100个对象，这意味着要用Three.js声明数百个变量。

在Three.js中，似乎需要为每个不同的对象定义变量并将其添加到场景中，如下所示：

var renderer = new THREE.WebGLRenderer();
var camera =
  new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR);

var scene = new THREE.Scene();

var sphere = new THREE.Mesh(

  new THREE.SphereGeometry(
    50,
    16,
    16),

  sphereMaterial);

scene.add(sphere);

而在Scene.js中，对象是在类似JSON的结构中创建的，如下所示：

var scene = SceneJS.createScene({
    nodes:[
        {
            type:"material",
            color: { r: 0.3, g: 0.3, b: 1.0 },

            nodes:[
                {
                    type: "rotate",
                    id: "myRotate",
                    y: 1.0,
                    angle: 0,

                    nodes: [
                        {
                            type:"geometry",
                            source:{
                                type:"teapot"
                            }
                        }
                    ]
                }
            ]
        }
    ]
});

现在我的问题是，是否有可能在Three.js中也使用更类似JSON的编码风格？

我已经发现了THREE.JSONLoader，但由于Three.js没有非常好的文档，我发现很难发现这是否适合我。它似乎更多的是针对从3D软件转换的模型，但我真的需要自己构建对象。

Answer 1

是的，您可以使用JSON在Three.js中定义几何图形。您可以像这样直接解析JSON (未经测试，但至少想法是存在的)：

    var json = { .... }; // your JSON geometry, not as string but already parsed object 
    var loader = new THREE.JSONLoader();
var result = loader.parse(json, texturePath);
    var mesh = new THREE.Mesh(result.geometry, result.materials);

这只能用于定义几何图形(和材质)。

我同意文档是稀疏的。幸运的是，所有的Three.js JSON格式几乎都是人类可读的。您可以检查现有的示例模型，或者查看要与JSONLoader一起使用的几何JSON格式的https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3.1。

对于复杂的场景层次结构(多个几何图形、灯光等)，您可以使用明显未记录的ObjectLoader JSON格式，其方式与JSONLoader格式非常相似。为了检查ObjectLoader JSON格式，我建议阅读src/loaders/ObjectLoader.js上的源代码和/或使用http://threejs.org/editor/生成示例文件(文件->导出场景/对象)

Answer 2

你可以看看GLGE的“快速表示法”：http://www.glge.org/ (我还没有深入研究过这个BTW，所以我不确定它是否适合你的需求)。

如果您使用SceneJS，首先要确保其功能满足您的需求，因为它的功能集比THREE.js更窄，更多的是用于高细节可视化，而不是广泛的渲染效果。

但是，如果我是您，我会立即开始并为THREE.js编写您自己的开源JSON层，从您需要的东西开始。我相信你很快就会有贡献者来填写剩下的内容。