【ThreeJS】图形基础：点、线、面

坐标系如下

 

声明一个点

var point1 = new THREE.Vecotr3(4,8,9);

或

var point1 = new THREE.Vector3();
point1.set(4,8,9);

点并不是一个图像上的一个画出来的点，图像上画出来的实际是由点组成的圆柱或者球体。这里只是代表一个坐标。

 

创建一条线或者一组折线

         //声明几何体
        var geometry = new THREE.Geometry();
        //定义线的颜色
        // Parameters是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是：
        // Color：线条的颜色，用16进制来表示，默认的颜色是白色。
        // linewidth：线条的宽度，默认时候1个单位宽度。 这个参数设置了也没用
        // Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
        // Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
        // VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。
        // Fog：定义材质的颜色是否受全局雾效的影响。
        var material = new THREE.LineBasicMaterial({vertexColors:false,color:0xFF0000});
        var color1 = new THREE.Color(0xFF0000), color2 = new THREE.Color(0xFFFF00);
        // 创建点，此处创建并放到几何体里面两个点，是一条线段，三个点是一条折现
        var p1 = new THREE.Vector3(-100, 0, 100);
        var p2 = new THREE.Vector3(100, 0, -100);
        var p3 = new THREE.Vector3(100, 0, 100);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        geometry.vertices.push(p3);
        //创建线   THREE.LineSegments 这个方法是创建线段的意思 有些文章里面 写的是THREE.LinePieces  但是在84版以后（我用的84版和107版）都不在支持了
        var line = new THREE.Line(geometry, material, THREE.LineSegments);
        //加入到场景
        scene.add(line);

画一个面，说实话我没找到画面（直接画面）的方法，网上的教程一般分为两种：1.画一个由线段网格构成的面；2.画一个立方体。这两种方法也没什么演示必要。