持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
学习链接
Threejs 官网的案例
- 主要学习内容
- 模型纹理 - 如何给模型添加纹理。
- 加载模型 - 处理图片。
three.js examples (threejs.org)
简介
学习内容来源，Threejs官网案例，
- 可以在场景中移动，
- 有碰撞检测系统，
- 点击屏幕，锁定视角，可以跟随鼠标左右移动，
- 在场景中点击，可以发射小球，小球也带有碰撞检测功能。
- 按WASD，可以实现移动
整个场景的基本交互功能已经有了，一个场景，一些交互！而且模型细节也很到位！
代码细节
其他代码保持不动，修改的位置主要有两点，
-
helper.visible = true, 这样我们就能看出，碰撞检测是怎么检测的了。。
-
修改模型路径，用我们自己的模型，碰撞检测的模板就出来了！！
-
-
设置为true的效果，这里的黄色的线就是各个位置的分界线！
模型修改
整个案例当作模板用，这里主要修改一下模型。。
新建一个平面
在Blender中打开案例的模型
新建一个平面，试试灵不灵。。
导出为gltf格式，保存到threejs官网源码 模型的文件夹下。。
效果如下！可以看到，我们的模型，成功运行在场景里了！
修改材质
可以看出案例给出的模型，材质平铺的很均匀
Blender中点击UV Editing面板 - 查看UV
可以看到整个纹理都是通过一张贴图，然后平铺而成的。这里的重点就是各个位置的比例关系，平铺后，每个部分都是一样的大小，需要对模型进行UV展开
我们新建几个模型，使用和案例模型同样的材质。。
把模型合并到一个图层，进入编辑模式，按U，选中Smart UV Project，智能展开。
展开后的结果
我们把图形整体放大（比贴图大，它会自动平铺的！） - 效果还不错。。
导出为gltf，把原本的模型文件覆盖掉，或者改个名字，设置 - helper.visible = false;
- 碰撞检测效果挺好，整体贴图感觉还行。。
模型下载
自己建的模型，可以运行，现在我们下载模型试试，提升视觉效果！
- 在Sketchfab上下载模型。
在Blender中打开，然后导出为gltf格式，程序中运行一下！
效果还不错，就是文件有点大。。有14M，，我们压缩一下模型文件。。
主要修改图片的大小
现在有1M了，可以接受。。（时间也好长。。）
加载时间比较
- 加载压缩后的时间 - 1M - 12.59s
- 加载模型源文件 - 14M - 12.61s
。。额。好像，，不压缩的还好一点，，场景图片还清楚一点。。。
官方案例执行时间 - 96KB - 1.47s
差距好大。。问题在哪里？？？？。。。
总结
主要是修改了模型文件，学习了如何通过一张贴图，平铺整个模型，还有下载后的模型，通过压缩图片，来改变模型的大小。执行时间倒是没有变快。。问题出在哪里，待研究。。
这个案例是在games之下的，可以快速加载场景，当作碰撞检测的模板使用，结合射线点击，即可实现简单的互动小游戏了，增加一些div，当作文字提示，还有音视频，案例就完整多了。。
祝大家夏至快乐！
