three.js

内容简介：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

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。