three.js学习笔记（二）-基础知识①

来源：互联网发布：unturned mac 编辑：程序博客网时间：2024/06/05 16:15

1.渲染器参数的介绍：
renderer = new THREE.WebGLRenderer({
antialias:true,// true/false表示是否开启反锯齿
precision:”highp”,// highp/mediump/lowp 表示着色精度选择
alpha:true,// true/false 表示是否可以设置背景色透明
premultipliedAlpha:false,// true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
stencil: false ，//false/true 表示是否使用模板字体或图案
preserveDrawingBuffer:true,// true/false 表示是否保存绘图缓冲
maxLights:1//最大灯光数
});
2.渲染函数的原型如下：
render( scene, camera, renderTarget, forceClear )
各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
3.相机的介绍：
OpenGL中三维空间中的物体投影到二维空间的方式中存在透视投影和正投影两种相机。
透视投影：从视点开始越近的物体越大、远处的物体绘制的较小的一种方式
正投影：不管物体和视点的距离，都按统一的大小进行绘制
要唯一确定一个相机的位置与方向，position、up、lookAt三个属性是缺一不可的。up的方向和lookAt的方向必然是垂直的。
4.光源的介绍：
在OpenGL的三维空间中，存在点光源(存在平行光)和聚光灯两种类型
three.js中可设置点光源(Point Light)、聚光灯(Spot Light)、平行光源(Direction Light),在一个场景中可以设置多个光源，通常都是环境光和其他几种光源进行组合。
光源的总类有：
Light、AmbientLight（环境光只有颜色属性）、AreaLight、DirectionalLight（方向光缺省位置（0，1，0），缺省目标位置（0，0，0）即方向光的缺省方向为至顶向下，沿y轴负方向）、HemisphereLight、PointLight、SpotLight
5.顶点颜色 vertexColors: THREE.VertexColors，就是线条的颜色会根据顶点来计算
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

6.性能监视器Stats
在Three.js中，性能由一个性能监视器来管理，它的介绍在https://github.com/mrdoob/stats.js 可以看到。性能监视器的截图如下所示:
其中FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。点击上面的图，就会变成下面的另一个视图。
MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
这里写图片描述

<!DOCTYPE HTML><!--这个网页的文档类型，这个是html5的写法--><html lang="en"><!--这里的lang="en"可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话）--><head><!--头部的标签--><meta charset="UTF-8"><!--这个是设置的编码为UTF-8的中文字体这个写法也是可以显示的,当然你文件保存的格式也应该是utf-8的-->

8.常用的材质
mesh 三角形组成的网格模型
MeshBasicMeterial 没有光照特性。在使用3D扫描仪扫描的模型中，不需使用光照材质，因为扫描的贴图是包含光照信息。
MeshLamberMeterial 没有高光特性
MeshPhongMeterial 有高光特性，在制作金属类反光强的物体时可以选择这种材质
MeshNormalMaterial法向材质
法向量的作用：
决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。
法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。
在平面上添加表示法向量的箭头：使用THREE.ArrowHelper
for(var f = 0 , f1 = sphere.geometry.faces.length; f < f1 ; f++){
var face = spere.geometry.faces[f];
var arrow = new THREE.ArrowHelper(face.normal,face.centroid,2,0x3333ff);
spere.add(arrow);
}

9.贴图
凹凸贴图 bumpmap表达模型表面的凹凸特性
环境贴图 envmaps使用六张图片来构成一个立方体贴图，用它来表达周围的环境，并把周围的环境反射在模型表面
光照贴图 lightmap使用一张图片保存了光照的信息，用其他建模软件把光影效果烘培到贴图中，这样在three.js中就不用再次计算这些光影特点。

10.纹理（texture）

阅读全文

0 0