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来取点,调整代码如下: