three.js学习记录

受原神活动小游戏启示，从今天开始学习three.js，在此记录下学习的three.js的历程及demo

github地址：mengxinssfd/learning-threejs (github.com)

demo1: 旋转立方体

地址

three.js文档

做了什么

• 创建场景

  • 添加几何体

    • 添加材质

    • 设置所在位置

  • 添加坐标轴辅助器(用于简单模拟3个坐标轴的对象.红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.)

• 创建相机

  • 设置所在位置与角度

• 创建渲染器

  • 添加渲染器的 canvas 到 dom 上

  • 渲染场景和相机

• 让几何体动起来

• 屏幕大小变化时更新摄像机和渲染器

• 进入/退出全屏

总结

在此demo中学会了如何在three.js中创建场景、相机、几何体、渲染器以及让几何体动起来

demo2：轨道控制器

地址

创建轨道控制器: 可以使得相机围绕目标进行轨道运动。

例如3d角色扮演游戏中控制镜头角度以及缩放比例，并且只能绕着一个物体转动。

three.js文档

做了什么

在demo1的基础上移除几何体动画，并创建轨道控制器:

• 自动旋转

• 启用惯性

• 按Enter键恢复角度

• 方向键控制角度(暂时不起作用)

总结

明白了轨道控制器是什么及其使用方法

demo3：Clock对象

链接

使用CLock对象：该对象用于跟踪时间。如果performance.now可用，则 Clock 对象通过该方法实现，否则回落到使用略欠精准的Date.now来实现。
文档

做了什么

在demo1的基础上:

• 使用CLock对象

• 获取运行总时长

• 获取上次调用时间间隔

总结

明白了什么是CLock对象及其使用方法，Clock对象可以自己实现

demo4

链接
使用gsap动画库
gsap文档

做了什么

在demo1的基础上: 使用gsap动画库

总结

gsap动画库在 three.js 中的应用

demo5： 使用dat.gui库

链接

dat.gui文档

做了什么

在demo1的基础上: 使用dat.gui库，并通过该库可视化设置立方体的属性

总结

dat.gui库在 three.js 中的应用，该库可以用到其他项目中用作调试