女王控的博客

Three.js练手测试

测试一

画 3 个带有反光的立方体

测试二

对 3 个带有反光的立方体做响应式处理,要求满足下面条件

  1. 窗口任意大小立方体不会被拉伸
  2. 不能出现明显的锯齿(块状化)
  3. 支持高分屏

测试三

绘制常见的图元

测试四

太阳,地球,月球模拟

测试五

实现坦克多视角切换

测试六

实现常见的不同材质

测试七

多个纹理加载

测试八

实现过滤和 mipmaps

测试九

重复,偏移,旋转,包裹一个纹理

测试十

创建环境光

测试十一

创建半球光

测试十二

创建方向光

测试十三

创建点光源

测试十四

创建聚光灯

测试十五

创建矩形区域光

测试十六

模拟实际的光照衰减

测试十七

实现透视摄像

测试十八

z 冲突实例

测试十九

实现正交摄像

测试二十

正交摄像模拟实现 2d canvas

测试二十一

假阴影贴图实现

测试二十二

定向光阴影

测试二十三

聚光灯阴影

测试二十四

点光源阴影

测试二十五

  1. 实现 2 种雾
  2. 是否受雾的影响参数

测试二十六

雾的各项参数

测试二十七

实现简单的渲染目标

测试二十八

创建一个使用 BufferGeometry 的方块

测试二十九

使用 BufferGeometry 方块的重复顶点数据索引化

测试三十

使用类型数组 TypedArrays 动态更新顶点数据的任何一部分

测试三十一

按需渲染(不使用 requestAnimationFrame)

测试三十二

canvas 截图:

  1. 截图前调用一次渲染代码
  2. 防止 canvas 被清空(即使使用 preserveDrawingBuffer: true 切换横竖屏、切换分辨率还是会清空)

这里使用方案一,方案二不推荐

测试三十三

canvas 获取键盘输入

测试三十四

透明化 canvas

测试三十五

大量对象的优化方案:合并几何体

优化前:

优化后:

测试三十六

优化对象的同时保持动画效果

测试三十七

离屏渲染画布

测试三十八

加载 .OBJ 文件

测试三十九

加载 .gltf 文件

测试四十

透明图片背景,使用 css

透明图片背景,使用 threejs 渲染,可被后期效果影响

测试四十一

立方体贴图实现天空盒

等距矩形贴图实现天空盒

测试四十二

绘制透明立方体

绘制透明相交平面

绘制草地

测试四十三

单画布多场景渲染

单画布多场景屏幕外渲染

测试四十四

射线追踪法拾取

基于 GPU 的拾取

测试四十五

后期处理

测试四十六

写一个基础的 shadertoy 容器

在上面的基础上支持从图片中读取纹理

使用上面的 shadertoy 纹理画立方体

测试四十七

对齐 HTML 元素到 3D 对象

在上面的基础上实现给谷歌地图添加标签

测试四十八

使用纹理索引来拾取和着色

测试四十九

用 canvas 动态纹理绘制立方体

利用以上方式绘制文本标签

测试五十

实现一个广告牌形式的文本标签(即这个文本标签始终面向用户)

绘制树木网络

绘制树木网络的立面

测试五十一

手动释放资源(需要明确指定)

自动释放资源

测试五十二

写一个简易版我的世界

// TODO threejs 练手测试

评论

阅读上一篇

编写高质量Python
2023-06-13 12:00:28

阅读下一篇

Rust练手测试
2023-03-17 23:05:48
0%