three.js 点、线、坐标轴（02）

文章目录

一、3D世界的组成

在计算机中，3d是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体。

网格模型：也叫mesh模型，给物体贴上皮肤也叫纹理，那这个物体就活起来了。

二、在Threejs中定义一个点

在三维空间中，某一个点可以用一个坐标点来表示。一个坐标点由x，y，z三个分量构成。在THREE中，点可以在右手坐标系中表示

右手坐标系：即x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。

在这里插入图片描述

2.1定义一个点

three.js中的内部定义：

THREE.Vector3 = function(x,y,z){
    
    
    this.x = x || 0; //当x为Null或undefined时，this.x的值被赋值为0
    this.y = y || 0;
    this.z = z || 0;
};

我们定义一个点时：

var point1 = new THREE.Vector3(2,3,4);
//第二种方法
var point1 = new THREE.Vector3();
point1.set(1,2,3);

2.2 一个栗子----画一条直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画一条彩色的线</title>
    <script src="three.js"></script>
    <style>
        div #canvas{
     
     
            border:none;
            cursor: pointer;
            width:100%;
            height:100%;
            background-color: grey;
        }
    </style>
    <script>
        //封装渲染器
        var renderer;
        function initThree(){
     
     
            width = document.getElementById('canvas').clientWidth;
            height = document.getElementById('canvas').clientHeight;
            renderer = new THREE.WebGLRenderer({
     
     
                antialias:true  //使线条更圆润
            });
            renderer.setSize(width,height);
            document.getElementById('canvas').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF,1.0);
        }

        //封装相机
        var camera;
        function initCamera(){
     
     
            camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
            camera.position.x=0;
            camera.position.y=1000;
            camera.position.z=0;
            camera.up.x = 0;
            camera.up.y = 0;
            camera.up.z = 1;
            camera.lookAt({
     
     
                x:0,
                y:0,
                z:0
            });
        }

        //创建场景
        var scene;
        function initScene(){
     
     
            scene = new THREE.Scene();
        }

        //创建灯光
        var light;
        function initLight(){
     
     
            light = new THREE.DirectionalLight(0xFF0000,1.0,0);
            light.position.set(100,100,200);
            scene.add(light);
        }

        //创建物体
        var cube;
        function initObject(){
     
     
            var geometry = new THREE.BufferGeometry();  //声明一个几何体
            var material = new THREE.LineBasicMaterial({
     
     vertexColors:true});  //定义线条的材质
            //定义两种颜色，分别表示线条两个端点的颜色
            var color1 = new THREE.Color(0x444444),color2 = new THREE.Color(0xFF0000);

            //线的材质可以由两点的颜色决定
            //定义两个顶点的位置，并放在几何体重
            var p1 = new THREE.Vector3(-100,0,100);
            var p2 = new THREE.Vector3(100,0,-100);
            geometry.vertices.push(p1,p2);
            //geometry.vertices.push(p2);
            geometry.colors.push(color1,color2); //为物体添加颜色
            
            //定义一条线
            var line = new THREE.Line(geometry,material,THREE.LineSegments);
            scene.add(line);
        }

        //调用所有的函数
        function threestart(){
     
     
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene,camera);
        }
    </script>
</head>
<body onload="threestart();">
    <div id="canvas"></div>
</body>
</html>

三、几何体THREE.Geometry()

几何体是一个包含必要三维数据的一个数据结构。包括三部分：

点：this.vertices = [];
颜色：this.colors = [];
面：this.faces = []

定义一个几何体，并向里面添加点：

var geometry = new THREE.Geometry();
geometry.vertices.push(
	new THREE.Vector3(-100,100,0),
    new THREE.Vector3(100,-100,0),
    new THREE.Vector3(100.-100,0)
);

注：在实际实现的过程中，发现THREE.Geometry会报错，或许是因为版本的原因？把它改成THREE.BufferGeometry();就不会报错了

四、线条的材质THREE.LineBasicMaterial

线条的材质就是表面结合了各种可视属性，这些可视属性包括表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

使用THREE.LineBasicMaterial类型来定义线的材质，它接受一个集合作为参数，原型如下：

LineBasicMaterial(parameters)

THREE.LineBasicMaterial = function(parameters)

parameters是一个定义材质外观的对象，它包含多个属性来定义材质：

Color：线条的颜色，用16进制来表示，默认的颜色是白色。
Linewidth：线条的宽度，默认是1个单位宽度。（注：普通的renderer渲染器是不支持改变宽度的，只有CanvasRenderer才支持改变宽度）
Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看的初效果，如果线条很细，那么几乎看不出效果了。
Linejoin：两条线条的连接点处的外观，默认是“round”，表示圆角。
VertexColors：定义线条材质是否使用顶点颜色，这是一个Boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。
Fog：定义材质的颜色是否受全局雾效的影响。

4.1插值

简单来说，就是颜色的过渡，当我们绘制出一条直线时，如果两个顶点颜色不一样，会发现直线是一条颜色过渡的直线。这就是插值
在这里插入图片描述

五、关于坐标系

在three.js中，使用的是右手坐标系（即x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。）

关于围绕某个轴旋转：拇指指向旋转轴的正方向，四指弯曲的方向为旋转的正方向。

cube.rotation.y -= 0.01;  //弧度

5.1 世界坐标和本地坐标

世界坐标：一个应用程序可能包含成百上千个单独的对象，我们必须把他们放到一个公共的场景里，这个公共的场景就叫做世界坐标。

相机默认在世界坐标的原点
3D屏幕中的所有物体都可以在该坐标系系统下移动和旋转
对于屏幕上所有的物体来说，这个坐标系是相同的，并且它不会改变
用户默认的观察视角是沿着Z轴的负半轴方向

本地坐标：物体的本身的坐标，即物体中心点。

5.2 AxesHelper三维坐标系

可以在场景中添加辅助坐标系帮助开发
可以使物体绕着本地坐标系旋转，而不绕世界坐标系旋转
用于简单模拟3个坐标轴的对象（红色代表x轴，绿色代表y轴，蓝色代表z轴）

var axeshelper = new THREE.AxesHelper(5);
axesHelper.rotation.y -=0.01; //围绕坐标轴旋转
scene.add(axeshelper)