《three开发指南》阅读笔记——第八章

1、对象组合

        A、取消github的注释”scene.add(bboxMesh)”,本地报错:

        看github的setFromObject有使用node.geometry.vertices,推测其node类型为Geometry,本地项目的node类型为BufferGeometry,调整下setFromObject中使用到Geometry.vertices的代码:

        刷新后,bboxMesh的内容绘制出来了。


2、将多个网格合成一个网格

        github用Geometry.merge实现合并,之前都是用BufferGeometry替换Geometry,看官网BufferGeometry没有和Geometry.merge相近的方法。看别人的合并文章A,用BufferGeometryUtils.mergeBufferGeometries实现,看官网BufferGeometryUtils没有mergeBufferGeometries方法,感觉用mergeGeometries替换。将BufferGeometryUtils引入,位置”three/addons/utils/BufferGeometryUtils.js”,调整代码:

        刷新页面报错:

        比对github代码,少了cubeMesh.matrix的处理,将”cubes.push(cubeMesh)”改成”cubes.push(cubeMesh.matrix)”,刷新页面还是有报错。看文章A的实现,”cubes.push(cubeMesh)”改成”cubes.push(cubeMesh.geometry.applyMatrix4(cubeMesh.matrix))”,没有问题了。


3、保存和加载几何体

        A、多次按保存和加载按钮,发现加载出来的图形和原图形不像,通过调整相机的位置,发现加载出来的图像与相机位置在x轴、y轴位0处渲染的图形相近。

        B、书籍提到要用GeometryExporter.parse去得到json数据,官网没有GeometryExporter,看github转json直接用Mesh.toJSON就可以了。

        C、书籍将json数据转成Geometry,要用JSONLoader.parse,github用ObjectLoader.parse可以将json数据转为Mesh。


4、保存和加载场景

        A、书籍和github使用SceneExporter导出场景,用SceneLoader导入场景。官网没有SceneExporter和SceneLoader。
        Scene有方法toJSON将场景导出为json数据。可以用ObjectLoader.parse转换数据A,Scene继承Object3D,使用Scene.add将数据加入场景,根据Object3D.add的特性,不用担心Scene.add(scene)渲染有问题。代码调整如下:


5、在Blender里加载和导出模型

        B、书籍和github使用JSONLoader.load加载文件A,看文件A的格式像JSON,打算读取文件而后用ObjectLoader.parse处理,尝试后,页面报错。感觉是文件A的内容和Mesh.toJSON的内容相差大。
        文件A有vertices、faces、uvs和normals等内容,打算用BufferGeometry看能不能将其绘制出来,看文件A的materials实在看不出其使用材质,打算直接用MeshLambertMaterial。将BufferGeometry渲染出来,效果如下:


6、OBJ和MTL格式

        A、官网没有书籍提到的OBJMTLLoder,看别人实现加载OBJ和MTL,分别用OBJLoader和MTLLoader加载。调整代码:

        刷新后,发现只有身子绘制了出来,翅膀没有。看github的代码对翅膀做处理,加上

        发现翅膀还是绘制不出来。用blender加载bufferfly.obj,发现整只蝴蝶是绘制出来的

        没有将mtl文件加载进入,再想怎么弄,点击纹理绘制时,发现blender的绘制变成这样了:

        虽然不知道发生了什么,感觉blender把mtl文件加载进来了。根据上图,感觉mtl文件内使用了图片,查看mtl内容:

        将mtl提到的图片放入与mtl一个文件夹下,刷新页面后,发现翅膀绘制出来了。


7、加载Collada模型

        A、官网查询ColladaLoader,发现没有结果,以为ColladaLoader被移除。看网上没有其被移除的说法,翻看node_modules的three,发现ColladaLoader还有。
        按照github敲代码,本地报错:

        将其所需的文件放入对应位置后,没有报错了。

        B、本地项目报警:

        有说法是要用glTF替换。


8、加载STL、CTM和VTK模型

        A、在官网和node_modules文件里没有找到CTMLoader文件。

        B、加载VTK模型,给模型赋予材质MeshNormalMaterial、MeshLambertMaterial、MeshPhongMaterial,绘制的物体颜色为黑色。使用MeshBasicMaterial,则正常绘制。
        以为是SpotLight的位置不对,加上立方体,发现MeshNormalMaterial和MeshLambertMaterial都可以正常绘制。
        看文章A的说法是模型法向量不对,需要更新,参照对方调整代码:

        模型没有绘制出来,控制台报错:

        猜测BufferGeometry.normalizeNormals执行的前提是BufferGeometry的attributes.normal有内容。根据打印信息模型返回的BufferGeometry的attributes只有position。将BufferGeometry.normalizeNormals执行去掉,刷新页面,发现对于之前提到不能正常绘制的材质都可以正常绘制了。


9、展示蛋白质数据银行中的蛋白质

        A、根据打印信息,发现PDBLoader.load回调函数的返回信息都放入一个对象内:

        存储原子信息的类型是BufferGeometry,调整绘制原子的代码如下:

        B、书籍和github使用到SplineCurve3,根据40小点A部分调整代码:

        获取一个点要通过points.getX(i)、points.getY(i)、points.getZ(i),感觉代码写的多,尝试调用points.get(i)是否能得到对应的点,发现会报points.get不存在。
        Points的类型是BufferAttribute,虽然BufferAttribute没有限制itemSize的值,根据官网BufferAttribute的方法最大只能获取第四维的值,itemSize的值不应该大于4。仔细查看BufferAttribute的属性和方法,感觉没有提供获取一个矢量的方法,只能自己封装:

        后面发现,对于可以通过Vector2、Verctor3、Verctor4的fromBufferAttribute来取点,调整代码如下:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容