从Three.js编辑器导出场景并导入

I make a simple scene using the editor of three.js working in local. When i'm finished the scene i will go to "file" -> "export scene" and the editor generate JSON Object/Scene. Now i will copy and paste this code and save like a .js? How i can import this scene in my project preserving the textures?

我使用在本地工作的three.js编辑器制作一个简单的场景。当我完成场景后，我将转到“文件” - >“导出场景”，编辑器生成JSON对象/场景。现在我将复制并粘贴此代码并保存为.js？我如何在保存纹理的项目中导入这个场景？

Thanks !

谢谢！

2 个解决方案

#1

Develotecca's answer shows how to load a basic THREE.geometry from a JSON file. However, in my experience, the geometries exported by the three.js editor are of type BufferGeometry (which is more efficient than a basic Geometry) so they need to be loaded using a THREE.BufferGeometryLoader rather than a THREE.JSONLoader.

Develotecca的答案显示了如何从JSON文件加载基本的THREE.geometry。但是，根据我的经验，three.js编辑器导出的几何体类型为BufferGeometry（比基本几何体更有效），因此需要使用THREE.BufferGeometryLoader而不是THREE.JSONLoader加载它们。

Also, the question is about saving and loading scenes, not geometries. JSONLoader is designed only to load basic geometries, and a geometry contains only a single model's per-vertex and per-face information (which includes material numbers for indexing into a MeshfaceMatrial, but no other material information, and so it needs to be combined with a material before use). If you try to load an entire scene using JSONLoader, instead of just a part of one object in the scene, the loader should spot this and deliver the message

此外，问题是关于保存和加载场景，而不是几何。 JSONLoader仅用于加载基本几何，并且几何仅包含单个模型的每顶点和每个面信息（其中包含用于索引到MeshfaceMatrial的材料编号，但没有其他材料信息，因此需要与之结合使用使用前的材料）。如果您尝试使用JSONLoader加载整个场景，而不是仅仅是场景中一个对象的一部分，则加载程序应该发现并传递消息

THREE.JSONLoader: seems to be a Scene. Use THREE.SceneLoader instead.'

THREE.JSONLoader：似乎是一个场景。请改用THREE.SceneLoader。

to the console log. This gives a big clue to the proper way to proceed.

到控制台日志。这为正确的进行方式提供了一个很大的线索。

The scene loader is documented at http://threejs.org/docs/#Reference/Loaders/SceneLoader (though the documentation is currently incomplete), and its source code is at https://github.com/mrdoob/three.js/blob/master/src/loaders/SceneLoader.js and an example of its use is at http://threejs.org/examples/webgl_loader_scene.html

场景加载器记录在http://threejs.org/docs/#Reference/Loaders/SceneLoader（虽然文档目前不完整），其源代码位于https://github.com/mrdoob/three.js /blob/master/src/loaders/SceneLoader.js及其使用示例见http://threejs.org/examples/webgl_loader_scene.html

All of that is a lot to wade through. I haven't actually used SceneLoader myself yet, though I intend to soon, but from what I've read so far it looks similar to BufferGeometryLoader or JSONLoader except because you're loading a whole scene instead of just part of one you have

所有这一切都需要很多努力。我自己还没有真正使用过SceneLoader，虽然我打算很快，但是从我到目前为止所看到的它看起来与BufferGeometryLoader或JSONLoader类似，只是因为你正在加载一个完整的场景而不仅仅是你所拥有的场景的一部分。

scene = loaded.scene

rather than

而不是

scene.add()

and you may need to include other loaders and handlers for any specialized geometries that your scene uses, e.g.

并且您可能需要为场景使用的任何特殊几何图形包含其他加载器和处理程序，例如

<script src="js/loaders/ColladaLoader.js"></script>
..
loader.addHierarchyHandler( "dae", THREE.ColladaLoader );

for Collada.

为科拉达。

#2

Load JSON data with:

加载JSON数据：

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("models/object.json", addModelToScene);

function addModelToScene(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    var object = new THREE.Mesh(geometry, material);
    object.scale.set(10, 10, 10);
    scene.add(object);
}

Example: http://stemkoski.github.io/Three.js/Model.html

示例：http：//stemkoski.github.io/Three.js/Model.html

Other example: http://all.develoteca.com/builder/

其他例子：http：//all.develoteca.com/builder/

#1