- 博客(16)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 辐射度量学
在现实世界中，人眼能看到物体的颜色，都是因为光线(太阳，灯光等。。。)从光源出来，直接或间接经过过次弹射进入人眼，例如一束白光从光源出发，射向一个物体，如果这个物体吸收了出红色以外波长的颜色，进入人眼后，人看到的就是红色。因此，我们需要一个的物理量去描述光线辐射度量学辐射度量学就是对光照度一套测量系统以及单位，可以准确的描述光线的物理性质，其中有几个重要的概念需要明白，分别为：辐射能量(Radiant energy)，辐射通量(Radiant flux)， 辐射强度(Radiant itensity)，
2021-06-26 19:01:56
2776
原创 Three.js实现深度拾取功能
threejs自带的接口实现坐标拾取一般使用射线法，该方法属于几何计算，通过使用Ray创建射线与geometry通过某个加速结构(bvh或者kdTree)，最终与确定的一个三角形进行相交测试这种方法有如下优点：计算结果精确，由于属于几何计算，射线拾取的精度非常高返回的信息详细，不仅可以计算当前拾取点的坐标，也可以返回当前三角形所属于的mesh，当前点的uv等…。。。。。同样精度高带来的另一个问题便是性能消耗大，如果遇到稍微复杂的场景，整个计算过程将十分耗时，鼠标移动过程中的坐标拾取更是无法做到，
2021-06-24 22:16:33
2148
1
原创 立体角的概念
在谈立体角之前，先看看二维对于弧度的定义：弧长等于半径的弧，其所对的圆心角为1弧度。理解为弧长与半径的比，即如果这段弧的长度 = 半径，则对应的角度为1弧度。公式如下：二维的弧度拓展到三维则是立体角，公式如下：dAdAdA为球面上的面积，r为球半径，因此根据球的表面积公式s = 4πr² 可知，对于整个球面的立体角为4π立体角的推导：dAdAdA表示上图中的单位球面积，根据微分的思想，这里可以将这块区域近似为一块矩形区域，根据矩形的面积 S=W∗HS = W * HS=W∗H 可知，rdθ
2021-06-24 22:12:45
7097
1
原创 使用threejs实现模型爆炸效果
使用threejs实现模型爆炸效果这个效果是以mesh为单位进行位置偏移，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>modelLoader</title><
2018-11-28 15:59:44
14692
32
原创 Sprite在视野中保持大小不变
当前threejs版本为：99threejs的SpriteMaterial新增属性sizeAttenuation，文档上的解释是Whether the size of the sprite is attenuated by the camera depth. (Perspective camera only.) Default is true.，呈现的效果就是，无论鼠标放大还是缩小，sprite...
2018-11-19 16:26:43
4100
原创 HTTP协议(一)
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，是用于从万维网（WWW）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML文件，图片文件，查询结果等）。HTTP协议的特点简单快速： 客户想服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系
2017-10-24 16:34:40
249
原创 Webgl2 Uniform Block
在WebGL2中新增了Uniform Block写法 着色器与应用程序之间，或者着色器各阶段之间共享的变量可组织为变量块(Uniform Block)的形式，并且有时候必须采取这种形式。Uniform变量可以使用Uniform块，输入输出变量可以使用in和out块，着色器的存储缓存可以使用buffer blockUniform Block的写法//采用下面的写法，访问块成员是使用v1、v2
2017-09-08 17:41:31
862
原创 Ubuntu下安装Express框架
之前在照着一本书上安装express框架，一直没成功，简直坑爹，最后自己弄好了，记录一番： 1：首先安装Express框架，在终端输入如下命令： npm install express -g 2：安装Express应用生成器 express应用生成器会帮助我们生成express相应的目录结构，输入如下命令： npm install express-generator -g 3：创建应用：
2017-07-25 23:29:42
2659
原创 仿GooGleEarth瓦片地图（基于THREEJS）
历时4个月，整个大三下学期一直在做这个瓦片地图，就想着在自己找工作前能有个像样的作品（另外，跪地打滚求工作啊！！/(ㄒoㄒ)/~~）不过，最近终于是完成了，哈哈！^_^里面涉及到的内容比较多，因此专门分为一类，好好说说里面涉及到的内容。涉及到的知识点还比较多，不过，会者不难，难者不会，弄清楚之后，其实也就那么回事。里面如果有些知识点有错误，可千万别打我/(ㄒoㄒ)/，希望大家能给我指出，谢谢！:-D
2017-06-05 23:17:59
4046
4
原创 使用Controls进行zoom事件时，不改变指定物体在视野中的大小（一）
代码：<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - transform controls</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-
2017-04-26 17:02:37
1181
原创 Threejs根据鼠标动态改变controls的target（缩放中心点）
好久没更新博客了，记下一笔 最近看到很多公司的产品的鼠标交互部分，controls的缩放中心不是固定的，比如这个，这个鼠标的交互方式跟我们平常用到的OrbitControls或者TrackballControls都不一样，特别是缩放时，它的target不是固定的，最近研究了一下： 废话不多说，先上图： 普通的缩放操作 优化后的缩放操作 代
2017-04-26 16:32:36
11856
5
原创 一、WebGL屏幕坐标转世界坐标
最近在研究一位大神用webgl写的三维地图引擎，在研究源码的过程中学到了很多以前没注意到的东西，特地在此记录一番 平常WebGL渲染的时候，如果顺过来看的话，坐标转换会经过如下几个过程 局部坐标=>世界坐标=>观察坐标=>裁剪坐标=>标准设备坐标=>屏幕坐标 就是我们平常说的MVP矩阵，对于这些细节如果还不清楚的话，可以看看的这篇文章，讲的很清楚 这里就不多说了，如果哪天需要
2017-03-10 20:00:01
5397
1
原创 使用shaderMaterial实现平行光下的高光效果
代码如下：“` 无标题文档 varying vec2 vUv; varying vec3 vNormal; void main(){ vUv = uv; vNormal = normal; vec4 mvPosition = mod
2017-02-25 20:18:03
1105
原创 使用shaderMaterial实现环境光与漫反射光
上次咱们使用shaderMaterial实现纹理贴图，之后进一步拓展，在之前的基础上加上平行光与漫反射光的效果。 代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt
2017-02-24 20:31:27
2704
原创 使用Threejs和shaderMaterial给plane贴图
搞了一段时间的threejs，最近想慢慢学习threejs中的shader用法，最然threejs中有TextureLoader很简单的就可以进行贴图，不过为了学习shader嘛，就写写喽！，俺也是初学，写的烂还望包容哈 1、使用shader给plane进行贴图 最终效果如下图所示： 完整代码如下：<!DOCTYPE html PUBLIC
2017-02-20 23:02:05
6895
原创 webGL法线贴图原理
法线贴图 1、一般的法线贴图颜色都为下面这种 2、对应的普通的贴图为 法线贴图使用使用颜色来记录当前点的法向量，法线贴图的默认坐标是平行于XY平面的，其对应的被贴图的平面也是平行于XY平面的，因此，在进行渲染时，如果该点的法向量是平行于Z轴，即法向量为（0，0，1），此时对应的颜色为蓝色 当然，若被贴图的物体不是平行于XY平面时，例如当向一个模型进行贴图时，模型有很多三角面，
2017-02-17 20:44:50
1593
空空如也
请问最后的输出结果为啥是undefined啊？？
2017-03-05
3D游戏中的碰撞检测以及爬楼梯的算法
2016-05-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人