ThreeJs基础常识

作者：桑榆
QQ：934440653
有问题，评论留言，或qq联系

前两章的尚未整理，后续整理完成，会补上。

第一章 场景

待更新…

第二章 相机

待更新…

第三章 渲染器

1.参数

2.属性

3.方法

.getContext( ) — 返回WebGL渲染上下文。

.getContextAttributes — 返回描述WebGL上下文创建时所设置属性的对象。

.supportsVertexTextures( ) — 返回Boolean值，如果该上下文支持顶点纹理，则为true。

.getPixelRatio( ) — 返回当前设备的像素比。

.setPixelRatio( value ) — 设置设备像素比。通常用于HiDPI设备防止模糊输出canvas。

.getSize( ) — 返回包含渲染器输出canvas宽高的对象，以像素为单位。

.setSize( width,height,updateStyle ) — 调整输出canvas尺寸，要考虑设备像素比，并设置视口匹配该尺寸。如果设置updateStyle为true，则显示添加像素到输出canvas的样式中。

.setViewport( x,y,width,height ) — 设置视口，从(x,y)到(x+width,y+height)。

.setScissor( x,y,width,height) — 设置剪裁区域，从(x,y)到(x+width,y+height)。
(注：setViewport 和 setScissor 方法中的(x,y)是该区域的左下角。该区域被定义从左到右的宽度，以及从底部到顶部的高度。该垂直方向的定义和HTML canvas元素的填充方向相反。)
.setScissorTest( ) — Boolean，启用或禁用裁剪测试。被激活时，只有裁剪区域内的像素会被进一步的渲染行为所影响。

.setClearColor( color,alpha ) — 设置清除的颜色和透明度。

.getClearColor( ) — 返回使用当前清除颜色的THREE.Color实例。

.getClearAlpha( ) — 返回使用当前清除透明度的float。范围 0-1。

.clear( color,depth,stencil ) — 使渲染器来清除其颜色、深度和模板绘制缓冲。该方法初始化颜色缓冲区为当前清除颜色值。

.renderBufferImmediate( object,program,shading ) — 渲染一个即时缓冲区。被renderImmediateObject所调用。

.renderBufferDirect( camera,lights,fog,material,geometryGroup,object ) — 使用相机和正确的材料渲染缓冲模型组。

.renderBuffer(camera,lights,fog,material,geometryGroup,object) — 使用相机和正确的材料渲染模型组。

.render( scene,camera,renderTarget,forceClear ) — 使用相机渲染一个场景。

.readRenderTargetPixels( renderTarget,x,y,width,height,buffer ) — 从渲染目标中读取像素数据到给定的缓冲区中。缓存应该是一个js Uint8Array对象，通过new Uint8Array( renderTargetWidth * renderTargetWidth * 4 )来实例化，考虑大小和颜色信息。

.renderImmediateObject( camera,lights,fog,material,object ) — 使用相机渲染即时对象。

.setFaceCulling( cullFace,frontFace ) — 用于设定GPU中gl的fontFace和cullFace状态，从而启用或禁用渲染时的面剔除。

.setTexture( texture,slot ) — 设置正确的纹理为webgl着色器的正确插槽。插槽可以作为一个值的均匀的采样。

.setRenderTarget( renderTarget ) — 设置当前渲染目标。如果参数被忽略，设置绘制的canvas为当前渲染目标。

.supportsCompressedTextureS3TC( ) — 如果WebGL支持S3TC格式的纹理压缩，返回true。

.getMaxAnisotropy( ) — 返回纹理的各向异性水平。

.getPrecision( ) — 获取着色器作用精度，返回 highp / mediump / lowp。

.clearTarget( renderTarget,color,depth,stencil ) — 清除渲染目标。

4.常用的render

var  renderer=new THREE.CanvasRenderer();     几何级别的渲染，兼容性更好

var renderer=new THREE.WebGLRenderer();       像素级的渲染，渲染效果更好

第四章 光源

选择“license server” 输入：http://idea.imsxm.com/

一、光源的种类

二、基础光源

THREE.Color对象

当构建THREE.Color(color)对象时，color可以用十六进制字符串（#cccccc）或者十六进制数值。然而，在构想构造好后如果需要改变颜色，就不得不创建一个新的THREE.Color对象或者修改当前THREE.Color对象的内部属性。THREE.Color提供的函数包括:

函数名/描述

set(value)/将当前颜色改成指定的十六进制值。可以是字符串，也可以是数字

setHex(value)/将当前颜色指定为十六进制数值

setRGB(r, g, b)/根据提供的RBG设置颜色。参数范围0到1

setHSV(h, s, v)/根据提供的HSV值设置颜色。参数的范围从0到1

setStyle(color)/根据CSS值设置颜色

copy(color)/从提供的颜色对象复制颜色值到当前对象

convertGamaToLinear(color)/将当前颜色从伽马色彩空间转换到线性色彩空间

convertLinearToGamma(color)/将当前颜色从线性色彩空间转换到伽马色彩空间

getHex()/以十六进制形式从颜色对象中获取颜色值

getHexString()/以十六进制字符串形式从颜色对象中获取颜色值

getStyle()/以CSS值得形式从颜色对象获取颜色值

getHSV()/以HSV形式从颜色对象中获取颜色值

addColor(color)/将提供的颜色添加到当前颜色上

clone()/复制当前颜色

2.1 AmbientLight

1.参数

var light = new THREE.AmbientLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

2.1 PointLight

1.参数

var light = new THREE.PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

2.1 SpotLight

1.参数

var light = new THREE.SpotLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

2.1 DirectionalLight

1.参数

var light = new THREE.DirectionalLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

2.5调试射线

//调试用射线显示
directionalLight.castShadow = true;
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.left = -200;
directionalLight.shadow.camera.right = 200;
directionalLight.shadow.camera.top = 300;
directionalLight.shadow.camera.bottom = -200;
var helper = new THREE.CameraHelper(directionalLight.shadow.camera, 5);
scene.add(directionalLight, helper);

三、特殊光源

第五章 材质

一、属性

材质的种类

• THREE.MeshBasicMaterial 基础网格材质

  color

  wireframe

  wireframeLinewidth

  wireframeLinecap：线段端点如何显示。可选值有：butt（平）、round、square。默认是round。WebGLRenderer对象不支持该属性。

  wireframeLinejoin：线段连接点如何显示。可选值有：round、bevel（斜角）、miter（尖角）。默认是round。WebGLRenderer对象不支持属性。

  shading：着色模式。可选值：THREE.SmoothShading、THREE.FlatShading。

  vertexColors：为每个顶点定义不同的颜色。在CanvasRenderer对象中不起作用。

  fog：指示当前是否会受全局雾化效果设置的影响。

1.1 基础属性

这些属性是最常用的。通过这些属性，可以控制物体的不透明度、是否可见以及如何被引用（通过 ID 或者自定义名称）。

2.2 融合属性

每个物体都有一系列的融合属性。这些属性决定了物体如何与背景融合。

3.高级属性

这些高级属性可以控制底层 WebGL 上下文对象渲染物体的方式。不过大多数情况下是不需要使用这些属性的。

二、简单网络材质

2.1 MeshBasicMaterial

1.简介

MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框。

2.设置属性

Three.js除了可以设置共有的属性外，还可以设置以下属性：

3.使用案例

直接按照上一节的的两种方法中的一种方法创建实例化对象，设置相关属性即可。

var meshMaterial = new THREE.MeshBasicMaterial({color:0xeeefff});

2.2 MeshDepthMaterial

1.简介

使用THREE.MeshDepthMaterial材质的物体，其外观不是由光照或某个材质属性决定的，二十有物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用，从而很容易地创建出逐渐消失的效果。

使用THREE.MeshDepthMaterial材质的物体，其外观不是由光照或某个材质属性决定的，二十有物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用，从而很容易地创建出逐渐消失的效果。

摄像机的near属性和far属性之间的距离决定了场景的亮度和物体消失的速度。如果这个距离非常大，那么当物体远离摄像机时，只会稍微消失一点。如果这个距离非常小，那么物体消失的效果会非常明显。

2.相关属性

相机与物体距离小于near，不会显示出来；相机与物体距离大于far属性，物体落在相可视范围之外。物体与相机距离小于near，消失快；物体远离相机的过程中会一点点消失。

2.3 联合材质

//获取亮度
var cubeMaterial = new THREE.MeshDepthMaterial();
//获取颜色
var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending});
meshMaterial = [colorMaterial, cubeMaterial];
// 定义 cube 网格
cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, meshMaterial);
cube.children[1].scale.set(0.99, 0.99, 0.99); // 缩小 cubeMaterial 的网格对象，避免闪烁问题

注解：MeshBasicMaterial() ,必须transparent: true

​ 指定 blending 属性融合模式为 THREE.MultiplyBlending

​ 利用 THREE.SceneUtils.createMultiMaterialObject() 方法把前两种材质结合起来创建一种组合材质网格。其原理比较简单，这个方法创建时，会生成一个网格组，即一个网格采用 MeshDepthMaterial 材质，另一个网格采用 MeshBasicMaterial 材质，两个网格完全相同，只是材质不同而已。

2.4 MeshNormalMaterial

2.5 MeshFaceMaterial

1. 定义：新版 three.js 中已经不存在这种材质了，因为原则上来讲，旧版中的 MeshFaceMaterial 材质其实就是一个材质数组。举个例子，假如我们在场景中加入一个立方体，这个立方体上有六个面，你可以通过定义一个长度为六的材质数组来为每一个面单独指定一种材质（比如不同的颜色）即可。

//实例
var matArray = [];

matArray.push(new THREE.MeshBasicMaterial({color: 0x009e60}));

matArray.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));

matArray.push(new THREE.MeshBasicMaterial({color: 0xffd500}));

matArray.push(new THREE.MeshBasicMaterial({color: 0xff5800}));

matArray.push(new THREE.MeshBasicMaterial({color: 0xc41e3a}));

matArray.push(new THREE.MeshBasicMaterial({color: 0xffffff}));

var cube = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), matArray);

​

1. ​

三、高级材质

3.1 MeshLambertMaterial

1.简介

• 这种材质可以用来创建暗淡的并不光亮的表面。
• 无光泽表面的材质，无镜面高光。
• 这可以很好地模拟一些表面（如未经处理的木材或石头），但不能用镜面高光（如上漆木材）模拟光泽表面。
• 该材质非常易用，而且会对场景中的光源产生反应。
• 可以配置的前面的提高的属性：color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinecap、wireframeLineJoin、vertexColors和fog。

1. 相关属性
   | ** 名称 ** | ** 描述 ** |
   |:----|:----?:----|:----?
   | ambient（环境色） | 这是材质的环境色。它跟上一章讲过的环境光源一起使用。这个颜色会与环境光提供的颜色相乘。默认值为白色。 |
   | emissive（发射的） | 这是该材质的发射的颜色。它其实并不像一个光源，只是一种纯粹的、不受其它光照影响的颜色。默认值为黑色 |
   | wrapAround | 如果这个属性设置为true，则启动半lambert光照技术。有了它，光下降得更微妙。如果网格有粗糙、黑暗的地区，启用此属性阴影将变得柔和并且分不更加均匀 |
   | wrapRGB | 当wrapAround属性设置为true时，可以使用THREE.Vector3来控制光下降得速度 |

3.简单使用

直接实例化一个

THREE.MeshLambertMaterial

var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});//实例化一个蓝色的材质

3.2 MeshPhongMaterial

1.简介

通过它可以创建一种光亮表面的材质效果。这种材质的属性基本跟 MeshLambertMaterial 暗淡材质一样，除此之外，我们列出 MeshPhongMaterial 材质中比较感兴趣的特有属性。

2.相关属性

3.3 ShaderMaterial

1.简介

通过它，可以定义自己的着色器，直接在 WebGL 环境中运行。着色器可以将 three.js 中的 JavaScript 对象转换为屏幕上的像素。通过这些自定义的着色器，你可以明确指定你的对象如何渲染及遮盖，或者修改 three.js 库中的默认值。

接下来我们先看看 ShaderMaterial 可以设置的几个常用属性，大部分跟其他基础材质类似，有wireframe、wireframeLinewidth、flatShading、fog、vertexColors 等。

特别提一下vertexColors 属性，我们可以通过它为每一个顶点定义不同的颜色。它在 CanvasRenderer 下不起作用，只在 WebGLRenderer 下起作用。关于此属性可以参考后面提到的关于 LineBasicMaterial 的例子。

出上面提到的这些属性外，ShaderMaterial 还有几个特别的属性，使用它们你可以传入数据，定制你的着色器。但它们看起来不好理解，需要结合“GLSL 着色器语言”的相关知识，如下表所示：

2.相关属性

其中，最重要的部分就是：如果想要使用 ShaderMaterial 材质，就必须传入两个不同的着色器：

• vertexShader：它会在几何体的每一个顶点上执行。可以用这个着色器通过改变顶点的位置来对几何体进行变换；

• fragmentShader：它会在几何体的每一个像素上执行。在 vertexShader 里，我们会返回这个特定像素应该显示的颜色；

  到目前为止，我们讨论过的所有材质，three.js 库都会提供相应的 vertexShader 和 fragmentShader ，不必我们自己去定义。

3.4 线性几何体材质

1. THREE.LineBasicMaterial用于绘制线段的基础材质。
   (注:CanvasRenderer支持linewidth属性，WebGLRenderer不支持)

相关属性

简单使用

var material = new THREE.LineBasicMaterial( {
color: 0xffffff,
linewidth: 1,
linecap: 'round',
linejoin:  'round'
} );

2.LineDashedMaterial：跟 LineBasicMaterial 基本一样，但是通过指定短划线和间隔长度，可以创建出虚线效果；LineDashedMaterial 材质的线型是虚线而已。除了跟 LineBasicMaterial 拥有相同的属性外，它还有以下几个独特的属性：

用法跟 LineBasicMaterial 基本一样，如下所示：

lines.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 0.6,
gapSize: 0.2,
scale: 1.0 // 比例越大，虚线越密；反之，虚线越疏
});

唯一的区别就是，必须调用方法 computeLineDistances()。如果不调用，就不会显示出虚线效果。

var lines = new THREE.Geometry();
lines.computeLineDistances(); // 必须调用，否则不会有虚线效果

第六章 几何体

一、二维几何体

1.1 PlaneGeometry

var plane = new THREE.PlaneGeometry(width,height,widthSegments,heightSegments);

width: 必须，矩形宽度

height:必须，矩形高度

widthSegments:可选，指定矩形的宽度应该划分成几段。

heightSegments:可选，指定矩形的高度应该划分成几段。

二維图形为(x-y平面)——>(x-z)：mesh.rotation.x = -Math.PI/2; 网络模型沿x轴，向后旋转1/4圈(-PI/2)

<script>
function init() {
var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerWidth, 1, 10000);
var webGlRenderer = new THREE.WebGLRenderer();
webGlRenderer.setSize(window.innerWidth, window.innerHeight);
webGlRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGlRenderer.shadowMapEnabled = true;

//创建一个平面
var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));
scene.add(plane);

camera.position.x = -20;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(new THREE.Vector3(10, 0, 0));

// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);

document.getElementById('webGl-layOut').appendChild(webGlRenderer.domElement);

var controls = new function () {
//平面的宽高
this.width = plane.children[0].geometry.parameters.width;
this.height = plane.children[0].geometry.parameters.height;

//平面宽高分割片段数
this.widthSegments = plane.children[0].geometry.parameters.widthSegments;
this.heightSegments = plane.children[0].geometry.parameters.heightSegments;

//重新定义
this.redraw = function () {
scene.remove(plane);
//又重新新建一个
plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));
scene.add(plane);
}

}

var gui = new dat.GUI();
gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
gui.add(controls,"widthSegments",1,12).onChange(controls.redraw);
gui.add(controls,"heightSegments",1,12).onChange(controls.redraw);

//联合材质
function createMesh(geom) {
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
//显示线框
wireFrameMat.wireframe = true;

var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
return plane;
}

//开始渲染
render();
var step = 0;
function render() {
stats.update();
plane.rotation.y = step += 0.01;
requestAnimationFrame(render);
webGlRenderer.render(scene, camera);
}

function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms

// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.getElementById("stats-layOut").appendChild(stats.domElement);

return stats;
}
}

window.onload = init;
</script>

1.2 CircleGeometry

基本属性：

radius：可选。默認50。

segments：可选。定义创建圆时所用的面的数量。最少3个，默认8个。值越大，越光滑。

thetaStart：可选。取值范围：0-2*PI ，默認是0

thetaLength：可选。默认2PI，表示圆要画多大，0.5PI表示1/4圆。

new THREE.CircleGeometry(3,12);//半径3，12个三角形组成的圆

new THREE.CircleGeometry(3,12,0,Math.PI);//半圆

1.3 RingGeometry

1.属性

1.4 ShapeGeometry:自定义

1.属性

二、三维几何体

1.1 BoxGeometry 立方体

BoxGeometry(width, height, dept, widthSegments, heightSegments, depthSegments)

属性

1.2 SphereGeometry 球体

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

• radius：球体半径
• widthSegments, heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。
• phiStart：从x轴开始绘制，水平方向上的起始角,默认值0 ,最大Math.PI * 2
• phiLenght：水平方向上球体曲面覆盖的弧度，默认Math.PI * 2
• thetaStart : 从y轴开始绘制，垂直方向上的起始角， 默认0 ,最大Math.PI
• thetaLength: 垂直方向是球体曲面覆盖的弧度，默认值为Math.PI(整个球体)
  | ** 属性 ** | ** 描述 ** |
  |:----|:----?:----|:----?
  | radius | 可选。此属性定义球体的半径。 |
  | widthSegments | 可选。此属性定义球体竖直（维度）方向上的分段数。默认值是 8，最小值是 3 |
  | heightSegments | 可选。此属性定义球体水平（经度）方向上的分段数。默认值是 6，最小值是 2 |
  | phiStart | 可选。此属性定义从 x 轴的什么地方开始绘制。取值范围是 0 到 2π |
  | phiLength | 可选。此属性定义从 phiStart 开始绘制多少。取值范围是 0 到 2π |
  | thetaStart | 可选。此属性定义从 y 轴的什么地方开始绘制。取值范围是 0 到 π |
  | thetaLength | 可选。此属性定义从 thetaStart 开始绘制多少。取值范围是 0 到 π。一个 π 是整球，0.5*π只绘制上半球 |

1.3 CylinderGeometry 圆柱

1.4 TorusGeometry 圆环

圆环面（TorusGeometry）的形状类似甜甜圈，其构造函数是：

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

SHU

1.5 TrusKnotGeometry 环状扭结

1.属性

1.6 PolyhedronGeometry 多面体

1.属性

1.7 lcosahedronGeometry

1.8 TetrahedronGeometry

1.9 OctahedronGeometry

1.10 DodecahedronGeometry

第七章 高级几何体和二次元操作

1.1 ConvexGeometry（凸面体）

1.2 LatheGeometry （扫描体）

1.定义：

它是从一条光滑的曲线开始创建图形，这条曲线是通过指定一些点（也叫节点）来定义的，而这条曲线通常也被称作样条曲线。当这条曲线围绕一个固定点选择时，就构成了一个类似花瓶或铃铛的图形

绕z轴旋转

2.语法：

LatheGeometry(points, segments, phiStart, phiLength)

3.属性：

1.3 ExtrudeGeometry（拉伸体）

1.定义：

它是从一个二维图形创建出一个三维图形。譬如，我们可以先通过 THREE.Shap 对象，先创建一个二维的图形，然后通过 ExtrudeGeometry 将它拉伸为一个三维图形。也可以先通过 THREE.PlaneGeometry 对象创建一个二维平面，然后再利用 ExtrudeGeometry 进行拉伸。

2.属性：

1.4 TubeGeometry（管状体）

属性：

1.5 TextGeometry（三维文字）

1.语法

var geometry = new THREE.TextGeometry(text,options);

• 第一个参数是需要显示的字体
• 第二个参数是相关的配置项(属性)

2.属性

json

normal

bold

normal

normal

italic

normal

true

z

THREE.SceneUtils.createMultiMaterialObject

THREE.SceneUtils.createMultiMaterialObject

UV

uvGenerator

UV

THREE.ExtrudeGeometry.WorldUVGenerator

frenet

extrudePath

Three.js

THREE.TubeGeometry.FrenetFrames

1.6 ParametricGeometry（等式体）

1.定义：

使用

THREE.ParametricGeometry

2.语法：

var geometry = new THREE.ParametricGeometry(function, slices, stacks);1

通过上面的方法，就可以创建出一个

THREE.ParametricGeometry

3.属性

THREE.Vector3

u

v

• 点赞
• 收藏
• 分享
• 文章举报