《Three.js入门指南》总结（1~3章）

JavaScript › Three.js
,

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入门指南