内容简介：three.js
1.canvas默认是透明的，所以不要四处找你的canvas，加个border吧
2.一般使用canvas前，要获取绘制二维图形的上下文，也要注意后面使用的到底是canvas还是其上下文ctx,例:
var ctx = canvas.getContext('2d');
3.在使用canvas的imgdata时，一定要注意从canvas中取得数据是以左上角为坐标原点的，而映射到3d空间时，一般是以左下为坐标原点的。这里用高中的坐标系知识，y轴取反然后向正方向平移即可。例：
yPage = -yCanvas + yOffset; // yOffset为向正方向平移的值，一般设为正值。
4.个人觉得webgl的核心部分还是属于opengl的那一部分，其他真的就只是熟悉api而已，而正常用three.js做点小东西的话最多也只会在编写shader着色器的时候会卡住一下，所以认真的读文档，测试官方的小例子最好不过。而关于着色器部分主要用的是GLSL(opengl shader language),看three.js的例子中，着色器其实主要编写两个部分吧，一个是顶点着色器，一个是片元着色器，简单的说第一个用来定位，第二个用来画就是了。po上从书里抄的代码，例:
// 顶点
void main(){
gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 表示齐次坐标，可以提高计算机处理效率
gl_PointSize = 10.0;
}
// 片元
void main(){
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)''
}
这个，类C但是比C简单，本狗其实也么有专门写过着色器。。。深究起来感觉，啊，怎么都到编写游戏去了。注意一点，就是webgl的程序包括运行在浏览器中的javascript和运行在 webgl系统中的着色器程序（抄自webgl编程指南，不错的书）。
5.关于webgl的坐标轴，表示很讨厌那些坐标系统啦左右手坐标啦什么的，明明就是垂直屏幕向外是z轴，x和y就是正常的就行了，搞那么复杂。。
6.关于元素的旋转，(x,y)表示原来的位置，a表示原来的角度，（x’,y’)表示后来的位置，b表示后来的角度。关系:
x' = x cosb - y sinb; y' = x sinb + y cosb;
高中知识。。。 忘光了
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 【Three.js】Three.js学习记录
- 初识three.js，搭建three.js+vue.js项目
- WebGL three.js学习笔记 创建three.js代码的基本框架
- three.js
- 解剖 WebGL & Three.js 工作原理
- 学习 WebGL 的开源库 Three.js
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
