3.three.js 基础图形

1.绘制线段

线段的纹理材质只有实线LineBasicMaterial 或者虚线 LineDashedMaterial，使用THREE.Vector3（）指定顶点坐标后，使用THREE.BufferGeometry().setFromPoints()生成顶点，使用THREE.Line()将顶点链接。

生成线段的类

export class Line {    material:any    linepoint:Array<any>=[]    geometry:any    line:any    constructor(option:any){        this.material = new THREE.LineBasicMaterial( { color: option.color } );        option.linePoint.forEach((item:any)=>{            this.linepoint.push(new THREE.Vector3( item[0],item[1],item[2] ))        })                this.geometry = new THREE.BufferGeometry().setFromPoints( this.linepoint );        this.line = new THREE.Line( this.geometry, this.material );        return this.line    }}

定义生成线段的方法

const addline=()=>{    const option ={      color:0xffffff,      linePoint:[[-5,5,0],[-5,5,5],[-5,0,5],[-5,0,0],[-5,5,0]]    }    const lineModel =new Line(option)    scene.add(lineModel);  }

2.绘制平面（二维矩阵）

绘制简单的平面，首先定义平面的模型，然后定义材质，生成平面

export class Plane {    planeGeometry :any    planeMaterial:any    plane:any    constructor(option:any){        this.planeGeometry  = new THREE.PlaneGeometry(option.plane[0], option.plane[1], option.plane[2], option.plane[3]);        this.planeMaterial = new THREE.MeshPhongMaterial({color: option.color,side:THREE.DoubleSide});        this.plane = new THREE.Mesh(this.planeGeometry, this.planeMaterial);        return this.plane    }}



//rotation.x使生成平面环绕x轴环绕90度
const addplane=()=>{    const option={      color:0xaaaaaa,      plane:[20,20,1,1]    }    const planeModel:any=new Plane(option)    planeModel.rotation.x = 0.5 * Math.PI;    planeModel.position.x=10    planeModel.position.y=0    planeModel.position.z=10    scene.add(planeModel)  }