- 浏览: 81076 次
- 性别:
文章分类
最新评论
-
wxw520zdh:
msdghs 写道楼主,我下载了demo跑不起来,是哪里没设置 ...
ThreeJS加载3D模型 -
msdghs:
楼主,我下载了demo跑不起来,是哪里没设置正确么;
ThreeJS加载3D模型
WebGL中使用三维/正交/右手坐标系
三维:三个坐标轴(x轴/y轴/z轴)
正交:两两垂直
右手:x轴拇指正方向/y轴食指正方向/z轴无名指正方向
3D坐标系中原点的位置:(Vx, Vy, Vz)=(0, 0, 0)
标量:有大小无方向(如:温度/质量/能量)
矢量:有大小有方向(如:力/加速度/速度)
矢量相加/矢量相减
矢量乘以标量等于一个新的矢量:KV = (KVx + KVy + KVz)
V = (Vx, Vy, Vz)
如果K为-1,则得到一个与原矢量大小相等/方向相反的新矢量
3D空间中两个矢量相乘有两种方式:
点积/标积(scalar product)
叉积(cross product)
点积
定义: u.v = |u||v|cos@
代数形式: U.V = UxVx + UyVy + UzVz (x/y/z两两相乘之和)
叉积
定义: W = U x V
代数定义: W = U x V = (UyVz - UzVy, UzVx - UxVz, UxVy - UyVx)
叉乘的结果是一个新矢量,这个新矢量具有以下属性:
|w| = |u||v|sin@
w正交与u和v
w与u和v符合右手定则
叉积不满足交换律,但有以下关系:
U x V = -V x U
2.齐次坐标:
齐次坐标:P = (Px, Py, Pz, Pw)
对于矢量,w = 0;当w # 0时,则齐次坐标指定一个点。
引进齐次坐标有什么必要,它有什么优点呢?
答:许多图形应用涉及到几何变换,主要包括平移、旋转、缩放。
以矩阵表达式来计算这些变换时,平移是矩阵相加,旋转和缩放则是矩阵相乘。
综合起来可以表示为p' = p*m1 + m2(m1旋转缩放矩阵, m2为平移矩阵, p为原向量 ,p'为变换后的向量)。
引入齐次坐标的目的主要是合并矩阵运算中的乘法和加法,表示为p' = p*M的形式。
即它提供了用矩阵运算把二维、三维甚至高维空间中的一个点集从一个坐标系变换到另一个坐标系的有效方法。
3.矩阵:
在WebGL中,最常用的是4x4的矩阵:
只有一个列的矩阵叫列矢量:
只有一个行的矩阵叫行矢量:
行数和列数都相等的两个矩阵才可以相加或相减(两个m×n矩阵A和B的和,标记为A+B,一样是个m×n矩阵,其内的各元素为其相对应元素相加后的值。)
只有当矩阵A的列数等于矩阵B的行数时,矩阵A才可以乘以矩阵B:
[M x P][P x N] = [M x N]
方阵:列数和行数相等的矩阵称为方阵
单位矩阵:对角位置的元素为1,其他位置的元素为0,这样的方阵称为单位矩阵(通常用I表示,与标量1相对应)
矩阵M乘以它的逆矩阵,结果为单位矩阵
只有方阵才有逆矩阵,但不是所有的方阵都有逆矩阵
发表评论
-
使用Animation实现ThreeJS动画
2015-01-21 16:33 17889第一步: 画地面,并让地面旋转,以便观察 效果: 代 ... -
使用MorphAnimMesh实现ThreeJS动画
2015-01-19 22:15 1659效果: 代码: <!DOCTYPE ht ... -
使用MorphAnimation实现ThreeJS动画
2015-01-19 22:12 3717效果: 代码: <!DOCTYPE html ... -
通过改变morphTargetInfluences实现物体变形
2015-01-19 21:48 3131在three.js中morphTargets允许物体发生变 ... -
ThreeJS系列教程-Lesson7
2015-01-17 11:55 674效果: 代码: <!DOCTYPE html& ... -
ThreeJS系列教程-Lesson6
2015-01-10 16:34 2592效果: 代码: <!DOCTYPE html&g ... -
ThreeJS系列教程-Lesson5
2015-01-09 21:47 1012效果: 代码: <!DOCTYPE html> ... -
ThreeJS系列教程-Lesson4
2015-01-09 21:42 869效果: 代码: <!DOCTYPE html ... -
ThreeJS系列教程-Lesson3
2015-01-09 18:57 1292效果: 代码: <!DOCTYPE html& ... -
ThreeJS系列教程-Lesson2
2015-01-09 18:55 1044效果: 代码: <!DOCTYPE html&g ... -
ThreeJS系列教程-Lesson1
2015-01-09 18:53 1851效果: 代码: <!DOCTYPE html&g ... -
ThreeJS画网格及其它
2015-01-07 18:24 3210效果: 代码: <!doctype html& ... -
3D加载程序的性能优化
2015-01-06 22:17 1600通过使用数组实现连 ... -
JS开发中的几个彰显水准的技巧
2015-01-06 15:07 8271.使用requestAnimationFrame ... -
ThreeJS加载3D模型
2015-01-05 15:24 14512效果: 代码: <!doctype html ... -
ThreeJS创建3D的基本步骤及相关知识
2015-01-05 15:07 1697ThreeJS创建3D的基本步骤: scene ... -
HSV颜色模型
2015-01-04 18:02 1642HSV颜色模型 H: ... -
html5实现的旋转立方时钟(基于three.js)
2014-12-31 11:29 1895效果: 代码: 1.CubeClock.html ... -
JS创建对象和继承的方式
2014-12-29 11:12 858对象创建: 1. //以下三种方法创建的对象是一样的, ...
相关推荐
webgl旋转三角形生成。后续webgl基础随笔持续更新。git地址:https://github.com/11zouzouzou
本范例实现基于SuperMap iClient for JavaScript和SuperMap iClient for 3D的二三维一体化SQL查询。
WebGL之绘制三维地球。
使用原生WebGL以及JavaScript实现了一个最简单的三维旋转模型,实现地球绕太阳旋转,月球绕地球旋转功能,代码量小,可读性强
超图三维地图开发webgl和cesium,最近项目用到三维地图前端显示,解压到tomcat即可用,适合初学者,包含了超图、cesium需要引入的js
3D-webgl-3d-animation.zip,一个交互式的三维动画使用webgl描绘了一个二维捕食者-猎物生态网格实时映射到一个三维环面表面。声音文件被解析,然后在时间和频率域可视化,以及使用Web音频API呈现-这是一个练习,我教...
超图三维地球开发代码,vscode直接运行,感兴趣下载
这是一个用WebGL编写的三维分裂三角形,实现了三角形的自动分裂,可以开始,暂停,终止,代码简单,可以参考,这也是西南石油大学南充校区,计算机图形学第三个实验!
基于WEBGL的三维地形可视化研究,使用 WebGL 和 HTML5 实现了三维地形可视化
JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zipJavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zipJavaScript基于WebGL技术实现的三维BS端...
基于 WebGL 实现的 3D 曲面图表组件
WebGL三维动态系统可视化
《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。...
html5_3d_webgl_多个旋转地球materials,效果不错,请用html5浏览器打开。
Unity3D如何导出为webGL--教程.zip
WebGL学习三维世界
WEBGL里lib目录,里面封装了相机和物理矩阵等,还有WEBGL运行中的BUG处理
如何使用Rust和WebGL在浏览器中制作3D图形的示例_Rust_JavaScript_下载.zip
WebGL-2D-矩阵
基于weibgl的 javascript实现的三维地图。效果还可以,可以参考看下效果!该资源当前未找到源码。不喜勿下