javascript - 对three.js进行编码时使用的.json和.js文件有什么区别?

标签 javascript three.js

.json和.js文件在three.js中使用。它们是对象的格式之一。它们之间有什么区别?他们需要不同的装载机来装载物体吗?

我正在遵循以下three.js示例:http://mrdoob.github.io/three.js/examples/webgl_materials_cars.html。在该示例中,针对对象和该BinaryLoader使用.js文件。但是,当我执行相同的操作时,我已经在BinaryLoader中将.js文件用于我的对象,但是它没有用。它适用于JSONLoader。因此,我想知道如何识别相应对象的.js或.json文件和加载器?

最佳答案

.json和.js文件在three.js中使用。它们是对象的格式之一。它们之间有什么区别?


js扩展名表示文件的内容应为遵循javascript语法的脚本,因此易于阅读。

json扩展名表示文件的内容应为遵循javascript对象语法的树结构(javascript对象与3d对象无关),因此人类可读。同样,此结构对于.js扩展名有效,换句话说,任何有效的json文件也是有效的js文件。

三个js加载器来自大部分文件解析器。这些加载器根本不关心文件扩展名。它被忽略。对于解析器而言,唯一重要的是文件的内容。


  他们需要不同的装载机来装载物体吗?


据我所知,Three.js能够加载多种结构。每种都有自己的加载器(并且加载器包含一个或多个解析器)。

最基本的是JSONLoader。它需要具有特定json结构的文件(有关材质,法线,位置,纹理坐标的数据,或多或少,并非所有内容都是强制性的)。

您提供的示例使用BinaryLoader。这个二进制加载器需要两个文件(据我了解)。第一个文件包含具有其他文件的材质和位置的json结构(因此json解析器用于解析此文件)。第二个文件包含缓冲区(有关法线,位置,纹理坐标的数据...),并且是二进制文件。我不知道这里使用了什么确切的二进制结构。您会看到这是一种混合,如果您以json结构提供缓冲区数据,它将无法读取它。

我听说的最后一个加载器是fbxloader,它可以读取例如在Blender中创建的结果。但是我不确定这是否有效。


  在该示例中,针对对象和该BinaryLoader使用.js文件。但是,当我执行相同的操作时,我已经在BinaryLoader中将.js文件用于我的对象,但是它没有用。


我希望现在已经清楚了。 BinaryLoader需要两个具有json和二进制结构的文件。它忽略文件名,包括扩展名。如果您创建两个名为blablabla.wtf和blabla.omg的文件,但其中包含正确的结构,则它将起作用。我猜您有一个具有正确json结构的文件。这仅适用于JSONLoader。

有关文件加载器的更多信息

我们可以谈三个方面。解析速度,文件大小和可维护性。
如果要在运行中下载越来越多的数据,解析速度更为重要。
如果当前大小将要超出某个限制(不应该或无法打破),则文件大小更为重要。
如果您需要大量更改文件内容,则可维护性更为重要。

二进制格式更适合文件大小和解析速度。但是主流浏览器使用gzip / bzip压缩,这使得json文件的大小几乎与二进制文件相同。可维护性应始终是最重要的方面。 Json结构非常易于维护和调试。 fbx或其他二进制格式更适合具有大量资产的大型且健壮的项目。

编辑:

恐怕我将不得不多解释一些...

让我们讨论一下整个概念。可以说我们有一个空的世界,我们想在里面放两个模型,简单的立方体和一些动物。

有三种基本方法可以做到这一点。程序地生成它,使用外部数据或混合数据(一部分是程序性的,一部分是外部数据的)。

程序性的或混合性的可能是例如海浪。

程序生成由程序中的某些算法完成,而外部数据必须通过某些程序工具(加载程序)插入。

现在检查立方体和动物。多维数据集只是由6个平面组成的简单对象。它无法移动,呼吸,吃东西。它只是存在。另一方面,动物要复杂得多,它不会只停留在中间并且不会移动。所有这些内容将成为外部数据(一个或多个文件)的一部分。

我提供了两种截然不同的内容,但重要的是要知道即使最简单的内容在3D中都是复杂的,并且可以用不同的方式进行操作。例如,那个立方体有什么颜色?每个飞机都有相同的颜色吗?有光泽吗能反映出来吗?

最主要的是加载程序可以接受,阅读和理解什么样的描述。首先,您必须了解有关加载程序的所有知识,然后才能创建一个对象。

这是JSONLoader可以接受的结构的示例:
https://github.com/mrdoob/three.js/wiki/JSON-Geometry-format-4
https://github.com/mrdoob/three.js/wiki/JSON-Material-format-4

例如,如果"metadata"包含"type": "Geometry",则加载程序将查找"indices""vertices""normals""uvs"。某些部分可能是可选的,例如"uvs"
简单的多维数据集只能从顶点组装,但这可能不是此特定加载程序所知道的,即使您的结构确实有意义,加载程序也可能不知道。

二进制加载器非常不同,因为二进制代码中没有单词,只有0和1。因此,您需要大量元数据来指定内部确切的内容。元数据可以是同一文件的一部分,也可以是其他文件的一部分。但这又取决于装载机在哪里寻找它们。


  您能否告诉我,JSON结构是什么意思?


通常,我的意思是特定加载程序可读的结构。


  我猜测可能是.js文件包含的内容。


在您提供的示例的情况下,此文件中的是json结构:
http://mrdoob.github.io/three.js/examples/obj/veyron/VeyronNoUv_bin.js


  .js文件的内容与BinaryLoader一起使用时有所不同,因为您提到它包含缓冲区。


更准确地说,它不包含缓冲区。它包含关键字"buffers":引导我们进入文件“ VeyronNoUv_bin.bin”,其中是缓冲区数据。
它还包含与“ VeyronNoUv_bin.bin”相关的其他重要信息(有多少个顶点,法线等)。因此,您可以说.js文件内容包含其自身的元数据和相关二进制文件的元数据。

有关顶点,法线等的数据稍后会加载到程序的缓冲区中,这就是为什么它们选择关键字缓冲区的原因。更精确的标识是dataForBuffers。


  当与JSONLoader一起使用时,它包含一长串顶点。我理解正确吗?


究竟!使用JSONLoader时,将读取一长串顶点等,然后将其加载到缓冲区中。

关于javascript - 对three.js进行编码时使用的.json和.js文件有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29209725/

相关文章:

javascript - Three.js:远处的物体是微弱的

three.js - 向这个 obj 的每一侧添加不同的颜色

javascript - 如何在另一个对象中设置另一个对象 | JavaScript

javascript - 如何在给定的 Express 文件中分隔路线?

javascript - 如何使用 Javascript 使用 Handlebars.registerPartial

javascript - Webpack:重复模块加载效率低下吗?

javascript - 阴影不适用于 THREE.js

javascript - 谷歌标签管理器脚本注入(inject)

javascript - 如何在 Leaflet 中使用 MarkerClusterGroup 返回特定属性?

android - 如何将 ThreeJS 与 PhoneGap 一起使用?