测试一
画 3 个带有反光的立方体
测试二
对 3 个带有反光的立方体做响应式处理,要求满足下面条件
- 窗口任意大小立方体不会被拉伸
- 不能出现明显的锯齿(块状化)
- 支持高分屏
测试三
绘制常见的图元
测试四
太阳,地球,月球模拟
测试五
实现坦克多视角切换
测试六
实现常见的不同材质
测试七
多个纹理加载
测试八
实现过滤和 mipmaps
测试九
重复,偏移,旋转,包裹一个纹理
测试十
创建环境光
测试十一
创建半球光
测试十二
创建方向光
测试十三
创建点光源
测试十四
创建聚光灯
测试十五
创建矩形区域光
测试十六
模拟实际的光照衰减
测试十七
实现透视摄像
测试十八
z 冲突实例
测试十九
实现正交摄像
测试二十
正交摄像模拟实现 2d canvas
测试二十一
假阴影贴图实现
测试二十二
定向光阴影
测试二十三
聚光灯阴影
测试二十四
点光源阴影
测试二十五
- 实现 2 种雾
- 是否受雾的影响参数
测试二十六
雾的各项参数
测试二十七
实现简单的渲染目标
测试二十八
创建一个使用 BufferGeometry 的方块
测试二十九
使用 BufferGeometry 方块的重复顶点数据索引化
测试三十
使用类型数组 TypedArrays 动态更新顶点数据的任何一部分
测试三十一
按需渲染(不使用 requestAnimationFrame)
测试三十二
canvas 截图:
- 截图前调用一次渲染代码
- 防止 canvas 被清空(即使使用
preserveDrawingBuffer: true
切换横竖屏、切换分辨率还是会清空)
这里使用方案一,方案二不推荐
测试三十三
canvas 获取键盘输入
测试三十四
透明化 canvas
测试三十五
大量对象的优化方案:合并几何体
优化前:
优化后:
测试三十六
优化对象的同时保持动画效果
测试三十七
离屏渲染画布
测试三十八
加载 .OBJ 文件
测试三十九
加载 .gltf 文件
测试四十
透明图片背景,使用 css
透明图片背景,使用 threejs 渲染,可被后期效果影响
测试四十一
立方体贴图实现天空盒
等距矩形贴图实现天空盒
测试四十二
绘制透明立方体
绘制透明相交平面
绘制草地
测试四十三
单画布多场景渲染
单画布多场景屏幕外渲染
测试四十四
射线追踪法拾取
基于 GPU 的拾取
测试四十五
后期处理
测试四十六
写一个基础的 shadertoy 容器
在上面的基础上支持从图片中读取纹理
使用上面的 shadertoy 纹理画立方体
测试四十七
对齐 HTML 元素到 3D 对象
在上面的基础上实现给谷歌地图添加标签
测试四十八
使用纹理索引来拾取和着色
测试四十九
用 canvas 动态纹理绘制立方体
利用以上方式绘制文本标签
测试五十
实现一个广告牌形式的文本标签(即这个文本标签始终面向用户)
绘制树木网络
绘制树木网络的立面
测试五十一
手动释放资源(需要明确指定)
自动释放资源
测试五十二
写一个简易版我的世界
// TODO threejs 练手测试