threejs - 4 - 物体

:)

简介

在三维空间中的物体是由点、线、面组成的

点：三维空间中的一个点（包含x , y ,z）
线：两个点就能确定一条直线（包含起点和终点），多个点可以绘制一条折线
面：三个点就可以确定一个面（暂时理解成WebGL里面仅仅支持三角形的绘制）
三维物体：多个面组合起来就可以构成一个三维物体

不管是点、线还是面，里面的坐标点都叫顶点。可以给不同的顶点设置不同的颜色，这个过程叫着色（看不懂的话有个概念就行，顶点 + 颜色 = 三维物体）

点

定义点的位置（x，y，z），ThreeJs中使用 THREE.Vector3 来存储三维坐标信息

    // 定义了三个坐标信息  （0, 0, 0） (1, 1, 0)  (2, 2, 0)
    var p1 = new THREE.Vector3(0,0,0);
    var p2 = new THREE.Vector3(1,1,0);
    var p3 = new THREE.Vector3(2,2,0);

定义一个存储这些点的容器（可以简单理解成GPU为了提高绘制的效率，会一次性的读取所有的点，所以需要一个容器来存储所有的点信息），ThreeJs里面使用 THREE.Geometry 来存储点的信息

    // 定义存储点的容器
    var pointsG = new THREE.Geometry();
    pointsG.vertices.push(p1, p2, p3);

定义点的显示样式（不懂不要紧，样式后面会详解。简单理解就是点的颜色，大小）

    // 定义点的颜色是红色 大小是0.1
    var pointsM = new THREE.PointsMaterial({
        color: 0xff0000, size: 0.1
    });

绘制点ThreeJs中 THREE.Points 这个类会将定义好的顶点，使用点的方式绘制出来

    // 使用点的方式绘制定义好的顶点 并添加到场景中
    var points = new THREE.Points(pointsG, pointsM);
    scene.add(points);

这里的points可以指定显示在场景的位置，而points里面定义的顶点是相对于场景位置的点

点绘制小结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="three.min.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 定义了三个坐标信息  （0, 0, 0） (1, 1, 0)  (2, 2, 0)
    var p1 = new THREE.Vector3(0,0,0);
    var p2 = new THREE.Vector3(1,1,0);
    var p3 = new THREE.Vector3(2,2,0);

    // 定义存储点的容器
    var pointsG = new THREE.Geometry();
    pointsG.vertices.push(p1, p2, p3);

    // 定义点的颜色是红色 大小是0.1
    var pointsM = new THREE.PointsMaterial({
        color: 0xff0000, size: 0.1
    });

    // 使用点的方式绘制定义好的顶点 并添加到场景中
    var points = new THREE.Points(pointsG, pointsM);
    scene.add(points);

    camera.position.set(5, 5, 5);
    camera.lookAt(new THREE.Vector3(0,0,0));

    document.getElementById("container").appendChild(renderer.domElement);

    function run() {
        renderer.render(scene, camera);
        requestAnimationFrame(run);
    }

    run();
</script>
</html>

线

至少两个顶点构成了一条线。线的绘制流程和点类似，定义顶点，设置样式，添加到场景
定义线经过的顶点

    // 定义线经过的顶点
    var p1 = new THREE.Vector3(1,0,0);
    var p2 = new THREE.Vector3(1,1,0);
    var p3 = new THREE.Vector3(2,2,0);
    var p4 = new THREE.Vector3(2,1,0);

定义存储点的容器

    // 定义存储点的容器
    var pointsG = new THREE.Geometry();
    pointsG.vertices.push(p1, p2, p3, p4);

设置线的样式（样式相关后面专门讲）

    // 设置线的样式
    var lineM = new THREE.LineBasicMaterial({color: 0xff0000});

使用THREE.Line将点用线的方式连接起来

    // 折线
    var line = new THREE.Line(pointsG, lineM);
    scene.add(line);

使用THREE.LineLoop绘制封闭的线

    // 封闭的线
    var line = new THREE.LineLoop(pointsG, lineM);
    scene.add(line);

使用THREE.LineSegments绘制线段（会将点进行两辆组合，就会生成多个线段）

    // 绘制线段
    var line = new THREE.LineSegments(pointsG, lineM);
    scene.add(line);

线的绘制模式有三种，折线（Line）、密封的线（LineLoop）、线段（两两一组的线段，LineSegments）
线的绘制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="three.min.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 定义线经过的顶点
    var p1 = new THREE.Vector3(1,0,0);
    var p2 = new THREE.Vector3(1,1,0);
    var p3 = new THREE.Vector3(2,2,0);
    var p4 = new THREE.Vector3(2,1,0);

    // 定义存储点的容器
    var pointsG = new THREE.Geometry();
    pointsG.vertices.push(p1, p2, p3, p4);

    // 设置线的样式
    var lineM = new THREE.LineBasicMaterial({color: 0xff0000});

    // 绘制线段
    var line = new THREE.LineSegments(pointsG, lineM);
    scene.add(line);

    camera.position.set(5, 5, 5);
    camera.lookAt(new THREE.Vector3(0,0,0));

    document.getElementById("container").appendChild(renderer.domElement);

    function run() {
        renderer.render(scene, camera);
        requestAnimationFrame(run);
    }

    run();
</script>
</html>

面

绘制平面的套路和绘制线和点的套路有一些区别
定义这个平面上的顶点

    // 定义平面上的顶点
    var vertices = [
        new THREE.Vector3(0,0,0),
        new THREE.Vector3(1,2,0),
        new THREE.Vector3(2,2,0),
    ];

处理存放顶点的容器

    // 定义存储点的容器
    var geo = new THREE.Geometry();
    geo.vertices = vertices;

这里我们虽然定义了顶点，但是还没有告诉ThreeJs怎么通过这些顶点来构成平面。这里可能有些疑惑，我都已经定义好了平面上的顶点了，为啥不能直接根据顶点生成平面？原因是在于三维空间中的物体是由很多很多平面构成的，平面于平面之间的顶点会有重合，如果直接用顶点的话会有很多重复的顶点定义。

定义怎么通过顶点构成平面，ThreeJs里面通过 THREE.Face3 这个类来定义平面

    // 定义平面
    geo.faces = [
        new THREE.Face3(2,1,0) // 这里的 2 , 1, 0 指的是vertices定义的顶点的下标
    ];

上面定义了一个平面，THREE.Face3(2,1,0) 这个里面的 2 指的是 vertices 里面下标为2的顶点，1 指的是下标为1的顶点，0 指的是下标为0的顶点。 2，1，0 的顺序也是有说法的（GPU为了提高渲染效率，默认仅仅渲染逆时针方向的平面，如果你写成了 0，1，2 就可能渲染不出来）

设置平面的样式（具体什么意思后面专门讲）

    // 设置平面的样式
    var meshM = new THREE.MeshBasicMaterial({color: 0xffff00});

生成平面，使用的是ThreeJs里面的 THREE.Mesh

    // 绘制平面
    var mesh = new THREE.Mesh(geo, meshM);

平面绘制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="three.min.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 定义平面上的顶点
    var vertices = [
        new THREE.Vector3(0,0,0),
        new THREE.Vector3(1,2,0),
        new THREE.Vector3(2,2,0),
    ];

    // 定义存储点的容器
    var geo = new THREE.Geometry();
    geo.vertices = vertices;
    // 定义平面
    geo.faces = [
        // 定义了一个平面
        new THREE.Face3(2,1,0) // 这里的 2 , 1, 0 指的是vertices定义的顶点的下标
    ];

    // 设置平面的样式
    var meshM = new THREE.MeshBasicMaterial({color: 0xff0000});

    // 绘制平面
    var mesh = new THREE.Mesh(geo, meshM);
    scene.add(mesh);

    camera.position.set(5, 5, 5);
    camera.lookAt(new THREE.Vector3(0,0,0));

    document.getElementById("container").appendChild(renderer.domElement);

    function run() {
        renderer.render(scene, camera);
        requestAnimationFrame(run);
    }

    run();
</script>
</html>

三维物体

多个平面组合起来就是三维物体，所以套路就是定义很多顶点，按照顶点组成很多平面（注意：只能是三角形哈，所以要渲染一个矩形的话就需要两个三角形拼接起来）。
这里就直接给代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="three.min.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 立方体的8个顶点
    var vertices = [
        new THREE.Vector3(1, 1, 1), //v0
        new THREE.Vector3(-1, 1, 1), //v1
        new THREE.Vector3(-1, -1, 1), //v2
        new THREE.Vector3(1, -1, 1), //v3
        new THREE.Vector3(1, -1, -1), //v4
        new THREE.Vector3(1, 1, -1), //v5
        new THREE.Vector3(-1, 1, -1), //v6
        new THREE.Vector3(-1, -1, -1) //v7
    ];

    // 定义存储点的容器
    var geo = new THREE.Geometry();
    geo.vertices = vertices;
    // 定义立方体的各个平面，
    // 立方体的每个面都是一个正方形，正方形需要两个三角形，所以定义了12个Face3
    geo.faces = [
        // 定义了一个平面
        new THREE.Face3(0,1,2),
        new THREE.Face3(0,2,3),
        new THREE.Face3(0,3,4),
        new THREE.Face3(0,4,5),
        new THREE.Face3(1,6,7),
        new THREE.Face3(1,7,2),
        new THREE.Face3(6,5,4),
        new THREE.Face3(6,4,7),
        new THREE.Face3(5,6,1),
        new THREE.Face3(5,1,0),
        new THREE.Face3(3,2,7),
        new THREE.Face3(3,7,4)
    ];

    // 设置平面的样式
    var meshM = new THREE.MeshBasicMaterial({color: 0xff0000});

    // 绘制平面
    var mesh = new THREE.Mesh(geo, meshM);
    scene.add(mesh);

    camera.position.set(5, 5, 5);
    camera.lookAt(new THREE.Vector3(0,0,0));

    document.getElementById("container").appendChild(renderer.domElement);

    function run() {
        renderer.render(scene, camera);
        requestAnimationFrame(run);
    }

    run();
</script>
</html>

threejs - 1 - 介绍&入门
 threejs - 2 - 相机
 threejs - 3 - 场景刷新
 threejs - 4 - 物体
[threejs - 5 - 材质]
[threejs - 6 - 灯光]
[threejs - 7 - 相机进阶]
[threejs - 8 - 物体进阶]
[threejs - 9 - 粒子系统]
[threejs - 10 - 模型加载]
[threejs - 11 - GLSL]
[threejs - 12 - 着色器]

End.