雾化是指距离我们较远的物体看不清晰的情况，比如模拟大雾环境，或者模拟水下环境时会用到。实现雾化的方式有很多种，我们这里使用的是线性雾化的方式；线性雾化线性雾化比较简单，我们算出每个像素点到摄像机的距离之后，就可以确定当前像素的雾化因子，用雾化因子就可以算出新的颜色值；示例点击这里：https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_11/Fog.htmlw 分量优化直接在顶点着色器中使用 gl_Positi...
接上一节，游戏控制首先要解决的就是碰撞检测了这里用到了学习笔记（三）射线检测的内容了以鸟为射线原点，向前、上、下分别发射3个射线，射线的长度较短大概为10~30.根据上一节场景的建设，我把y轴设为前进方向，z轴设为高度~如果射线返回有结果，那么说明鸟遇到了障碍物。代码如下： var raycaster1 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 1, 0), 0, 30)var raycaster2 = new THREE.Ray...
webgl介绍 WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。 WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏。 原生的WebGl比较复杂，主要通过对顶点着色器和片元着色器的操作，来实现渲染，但实现起来比较复杂，需要一定的数学基础，但更多的是需...
实现物体的旋转、跳动以及场景阴影的开启与优化 本程序将创建一个场景，并实现物体的动画效果 运行的结果如图：运行结果 完整代码如下：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Three.js</title><script src="../../../Import/three.js"></script><script src="../../../Import/stats.js"></script><script src="../../../Import/Setting.js"></script><script src="../../../Import/OrbitControls....
WebGL webgl 是针对 canvas 的 3D上下文，与其它Web技术不同，WebGL并非是W3C制定的标准，而是由 Khronos Group 制定的。 类型化数组 WebGL所涉及的复杂运算需要提前知道数值的精度，但是标准的 JS 无法支持这一诉求。 因此WebGL引入了类型化数组这一概念，类型化数组也是数组，与一般的数组没有什么区别，只不过这种数组中所有元素的值都被指定为某一特定类型。 类型化数组的核心在于 ArrayBuffer 这一数据类型，每个 ArrayBu...