0%

《Three.js入门指南》总结(1~3章)

Three.js是一个3D JavaScript库。

Three.js封装了底层的图形接口,使得程序员能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景的渲染。

概述

一.配置环境:

  1. three.js下载。其中three.js没有经过代码压缩,适合调试,three.js经过了代码压缩,文件较小,适合发布最终版的时候使用。
  2. 在使用three.js之前,需要在html中引用:
    1
    <script type="text/javascript" src="three.js"></script>

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

  1. 将渲染器和Canvas绑定。
  2. 在程序最开始的时候将场景进行实例化
  3. 定义照相机,并将其添加进场景
  4. 创建物体,添加进场景
  5. 进行渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function init() {
// render
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);//将背景色设为黑色,用于清除画面的颜色

//scene
var scene = new THREE.Scene();

//camera
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

// a cube in the scene
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
renderer.render(scene, camera);
}

照相机

一.什么是照相机

在图形学中指定三维空间到二维屏幕的投影方式

针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机

二.透视投影vs透视投影

透视投影 正交投影
特点 近大远下,接近人的观察效果 三维空间平行的线,三维空间也平行,投影不改变物体比例
适用场合 制图、建模软件等 其他大多数应用
构造函数 THREE.PerspectiveCamera(fov, aspect, near, far) THREE.OrthographicCamera(left, right, top, bottom, near, far)

根据应用特性来选择一个效果更佳的照相机

三.正交投影相机

为了保持照相机的横竖比例,需要保证(right - left)与(top - bottom)的比例与Canvas宽度与高度的比例一致。

ear与far都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物体,因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near的值设置得较小,far的值设置得较大,具体值视场景中物体的位置等决定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function init() {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
var scene = new THREE.Scene();

// camera
// canvas size is 400x300
var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);
//camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

// a cube in the scene
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
})
);
scene.add(cube);

// render
renderer.render(scene, camera);
}

四.透视投影相机

fov是视景体竖直方向上的张角(是角度制而非弧度制)。

aspect等于width / height,是照相机水平方向和竖直方向长度的比值,通常设为Canvas的横纵比例。

near和far分别是照相机到视景体最近、最远的距离,均为正值,且far应大于near

改变fov并不会引起画面横竖比例的变化,而改变aspect则会改变横竖比例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function init() {
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
var scene = new THREE.Scene();

// camera
// canvas size is 400x300
var camera = new THREE.PerspectiveCamera(60, 400 / 300, 1, 10);
camera.position.set(0, 0, 5);
scene.add(camera);

// a cube in the scene
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
})
);
scene.add(cube);

// render
renderer.render(scene, camera);
}

几何形状

一.基本几何形状

几何体形状 构造函数 参数
立方体 THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) X方向上的长度;Y方向上的长度;Z方向的长度;X方向上的分段;Y方向上的分段;Z方向上的分段
平面 THREE.PlaneGeometry(width, height, widthSegments, heightSegments) X方向上的长度;Y方向的长度;X方向上的分段;Y方向上的分段
球体 THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength) 半径;经度上的切片数;纬度上的切片数;经度开始的弧度;经度跨过的弧度;纬度开始的弧度;纬度跨过的弧度
圆形 THREE.CircleGeometry(radius, segments, thetaStart, thetaLength) 半径;切片数;开始的弧度;跨过的弧度
圆柱体 THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded) 顶面半径;底面半径;半径分段;高度分段;是否没有顶面和底面
正四面体 THREE.TetrahedronGeometry(radius, detail) 半径;细节层次的层数
正八面体 THREE.OctahedronGeometry(radius, detail) 同上
正十二面体 THREE.IcosahedronGeometry(radius, detail) 同上
圆环面 THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc) 圆环半径;管道半径;分段;分段;圆环的弧度
圆环结 THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale) 圆环半径;管道半径;分段;分段;圆环的弧度;样式参数;样式参数;z轴上的缩放

二.文字形状

  1. 下载使用在github下载xxx.json文件,放入目录下,用以下方法加载:
1
2
3
4
5
6
7
8
9
10
11
12
var loader = new THREE.FontLoader();
loader.load('../lib/xxx.json', function(font) {
var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
font: font,
size: 1,
height: 1
}), material);
scene.add(mesh);

// render
renderer.render(scene, camera);
});
  1. 参数介绍
    构造函数为THREE.TextGeometry(text, parameters);
    text是文字字符串,parameters是以下参数组成的对象:
  • size:字号大小,一般为大写字母的高度
  • height:文字的厚度
  • curveSegments:弧线分段数,使得文字的曲线更加光滑
  • font:字体,默认是’helvetiker’,需对应引用的字体文件
  • weight:值为’normal’或’bold’,表示是否加粗
  • style:值为’normal’或’italics’,表示是否斜体
  • bevelEnabled:布尔值,是否使用倒角,意为在边缘处斜切
  • bevelThickness:倒角厚度
  • bevelSize:倒角宽度

自定义形状

  1. 需手动指定每个顶点的位置,以及顶点连接情况。
  2. 自定义形状使用的是Geometry类,它是其他如CubeGeometry、SphereGeometry等几何形状的父类,其构造函数是:THREE.Geometry()
1
2
3
graph LR
A[初始几何化形状]-->B[设置顶点位置]
B-->C[设置顶点连接情况]

Three.js入门指南