webgl
文章平均质量分 80
商域无疆
热爱,笨鸟
展开
-
webgl 关键帧动画-运动的小机器人
以下是源码:原创 2014-09-04 14:51:01 · 4193 阅读 · 0 评论 -
webgl photo box
以下是源码:原创 2014-08-26 13:53:16 · 1262 阅读 · 0 评论 -
three.js 源码注释(二)Math/color.js
以下代码是THREE.JS 源码文件中Math/color.js文件的注释.原创 2014-09-11 15:17:23 · 3442 阅读 · 0 评论 -
three.js 源码注释(三)Math/Vector2.js
商域无疆 (http://blog.csdn.net/omni360/)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句:商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。以下代码是THREE.JS 源码文件中Math/Vector原创 2014-09-12 23:32:40 · 4898 阅读 · 0 评论 -
three.js 源码注释(四)Math/Vector3.js
// File:src/math/Vector3.js/** * @author mrdoob / http://mrdoob.com/ * @author *kile / http://kile.stravaganza.org/ * @author philogb / http://blog.thejit.org/ * @author mikael emtinger / http:/原创 2014-09-17 13:23:03 · 13665 阅读 · 1 评论 -
three.js 源码注释(五)Math/Vector4.js
商域无疆 (http://blog.csdn.net/omni360/)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句:商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。以下代码是THREE.JS 源码文件中Math/Vector原创 2014-10-10 09:35:15 · 2528 阅读 · 2 评论 -
three.js 源码注释(八)Math/Matrix3.js
three.js 源码注释(八)Math/Matrix3.js///Matrix3对象的构造函数.用来创建一个3x3矩阵.Matrix3对象的功能函数采用///定义构造的函数原型对象来实现,实际就是一个数组.////// 用法: var m = new Matrix3(11, 12, 13, 21, 22, 23, 31, 32, 33)/// 创建一个3x3的矩阵,其实就是一个长度为9的数组,将参数(11, 12, 13, 21, 22, 23, 31, 32, 33)传递给数组用来初始化.原创 2014-10-27 16:58:27 · 2748 阅读 · 0 评论 -
three.js 源码注释(六)Math/Quaternion.js
商域无疆 (http://blog.csdn.net/omni360/)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句:商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。以下代码是THREE.JS 源码文件中Math/Vect原创 2014-10-10 15:52:21 · 4317 阅读 · 0 评论 -
three.js 源码注释(七)Math/Euler.js
three.js 源码注释(七)Math/Euler.js/*///Euler对象的构造函数.用来创建一个欧拉角的对象.Euler对象的功能函数采用///定义构造的函数原型对象来实现.////// 用法: var euler = new Euler(5,3,2,'XYZ')/// 创建一个绕某轴旋转5度,绕y轴旋转某度,绕某轴旋转2度,旋转顺序为'XYZ'.有了旋转顺序才能确定每个x,y,z轴分别旋转多少度./// NOTE: 参数x,y,z代表3个轴的旋转角度,具体哪个轴旋转多少度,需要后原创 2014-10-27 12:38:01 · 2358 阅读 · 0 评论 -
three.js 源码注释(十)Math/Line3.js
Line3对象的构造函数.用来创建一个三维线段对象.Line3对象的功能函数采用定义构造的函数原型对象来实现. 用法: var start = new Vector3(0,0,0),end = new Vector3(1,1,1); var line = new Line3(start,end); 创建一个起始点start为0,0,0,结束点end为1,1,1的线段.<summary>Vector3</summary><param name ="start" type="Vector3">起始点原创 2014-11-14 14:11:52 · 1896 阅读 · 0 评论 -
three.js 源码注释(九)Math/Matrix4.js
Matrix4对象的构造函数.用来创建一个4x4矩阵.Matrix4对象的功能函数采用定义构造的函数原型对象来实现,实际就是一个数组. 用法: var m = new Matrix4(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44) 创建一个4x4的矩阵,其实就是一个长度为9的数组,将参数(11, 12, 13, 21, 22, 23, 31, 32, 33, 41, 42, 43, 44)传递给数组用来初始化. 一个变原创 2014-11-14 10:26:31 · 6104 阅读 · 0 评论 -
three.js 源码注释(十一)Math/Box2.js
Box2对象的构造函数.用来在二维空间内创建一个二维矩形边界边界对象.Box2对象的功能函数采用定义构造的函数原型对象来实现. NOTE:如果没有参数min,max将二维矩形边界初始化为Infinity,无穷大three.js 源码注释(十一)Math/Box2.js 用法: var min = new Vector2(0,0),max = new Vector2(1,1); var box = new Box2(min,max);通过两个Vector2(二维向量)min,max创建一个二维矩原创 2014-11-15 15:02:07 · 1970 阅读 · 0 评论 -
three.js 源码注释(十二)Math/Box3.js
Box3对象的构造函数.用来在三维空间内创建一个立方体边界对象.Box3对象的功能函数采用定义构造的函数原型对象来实现. NOTE:如果没有参数min,max将立方体边界初始化为Infinity,无穷大 用法: var min = new Vector3(0,0,0),max = new Vector3(1,1,1); var box = new Box3(min,max); 通过两个Vector3(三维向量)min,max创建一个立方体边界对象.<summary>Box3</summary>原创 2014-11-16 15:17:06 · 3103 阅读 · 1 评论 -
three.js 源码注释(十三)Math/Ray.js
three.js 源码注释(十三)Math/Ray.js今天把Three.js的Ray类注释完了,非常重要的一个类.在场景中拾取对象,经常会用到这个类.Ray对象的构造函数.用来创建一个三维空间里的射线对象.Ray对象的功能函数采用定义构造的函数原型对象来实现,ray主要是用来进行碰撞检测,在选择场景中的对象时经常会用到,判断当前鼠标是否与对象重合用来选择对象. 用法: var origin = new Vector3(1,1,1),direction = new Vector3(9,9,9)原创 2014-11-17 15:35:05 · 2746 阅读 · 0 评论 -
three.js 源码注释(十四)Math/Sphere.js
Sphere对象的构造函数.用来在三维空间内创建一个球体对象.Sphere对象的功能函数采用定义构造的函数原型对象来实现. 用法: var center = new Vector3(0,0,0),radius = 5; var sphere = new Sphere(center,radius);创建一个圆心是0,0,0半径是5的球体.<summary>Sphere</summary><param name ="center" type="Vector3">中心点坐标值</param><pa原创 2014-11-18 10:29:58 · 2062 阅读 · 0 评论 -
three.js 源码注释(十五)Math/Plane.js
以下代码是THREE.JS 源码文件中Math/Plane.js文件的注释.Plane对象的构造函数.用来在三维空间内创建一个法线向量为normal,从原点到平面的距离为constant的无限延展的二维平面对象.Plane对象的功能函数采用定义构造的函数原型对象来实现. 用法: var normal = new Vector3(0,0,0),constant = 5.5; var Plane = new Plane(normal,constant);创建一个法线向量是0,0,0原点到平面的距离是5原创 2014-11-19 14:41:12 · 3190 阅读 · 0 评论 -
three.js 源码注释(十六)Math/Frustum.js
Frustum对象的构造函数.用来在三维空间内创建一个平截头体对象.Frustum对象的功能函数采用定义构造的函数原型对象来实现,平截头体由6个平面对象构成.<summary>Frustum</summary><param name ="p0" type="THREE.Plane">组成平截头体的面p0</param><param name ="p1" type="THREE.Plane">组成平截头体的面p1</param><param name ="p2" type="THREE.Plane"原创 2014-11-20 12:44:40 · 2472 阅读 · 0 评论 -
three.js 源码注释(十七)Math/Math.js
three.js 源码注释(十七)Math/Math.jsMath对象的构造函数.包含了一些常用的数学方法.generateUUID()方法用来生成一个36位的uuid通用唯一识别码 (Universally Unique Identifier).clamp()方法用来限制x的值在a和b之间, 如果x小于a,返回a。 如果x大于b,返回b,否则返回x.sign()方法返回参数x的符号,如果大于0返回1,如果小于0返回-1,否则返回0.isPowerOfTwo()方法是否2的幂,如果该值是2的幂,原创 2014-11-20 12:47:55 · 3516 阅读 · 0 评论 -
three.js 源码注释(二十三)Core/Face3.js
Face3对象的构造函数.用来在三维空间内通过参数a,b,c, normal, color, materialIndex创建一个三角面对象.Face3对象的功能函数采用定义构造的函数原型对象来实现. 用法: var a=0,b=1,c=2; var normal = new THREE.Vector3( 0, 1, 0 ); var color = new THREE.Color( 0xffaa00 ); var face = new THREE.Face3( a, b, c, normal, col原创 2014-11-25 17:25:56 · 3283 阅读 · 0 评论 -
three.js 源码注释(二十四)Core/Face4.js
Face3对象的构造函数.用来在四维空间内通过参数a,b,c,d, normal, color, materialIndex创建一个四角面对象.Face4对象的功能函数采用定义构造的函数原型对象来实现. NOTE:Face4方法已经删除,使用Face3替代,这里保留为了向下兼容. 用法: var a=0,b=1,c=2,d=3;var normal = new THREE.Vector3( 0, 1, 0 ); var color = new THREE.Color( 0xffaa00 ); va原创 2014-11-25 17:28:26 · 2054 阅读 · 0 评论 -
three.js 源码注释(十九)Math/Spline.js
Spline对象的构造函数.用来在三维空间内通过参数points(Vector3数组)创建一个样条曲线对象.定义:样条曲线是经过一系列给定点的光滑曲线。最初,样条曲线都是借助于物理样条得到的,放样员把富有弹性的细木条(或有机玻璃条), 用压铁固定在曲线应该通过的给定型值点处,样条做自然弯曲所绘制出来的曲线就是样条曲线。样条曲线不仅通过各有序型值点, 并且在各型值点处的一阶和二阶导数连续,也即该曲线具有连续的、曲率变化均匀的特点。 NOTE:参考百度百科http://baike.baidu.c原创 2014-11-22 19:20:43 · 1659 阅读 · 0 评论 -
three.js 源码注释(二十六)Core/BufferAttribute.js
BufferAttribute类用来存储于bufferGeometry相关联的属性数据,更多细节可以参考官方的样例http://threejs.org/ 这个类用来存储内置属性例如顶点位置,法线,颜色,等,但也可以用于存储bufferGeometry对象的自定义属性.BufferAttribute对象的功能函数采用定义构造的函数原型对象来实现. TODO:增加一个基类setAttr(index,item,itemSize)根据跟多不同的属性相长度设置属性原创 2014-11-28 14:56:12 · 2984 阅读 · 0 评论 -
three.js 源码注释(三十二)Scenes/FogExp2.js
FogExp2对象的构造函数.用来在场景内创建指数雾效,指数雾效是雾效浓度递增根据指数(参数density)设定,Fog对象的功能函数采用定义构造的函数原型对象来实现. 用法: var fog = new THREE.FogExp2(THREE.colorKeywords.cyan,0.3); 在场景中添加指数雾效,雾效递增的质素是0.3,雾效的颜色是cyan,<summary>FogExp2</summary><param name ="color" type="THREE.Color">雾原创 2014-11-28 15:11:49 · 1519 阅读 · 0 评论 -
three.js 源码注释(二十七)Core/BufferGeometry.js
BufferGeometry类用来和BufferAttribute配合使用,更多细节可以参考官方的样例http://threejs.org/ 这个类是另一种创建几何体对象的方式,它将所有的数据包括顶点位置,法线,面,颜色,uv和其它的自定义属性存在缓冲区, 这样可以减少GPU的负荷,BufferGeometry同样也比Geometry对象复杂,增加了使用的难度,这里的属性都是存放在数组中, 比如顶点位置不是Vector3对象,颜色也不是color对象,而是数组.需要访问这些属性,需要从属性缓冲区中读原原创 2014-11-28 14:57:48 · 10277 阅读 · 0 评论 -
three.js 源码注释(十八)Math/Triangle.js
以下代码是THREE.JS 源码文件中Math/Triangle.js文件的注释.barycoordFromPoint方法通过计算返回参数a,b,c所组成的三角形所在的平面上任意点(参数point)所表示三角形顶点的加权平均值,这个权值就是重心坐标. NOTE:重心坐标的定义 三角形所在平面的任意点都能表示为顶点的加权平均值,这个权就叫做重心坐标。从重心坐标到标准坐标的转换为(无论2D或3D,连4D、5D也是这样): (b1,b2,b3) b1v1+b2v2+b3v3 式中:b1,b2,b3原创 2014-11-21 21:19:09 · 1713 阅读 · 0 评论 -
three.js 源码注释(二十)Core/Clock.js
Clock对象的构造函数.用来记录时间.Clock对象的功能函数采用定义构造的函数原型对象来实现. 用法: var clock = new Clock(true) 创建时钟用来记录时间,传递参数true,设置自动开始记录. NOTE: 参数(autostart)为true,自动开始记录,省略该参数也自动开始记录时间,设置为false,穿件时间,但不开始记录.以毫秒为单位,从 1 January 1970 00:00:00 UTC开始.原创 2014-11-23 11:25:10 · 3829 阅读 · 0 评论 -
three.js 源码注释(二十八)Cameras/Camera.js
Camera是相机对象的抽象基类,当创建相机时都从这个类继承.Camera对象的功能函数采用定义构造的函数原型对象来实现.THREE.Camera = function () { THREE.Object3D.call( this ); //调用Object3D对象的call方法,将原本属于Object3D的方法交给当前对象Camera来使用. this.matrixWorldInverse = new THREE.Matrix4(); //为相机设置属性matrixWorldInverse,这原创 2014-11-28 15:00:46 · 1993 阅读 · 0 评论 -
three.js 源码注释(二十九)Cameras/OrthographicCamera.js
OrthographicCamera方法根据 left, right, top, bottom, near, far 生成正交投影相机.OrthographicCamera对象的功能函数采用 定义构造的函数原型对象来实现.<summary>OrthographicCamera</summary><param name ="left" type="Number">指明相对于垂直平面的左侧坐标位置</param><param name ="right" type="Number">指明相对于垂直平面的原创 2014-11-28 15:04:29 · 2518 阅读 · 0 评论 -
three.js 源码注释(三十三)Scenes/Scene.js
Scene是场景对象,所有的对象,灯光,动画,骨骼等都需要放置在场景内.Scene对象的功能函数采用定义构造的函数原型对象来实现.原创 2014-11-28 16:06:53 · 2297 阅读 · 0 评论 -
three.js 源码注释(三十)Cameras/PerspectiveCamera.js
PerspectiveCamera方法根据 fov, aspect, near, far 生成透视投影相机.PerspectiveCamera对象的功能函数采用 定义构造的函数原型对象来实现.<summary>PerspectiveCamera</summary><param name ="fov" type="Number">指明相机的可视角度,可选参数,如果未指定,初始化为50</param><param name ="aspect" type="Number">指明相机可视范围的长宽比,可选原创 2014-11-28 15:05:32 · 3812 阅读 · 0 评论 -
three.js 源码注释(三十一)Scenes/Fog.js
Fog对象的构造函数.用来在场景内创建线性雾效,线性雾效就是从雾效的起始点参数near,到结束点参数far,雾效强度线性递增,Fog对象的功能函数采用定义构造的函数原型对象来实现. 用法: var fog = new THREE.Fog(THREE.colorKeywords.cyan,2,500); 从相机的起始处长度为2开始,500结束的区域在场景中添加雾效,雾效的颜色是cyan,<summary>Fog</summary><param name ="color" type="THREE.原创 2014-11-28 15:08:23 · 2917 阅读 · 0 评论 -
three.js 源码注释(二十一)Core/EventDispatcher.js
EventDispatcher可调度事件的所有运行时类的基类.用来管理侦听函数,被嵌入Object3D对象之上.当Object3D发生事件时,这个方法就会自动被触发.可以通过调用调度该事件的对象的 addEventListener() 方法来注册函数以处理运行时事件。原创 2014-11-24 12:44:48 · 2975 阅读 · 0 评论 -
three.js 源码注释(二十二)Core/Object3D.js
以下代码是THREE.JS 源码文件中Core/Object3D.js文件的注释.Object3D是场景中图形对象的基类.Object3D对象的功能函数采用定义构造的函数原型对象来实现.原创 2014-11-24 15:23:45 · 7172 阅读 · 0 评论 -
three.js 源码注释(二十五)Core/Geometry.js
Geometry是场景中由顶点和三角面构成的几何体对象的基类,保存描述几何体所有必要的数据.Geometry对象的功能函数采用定义构造的函数原型对象来实现. 用法:var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3( -10, 10, 0 ), new THREE.Vector3( -10, -10, 0 ), new THREE.Vector3( 10, -10, 0 )原创 2014-11-25 17:30:21 · 4232 阅读 · 0 评论 -
three.js 源码注释(六十八)extras/geometries/BoxGeometry.js
BoxGeometry用来在三维空间内创建一个立方体盒子对象. 用法: var geometry = new THREE.BoxGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry,material); scene.add(cube);<summary>BoxGeometry</summary><p原创 2015-01-26 14:48:20 · 2379 阅读 · 0 评论 -
OpenGL ES2.0 生成Mipmap纹理(2012-08-02)
转载请保留出处:http://xiaxveliang.blog.163.com/blog/static/297080342013467552467/ 在开发一些相对较大的场景时,如:一片铺满相同草地纹理的丘陵地形,如果不采用一些技术手段,就会出现远处的丘陵较近处的丘陵相比更加的清晰的视觉效果,而这种效果与真实世界中近处的物体清晰远处物体模糊的效果是相违背的。这是因为采用“透视投影”转载 2014-12-01 20:30:01 · 1324 阅读 · 0 评论 -
three.js 源码注释(七十二)extras/geometries/PlaneGeometry.js
PlaneGeometry用来在三维空间内创建一个平面对象. 用法: var geometry = new THREE.PlaneGeometry(5,5,20,32); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var plane = new THREE.Mesh(geometry,material); scene.add(plane);<summary>PlaneGeometry</su原创 2015-01-27 22:04:49 · 2624 阅读 · 0 评论 -
three.js 源码注释(七十一)extras/geometries/CylinderGeometry.js
CylinderGeometry用来在三维空间内创建一个圆柱,圆锥,圆桶对象. NOTE: 和CircleGeometry对象一样,如果我们把参数radialSeagments的值设置成4,是不是就变成了棱台了,设置成3,并且radiusTop设置成0,是不是就是金字塔了???? 用法: var geometry = new THREE.CircleGeometry(5,5,20,32); var material = new THREE.MeshBasicMaterial({color:原创 2015-01-27 21:55:21 · 2764 阅读 · 0 评论 -
three.js 源码注释(三十四)Texture/Texture.js
Texture类用来为面创建一个反射折射或者纹理贴图对象 这个类是最重要的属性是image,这是一个JavaScript Image类型对象。传入的第一个参数就是该对象,后面的对象都是可选的,如果缺省就会填充默认值,而且往往都是填充默认值。属性magFileter和minFileter指定纹理在放大和缩小时的过滤方式:最临近点、双线性内插等。从url中生成一个texture,需要调用Three.ImageUtils.loadTexture(paras),该函数返回一个texture类型对象。在函数原创 2014-12-04 14:57:44 · 4085 阅读 · 1 评论 -
three.js 源码注释(三十七)Texture/CompressedTexture.js
Texture类用来为面创建一个压缩的反射折射或者纹理贴图对象,和THREE.Texture类不同的是,图像参数是mipmaps图像, 这个类是最重要的属性是image,这是一个JavaScript Image类型对象。传入的第一个参数就是该对象,后面的对象都是可选的,如果缺省就会填充默认值,而且往往都是填充默认值。属性magFileter和minFileter指定纹理在放大和缩小时的过滤方式:最临近点、双线性内插等。从url中生成一个texture,需要调用Three.ImageUtils.loa原创 2014-12-04 15:04:37 · 2000 阅读 · 0 评论