WebGL 加载模型时,javascript 解析结果的调试转成 JSON 查看确认数组结构

简介: WebGL 加载模型时,javascript 解析结果的调试转成 JSON 查看确认数组结构太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

WebGL 加载模型时,javascript 解析结果的调试转成 JSON 查看确认数组结构

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino否则,出自本博客的文章拒绝转载或再转载,谢谢合作。


这么长一个大标题,其实就一个主题,javascript 中数组转成 JSON 串。

为什么要这样转呢?本来就是从文本文件中读出来的,还要转成文本,啥子弯弯道?!


有个问题,javascript 作为一种语言,其数组,也是一种内存组织结构,打印出来倒是可以,但那是一堆堆的便便撒(闭嘴俺靴僵话嘞)

那么,想看到数据的同时,还要看到组织结构,那么就找一种能描述数组结构的明文形式,在 javascript 中,JSON 必然首选!至于其它语言,我想 JSON 也是首选,不信您移步 JSON 的定义,看看是否确如其说!


确认过了没?

好,即然您和我一样,认同这种观点,那么,我们来看看如何将 javascript 中的数组转换成 JSON 串吧。

下面,以 WebGL 处理一个长方体为例,接下来的部分,可能对研究 WebGL 的朋友,多少会有些帮助吧,至少对我很有帮助,因为我还正在研究中,这里记录下来的只能算阶段性成果,在 CMMI 中可以叫做里程碑吧,而在敏捷开发 scrum 中,可以叫做一个 sprint 冲刺。

模型文件,

mtllib changfangti.mtl

#
# object Box001
#

v  -3000.0000 0.0000 2000.0000
v  -3000.0000 0.0000 -2000.0000
v  3000.0000 0.0000 -2000.0000
v  3000.0000 0.0000 2000.0000
v  -3000.0000 2800.0000 2000.0000
v  3000.0000 2800.0000 2000.0000
v  3000.0000 2800.0000 -2000.0000
v  -3000.0000 2800.0000 -2000.0000
# 8 vertices

vn 5.0000 -1.0000 -0.0000
vn 0.0000 1.0000 -0.0000
vn 0.0000 0.0000 1.0000
vn 1.0000 0.0000 0.0006
vn 0.0000 0.0000 -1.0000
vn -1.0000 0.0000 -0.0006
# 6 vertex normals

vt 0.9995 0.0005 0.0005
vt 0.9989 0.9995 0.0005
vt 0.0005 0.9995 0.0005
vt 0.0011 0.0005 0.0005
vt 0.0005 0.0005 0.9995
vt 0.9989 0.0005 0.9995
vt 0.9995 0.9995 0.9995
vt 0.0011 0.9995 0.9995
vt 0.0005 0.0005 0.0005
vt 0.9989 0.0005 0.0005
vt 0.0005 0.0005 0.9989
vt 0.9995 0.0005 0.9995
vt 0.0005 0.9995 0.9989
vt 0.9989 0.9995 0.9995
vt 0.0005 0.9995 0.9995
vt 0.0005 0.0005 0.0011
vt 0.9995 0.9995 0.0005
vt 0.0005 0.9995 0.0011
# 18 texture coords


g Box001
usemtl 07___Default11
s 2
f 1/1/1 2/2/1 3/3/1 
f 3/3/1 4/4/1 1/1/1 
usemtl 07___Default
s 4
f 5/5/2 6/6/2 7/7/2 
f 7/7/2 8/8/2 5/5/2 
usemtl 09___Default
s 8
f 1/9/3 4/10/3 6/2/3 
f 6/2/3 5/3/3 1/9/3 
usemtl 10___Default
s 16
f 4/11/4 3/12/4 7/7/4 
f 7/7/4 6/13/4 4/11/4 
usemtl 11___Default
s 32
f 3/5/5 2/6/5 8/14/5 
f 8/14/5 7/15/5 3/5/5 
usemtl 12___Default
s 64
f 2/16/6 1/1/6 5/17/6 
f 5/17/6 8/18/6 2/16/6 
# 12 faces
以上模型文件是从 3dmax 中导出的 .obj 格式模型,其中有四部分是我们关心的,以 v、vt、vn  和 f 开头的部分,其实 usemtl 也是可以关心的,但目前研究中一直未考虑,均只指定一种材质,故而暂不考虑。

这里有一个很不错的算法,只是有了个大体思路,一直未去实践,也许在不久的将来,深入细节去做的时侯,会做到吧,也挺难于思考的一个家伙,期待吧。


接下来,本篇主角登场,中国式的聚会哈,越后出现的,越是主要人物。

这里的 JSON 类只有在 ECMAScript 标准 5 以后版本中才支持

    var lines = data.split("\n");
    alert(JSON.stringify(lines));

[
    "mtllib 11.mtl",
    "",
    "#",
    "# object 006",
    "#",
    "",
    "v  34.1000 161.8999 104.3000",
    "v  0.0000 162.5000 108.2000",
    "v  0.0000 156.6999 113.3000",
    "v  35.3000 157.0000 107.6999",
    "v  55.5000 157.0000 97.2999",
    "v  66.6000 157.1000 91.5999",
    "v  64.6999 161.9999 88.4999",
    "v  53.3999 161.9999 94.2999",
    "v  91.7998 157.0000 66.6000",
    "v  89.2999 161.6999 64.1000",
    "v  107.8999 157.1000 34.6000",
    "v  104.6999 161.6999 33.8999",
    "v  109.3999 161.5000 0.3999",
    "v  112.5999 156.2999 0.3999",
    "v  0.0000 152.5999 112.9999",
    "v  56.2999 152.9000 97.9000",
    "v  97.9999 152.7000 54.6999",
    "v  112.4000 152.9000 0.3999",
    "v  0.0000 144.5999 119.1999",
    "v  59.8000 142.9000 103.5000",
    "v  103.4000 143.1998 58.4999",
    "v  0.0000 139.0999 124.9000",
    "v  62.9999 138.8999 108.2000",
    "v  108.2000 138.9999 62.0999",
    "v  118.6999 143.0999 0.3999",
    "v  124.7000 138.6999 0.3999",
    "v  210.6000 9.8997 271.2999",
    "v  215.2999 42.7000 270.1999",
    "v  0.0000 42.8000 270.9000",
    "v  0.0000 10.7000 271.1999",
    "v  0.0000 85.7999 127.4999",
    "v  65.1000 85.6999 110.6999",
    "v  0.0000 272.6000 67.9000",
    "v  32.6000 271.1999 57.9999",
    "v  36.8999 292.2999 64.7999",
    "v  0.0000 293.0000 74.2999",
    "v  56.7999 270.1999 32.2000",
    "v  63.1000 290.6000 38.1999",
    "v  65.0000 270.0000 0.3999",
    "v  73.9000 291.2000 0.3999",
    "v  61.5000 308.2999 35.3000",
    "v  69.5999 309.7000 0.3999",
    "v  35.1999 308.8999 61.7999",
    "v  0.0000 311.3999 70.2999",
    "v  51.3000 351.7000 0.3999",
    "v  45.2999 350.3999 25.4998",
    "v  25.0000 350.7999 45.6000",
    "v  0.0000 352.6000 51.6000",
    "v  77.6999 172...2 997/2497/4042 ",
    "f 769/2284/4043 997/2497/4043 996/2498/4043 ",
    "f 769/2284/4027 996/2498/4027 998/2499/4027 ",
    "f 769/2284/4046 998/2499/4046 999/2500/4046 ",
    "f 769/2284/4029 999/2500/4029 1000/2501/4029 ",
    "f 769/2284/4027 1000/2501/4027 1001/2502/4027 ",
    "f 769/2284/4029 1001/2502/4029 1002/2503/4029 ",
    "f 769/2284/4029 1002/2503/4029 1004/2504/4029 ",
    "f 769/2284/4046 1004/2504/4046 1003/2505/4046 ",
    "f 769/2284/4027 1003/2505/4027 1010/2506/4027 ",
    "f 769/2284/4027 1010/2506/4027…
以上是使用 json 格式化在线工具格式化后的结果,看起来很清晰了吧!

关于 json ,可以有如下说明,摘自 这里 :

JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度,

那么,JSON到底是什么?

JSON就是一串字符串 只不过元素会使用特定的符号标注。

{} 双括号表示对象

[] 中括号表示数组

"" 双引号内是属性或值

: 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

所以 {"name": "Michael"} 可以理解为是一个包含name为Michael的对象

而[{"name": "Michael"},{"name": "Jerry"}]就表示包含两个对象的数组

当然了,你也可以使用{"name":["Michael","Jerry"]}来简化上面一部,这是一个拥有一个name数组的对象

ps:现在还有很多人存在一些误区,为什么{name:'json'}在检验时通过不了,

那是因为JSON官网最新规范规定

如果是字符串,那不管是键或值最好都用双引号引起来,所以上面的代码就是{"name":"json"}

不要反驳,官网就是这么定义的。



目录
相关文章
|
15天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
存储 缓存 安全
C++数组全解析:从基础知识到高级应用,领略数组的魅力与技巧
C++数组全解析:从基础知识到高级应用,领略数组的魅力与技巧
53 1
|
28天前
|
JSON JavaScript 前端开发
C++ 智能指针与 JSON 处理:高级编程技巧与常见问题解析
C++ 智能指针与 JSON 处理:高级编程技巧与常见问题解析
262 0
|
6天前
|
存储 索引 Python
深入解析NumPy数组的形状与重塑
【4月更文挑战第17天】本文深入解析了NumPy数组的形状和重塑。数组形状是表示数组维度和大小的元组,可通过`shape`属性获取。重塑允许改变数组形状而不改数据,需保证元素总数不变。`reshape`方法用于重塑,其中`-1`可让NumPy自动计算尺寸。注意重塑遵循元素总数相等、仅一次`-1`、内存存储顺序及返回新数组的原则。理解和掌握这些概念对高效使用NumPy处理多维数组至关重要。
|
11天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象(如列表、字典等)以及将Python对象转换为JSON格式的数据的方法。
27 0
|
28天前
|
JSON JavaScript 数据格式
【深入探究C++ JSON库】解析JSON元素的层级管理与遍历手段
【深入探究C++ JSON库】解析JSON元素的层级管理与遍历手段
85 2
|
29天前
|
存储 算法 Serverless
【软件设计师备考 专题 】数据结构深度解析:从数组到图
【软件设计师备考 专题 】数据结构深度解析:从数组到图
56 0
|
29天前
|
机器学习/深度学习 存储 Java
揭秘数组:数据结构的基石与代码实践解析
揭秘数组:数据结构的基石与代码实践解析
9 0
|
29天前
|
XML JSON API
深入解析C++ JSON库:nlohmann::json:: parse的内部机制与应用
深入解析C++ JSON库:nlohmann::json:: parse的内部机制与应用
47 0
|
1月前
|
JSON 数据格式
人脸检测解析json的工具类face_test
人脸检测解析json的工具类face_test
13 0

推荐镜像

更多