three.js学习笔记

WebGL是在浏览器中实现三维效果的一套规范,是基于OpenGL ES 2.0的Web标准,WebGL可以通过HTML5 Canvas元素作为DOM接口访问

WebGL可以看做是将OpenGL ES(OpenGL for Embedded Systems,OpenGL嵌入式版本,针对手机、游戏机等设备相对较轻量级的版本)移植到了网页平台


three.js 是一个3D JavaScript库。


它让前端开发者可以用简单的代码实现三维场景的渲染,同样的图形webGL代码量为three.js的5倍


Mr. doob是Three.js项目发起人和主要贡献者之一


Three.js是基于MIT协议进行发布


源码:https://github.com/mrdoob/three.js/tree/master/build


一个典型的Three.js程序至少要包括渲染器(Renderer)、场景(Scene)、照相机(Camera),以及你在场景中创建的物体。


渲染器将和Canvas元素进行绑定 通过canvas作为操作的入口


WebGL和Three.js使用的坐标系是右手坐标系


过程:创建一个渲染器–>创建一个场景–>创建一个相机–>把相机添加到场景中–>创建一个物体–>把物体添加到场景中–>执行渲染函数


照相机:定义了三维空间到二维屏幕的投影方式 在屏幕上展示三维空间的一种实现,照相机就像人的眼睛一样,人站在不同位置,抬头或者低头都能够看到不同的景色,照相机的作用就是面对场景,在场景中取一个合适的景,把它拍下来
投影方式:正交投影照相机透视投影照相机


正交投影照相机参数:相机观察的六个面(也叫视景体) 依次为 (左, 右, 上, 下, 深度平面近的一面, 深度平面远的一面) 深度平面都应该为正数
正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果 不会因为投影而改变物体比例


透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果 更接近人眼的观察效果
透视投影照相机参数:(竖直方向的角度,宽/长 的比例,照相机到视景体的最近距离,照相机到视景体的最远距离)


几何形状的功能: 存储一个物体的顶点信息

在计算机世界里,3D世界是由点组成,两个点能够组成一条直线,三个不在一条直线上的点就能够组成一个三角形面,无数三角形面就能够组成各种形状的物体我们通常把这种网格模型叫做Mesh模型


基本几何形状:
立方体立方体参数:(x方向长度,y方向长度,z方向长度,x方向分n段,y方向分n段,z方向分n段) 不需要分段则后三个参数可选
平面平面的参数:(x方向的长度,y方向的长度,x方向分n段,y方向分n段)


球体球体参数:(半径,经度上的切片数,维度上的切片数,经度开始的弧度,经度跨过的弧度,维度开始的弧度,维度跨过的弧度)


圆形/扇形圆形的参数: (半径,半径上的切片数,半径开始的弧度,半径跨过的弧度)


圆柱体/圆台圆柱体的参数:(顶面半径,底面半径,圆柱体高度,半径分n段,圆柱侧面分n段,是否有顶面和底面:可选、默认false:表示有)


正四面体、正八面体、正二十面体接收的参数:(半径,细节层次:可选)


圆环面 甜甜圈的形状圆环面参数:(圆环半径,管道半径,圆环半径分n段,圆环侧面分n段,圆环面弧度:可选、默认Math.PI * 2)


圆环结圆环结参数:(圆环半径,管道半径,圆环半径分n段,圆环侧面分n段,样式参数,样式参数,z轴方向的缩放)


文字形状需要额外下载字体库文字形状参数:(文字字符串,参数对象)参数对象:{ size:字号大小,一般为大写字母的高度 height:文字的厚度 curveSegments:弧线分段数,使得文字的曲线更加光滑 font:字体,默认是’helvetiker’,需对应引用的字体文件 weight:值为’normal’或’bold’,表示是否加粗 style:值为’normal’或’italics’,表示是否斜体 bevelEnabled:布尔值,是否使用倒角,意为在边缘处斜切 bevelThickness:倒角厚度 bevelSize:倒角宽度}


自定义形状:通常使用3Dmax建模,然后导入three.js


基本材质参数:对象; 可选{ visible:是否可见,默认为true side:渲染面片正面或是反面,默认为正面THREE.FrontSide,可设置为反面THREE.BackSide,或双面THREE.DoubleSide wireframe:是否渲染线而非面,默认为false color:十六进制RGB颜色,如红色表示为0xff0000 map:使用纹理贴图}


Lambert材质:符合Lambert光照模型的材质 只对漫反射有效 镜面反射无效光照模型公式:漫反射光强 = 物体表面的漫反射属性 * 光强 * cos(光的入射弧度)Lambert材质参数:对象{ color是用来表现材质对散射光的反射能力,也是最常用来设置材质颜色的属性。除此之外,还可以用ambient和emissive控制材质的颜色。
ambient表示对环境光的反射能力,只有当设置了AmbientLight后,该值才是有效的,材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。
emissive是材质的自发光颜色,可以用来表现光源的颜色。单独使用红色的自发光}
Phong材质: 符合Phong光照模型的材质 支持镜面效果镜面反射模型公式:镜面反射的光强 = 材质表面镜面反射系数 * 光源强度 * (cos(反射光与视线的夹角))^高光指数高光指数越大则高光光斑越小Phong材质参数:对象{ color是用来表现材质对散射光的反射能力,也是最常用来设置材质颜色的属性。除此之外,还可以用ambient和emissive控制材质的颜色。
ambient表示对环境光的反射能力,只有当设置了AmbientLight后,该值才是有效的,材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。
emissive是材质的自发光颜色,可以用来表现光源的颜色。单独使用红色的自发光
specular值指定镜面反射系数 shininess属性控制光照模型中的n值,当shininess值越大时,高光的光斑越小,默认值为30}


法向材质:法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助材质的颜色与照相机与该物体的角度相关无参数
材质的纹理贴图:导入图像作为纹理贴图,并添加到相应的材质中
网格:网格是由顶点、边、面等组成的物体网格参数:(形状实例,材质实例) 材质可选 :默认随机
修改属性:网格被创建后,依然可以修改材质、位置、缩放、旋转等属性


实现动画效果:通过在每秒中多次重绘画面实现每秒帧数FPS(Frames Per Second)的概念,是指每秒画面重绘的次数NTSC标准的电视FPS是30,PAL标准的电视FPS是25,电影的FPS标准为24对于Three.js动画而言,一般FPS在30到60之间都是可取的


重绘方式一:可自定义帧数

var timer = setInterval(draw, 1000/60)

clearInterval(timer)


重绘方式二:自动设定帧数

var timer = null

timer = requestAnimationFrame(draw)

cancelAnimationFrame(timer)


使用stat.js记录FPS https://github.com/mrdoob/stats.js/blob/master/build/stats.min.js

var stat = null;
function init() {

stat = new Stats();

stat.domElement.style.position = 'absolute';

stat.domElement.style.right = '0px';

stat.domElement.style.top = '0px';

document.body.appendChild(stat.domElement);
// Three.js init ...}

stat.begin();与stat.end();


外部模型:Three.js允许用户导入由3ds Max等工具制作的三维模型,并添加到场景中Three.js有一系列导入外部文件的辅助函数,是在three.js之外的,使用前需要额外下载,在https://github.com/mrdoob/three.js/tree/master/examples/js/loaders可以找到。
\*.obj是最常用的模型格式,导入\*.obj文件需要OBJLoader.js;导入带*.mtl材质的*.obj文件需要MTLLoader.js以及OBJMTLLoader.js。另有PLYLoader.js、STLLoader.js等分别对应不同格式的加载器,可以根据模型格式自行选择。
目前,支持的模型格式有:
*.obj*.obj, *.mtl*.dae*.ctm*.ply*.stl*.wrl*.vtk


光与影: 环境光、点光源、平行光、聚光灯


环境光: 是指场景整体的光照效果环境光参数:(颜色) 十六进制的RGB颜色信息


点光源:可以看作一个点发出的光源 亮度线性递减 离点光源距离越远的物体会显得越暗点光源参数:(十六进制的颜色值,亮度:默认1、表示100%,光源最远照射到的距离:默认0)


平行光:无参数


聚光灯:投射出的是类似圆锥形的光线聚光灯参数:(十六进制的颜色值,亮度:默认1、表示100%,光源最远照射到的距离:默认0,聚光灯的张角:默认 Math.PI / 3、最大值Math.PI / 2,光强在偏离target的衰减指数(target需要在之后定义,缺省值为(0, 0, 0)),缺省值是10)target为光线照射的位置信息、如果想让聚光灯跟着某一物体移动(就像真的聚光灯!),可以target指定为该物体


阴影:在Three.js中,能形成阴影的光源只有THREE.DirectionalLight与THREE.SpotLight;而相对地,能表现阴影效果的材质只有THREE.LambertMaterial与THREE.PhongMaterial


渲染:将模型数据在屏幕上显示出来的过程


着色器:着色器是屏幕上呈现画面之前的最后一步,用它可以对先前渲染的结果做修改,包括对颜色、位置等等信息的修改,甚至可以对先前渲染的结果做后处理,实现高级的渲染效果着色器通常分为几何着色器(Geometry Shader)、顶点着色器(Vertex Shader)、片元着色器(Fragment Shader)等等。由于WebGL基于OpenGL ES 2.0,因此WebGL支持的着色器只有顶点着色器与片元着色器。


顶点着色器中的“顶点”指的正是Mesh中的顶点,对于每个顶点调用一次。因此,如果场景中有一个正方体,那么对八个顶点将各自调用一次顶点着色器,可以修改顶点的位置或者颜色等信息,然后传入片元着色器。
片元着色器片元是栅格化之后,在形成像素之前的数据。片元着色器是每个片元会调用一次的程序,因此,片元着色器特别适合用来做图像后处理。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code