threejs：二维绘图（基础点，线，不规则图形等）

总目录 >> threejs入门进阶到实战(目前已更新入门篇、基础篇和进阶篇)

此处点线面的基础教学比较好:http://www.yanhuangxueyuan.com/Three.js_course/face.html

其实对于threejs来说,只有点,线,以及其他形状.

知识补充:0x0000ff 0x表示16进制,ff为256,中间两个0就是0.此处采用的是RGB制

点的绘制

 var geometry = new THREE.Geometry();//声明一个空几何体对象
    var p1 = new THREE.Vector3(10,0,0);//顶点1坐标
    var p2 = new THREE.Vector3(0,20,0);//顶点2坐标
    var p3 = new THREE.Vector3(15,15,0);//顶点3坐标
    geometry.vertices.push(p1,p2,p3); //顶点坐标添加到geometry对象
    var material=new THREE.PointsMaterial({
        color:0x0000ff,
        size:1.0//点对象像素尺寸
    });//材质对象
    var points=new THREE.Points(geometry,material);//点模型对象
    sceneB.add(points);//点对象添加到场景中

会发现这个点并不符合我们的要求,因为实际的点应当是圆的.因为默认形状是像素点.因此我们需要加载适当的形状…(相当于为点加了纹理.)map: sprite,

function drawPoints(){
  var sprite = new THREE.TextureLoader().load( 'images/disc.png' );//点的纹理
  var geometry = new THREE.Geometry();//声明一个空几何体对象
    var p1 = new THREE.Vector3(-10,0,0);//顶点1坐标
    var p2 = new THREE.Vector3(0,10,0);//顶点2坐标
    var p3 = new THREE.Vector3(10,0,0);//顶点3坐标
    geometry.vertices.push(p1,p2,p3); //顶点坐标添加到geometry对象
    var material=new THREE.PointsMaterial({
        color:0x0000ff,
        size:1.0,//点对象像素尺寸
        map: sprite,//像素形状
        alphaTest: 0.5, transparent: true
    });//材质对象
    var points=new THREE.Points(geometry,material);//点模型对象
    sceneB.add(points);//点对象添加到场景中

}

最终的成品效果:

线的绘制

function drawLine(){
        var LineMaterial=new THREE.LineBasicMaterial({color:0x0000ff});
        var LineGeometry=new THREE.Geometry();
        LineGeometry.vertices.push(new THREE.Vector3(-10,0,0));
        LineGeometry.vertices.push(new THREE.Vector3(0,10,0));
        LineGeometry.vertices.push(new THREE.Vector3(10,0,0));

        var line=new THREE.Line(LineGeometry,LineMaterial);
        sceneB.add(line);

}

其他形状的绘制

当你 想画矩形的时候.就要使用到:形状几何体（ShapeGeometry）
https://threejs.org/docs/#api/zh/geometries/ShapeGeometry

function drawRectangle(){



        var rectLength = 120, rectWidth = 40;

		var rectShape = new THREE.Shape();
		rectShape.moveTo( 0, 0 );
		rectShape.lineTo( 0, rectWidth );
		rectShape.lineTo( rectLength, rectWidth );
		rectShape.lineTo( rectLength, 0 );
		rectShape.lineTo( 0, 0 );
		var geometry2 = new THREE.ShapeGeometry( rectShape);
        var material2 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
        var mesh2 = new THREE.Mesh( geometry2, material2 ) ;
		sceneB.add(mesh2);

}

使用了mesh后,我们得到的是 一个内部也上了色的形状,但这并不符合CAD草图绘制的意图.因此我们需要将复杂的形状,拆解成线框形式,
https://threejs.org/examples/webgl_geometry_shapes.html
上述代码改写为:

group = new THREE.Group();
group.position.y = 50;
sceneB.add( group );


function drawRectangle(){



        var rectLength = 120, rectWidth = 40;

		var rectShape = new THREE.Shape();
		rectShape.moveTo( 0, 0 );
		rectShape.lineTo( 0, rectWidth );
		rectShape.lineTo( rectLength, rectWidth );
		rectShape.lineTo( rectLength, 0 );
		rectShape.lineTo( 0, 0 );
		//var geometry2 = new THREE.ShapeGeometry( rectShape);
        //var material2 = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
        //var mesh2 = new THREE.Mesh( geometry2, material2 ) ;
		//sceneB.add(mesh2);
        addLineShape(rectShape,0xff0000, 150, 0, 0, 0, 0, 0, 1);



}



function addLineShape( shape, color, x, y, z, rx, ry, rz, s ) {

					// lines

					shape.autoClose = true;

					var points = shape.getPoints();
					var spacedPoints = shape.getSpacedPoints( 50 );

					var geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
					var geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints( spacedPoints );

					// solid line

					var line = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) );
					line.position.set( x, y, z - 25 );
					line.rotation.set( rx, ry, rz );
					line.scale.set( s, s, s );
					group.add( line );

					// line from equidistance sampled points

					var line = new THREE.Line( geometrySpacedPoints, new THREE.LineBasicMaterial( { color: color } ) );
					line.position.set( x, y, z + 25 );
					line.rotation.set( rx, ry, rz );
					line.scale.set( s, s, s );
					group.add( line );

					// vertices from real points

					var particles = new THREE.Points( geometryPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
					particles.position.set( x, y, z + 75 );
					particles.rotation.set( rx, ry, rz );
					particles.scale.set( s, s, s );
					group.add( particles );

					// equidistance sampled points

					var particles = new THREE.Points( geometrySpacedPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
					particles.position.set( x, y, z + 125 );
					particles.rotation.set( rx, ry, rz );
					particles.scale.set( s, s, s );
					group.add( particles );

				}