three.js-drawLine

Three.js学习笔记 本篇上一篇介绍的raycaster和curves(曲线)实现在canvas画画。
目前只支持画线。

添加画板

我们可以添加一个Plane当做画板，要足够的大。

    var geometry = new THREE.PlaneGeometry(10000, 10000, 20);
				var material = new THREE.MeshBasicMaterial({
				
				    // 这里利用这两个参数设置plane为透明
					opacity: 0,
					transparent: true
				});
				var ground = new THREE.Mesh(geometry, material);
				
				ground.position.set(0, 0, 0);
				array.push(ground);
				scene.add(ground);

添加画笔

然后添加一个raycaster当做画笔。利用raycaster的intersectObjects()方法获取和射线相交对象，通过该对象的point属性获取当前相交的交点坐标。

            
			var helpPoint = new THREE.Vector3();

			function render() {

				stats.update();
				raycaster.setFromCamera(mouse, camera);
				
				var intersects = raycaster.intersectObjects(array);

				if(intersects.length > 0) {
				    
				    //获取画笔和画板的交点左边，并保存到`helpPoint`中
					helpPoint = intersects[0].point;
				}
				requestAnimationFrame(render);
				renderer.render(scene, camera);
			}

添加画线事件

                var v = []; //用来存储要绘制曲线的点
                var obj = new THREE.Object3D(); //用来存储绘制好的曲线
                  
                //添加鼠标按下事件
                
                //鼠标按下开始绘制
				document.addEventListener('mousedown', onDocumentMouseDownLine, false);
						
				function onDocumentMouseDownLine(event) {
				
				    event.preventDefault();
				    //初始化`v`，获取的所有点的集合
				    v = [];
				//添加鼠标移动事件，画线
				    document.addEventListener('mousemove', onDocumentMouseMoveLine, false);
			    }
				
				function onDocumentMouseMoveLine(event) {
				
				event.preventDefault();
                
                //将绘制过程中获取的点放入`v`中
				v.push(new THREE.Vector2(helpPoint.x, helpPoint.y));
			}
                
                //添加鼠标抬起事件
                function onDocumentMouseUpLine(event) {
                
				event.preventDefault();
				
				//将绘制的曲线放入`obj`中
				obj.add(line);
				//初始化 v
				v = [];
				document.removeEventListener('mousemove', onDocumentMouseMoveLine, false);
			}

画2D线

            function drawLine(v) {
                
                // 用`v`中的点生成一条曲线
				var curve = new THREE.SplineCurve(v);

				var Linematerial = new THREE.LineBasicMaterial({
					color: 0x000000
				});
                
				var path = new THREE.Path(curve.getPoints(1000));
                
				Linegeometry = path.createPointsGeometry(1000);

                //使用曲线在场景中绘制出曲线
				line = new THREE.Line(Linegeometry, Linematerial);
				
				
				scene.add(line);
			}

			function render() {
                
                //因为创建SplineCurve必须要两个点，所以要`v.length`大于2是才能调用drawLine()
				if(v.length > 2) {
				
				    //要移除了场景中的线，实时画新的线。直到鼠标抬起重置`v = []`
					scene.remove(line);
					drawLine(v);
					//添加以前画的所有线段
					scene.add(obj);
				}
			}

---

画3D线

同样的我们也可以用上述方法画3D的线，但是由于point属性只包含x和y轴的坐标。所以我们需要自定义另一个坐标轴的坐标。
这里我们可以自定义z轴坐标（本例中设为了一个常量）。

    //重写`mousemove`鼠标移动方法
    function onDocumentMouseMoveLine(event) {
				event.preventDefault();
                
                //因为下面要画3D生成过称中不允许出现重复的点，所以要去除重复的点  
				var temp = v[v.length - 1];
                
                //这里我们将`z`轴坐标设为常量50 
				if(temp) {
					if(temp.x == helpPoint.x && temp.y == helpPoint.y && temp.z == 50) {
						return;
					}
				}
				v.push(new THREE.Vector3(helpPoint.x, helpPoint.y, 50));
			}
    
    //重写函数`drawLine(v)`
    
    function drawLine(v) {
                
                //这里使用`CatmullRomCurve3`生成曲线
				var curve = new THREE.CatmullRomCurve3(v);

				var extrudeSettings = {
					curveSegments: 12,
					steps: 200,
					amount: 2,
					extrudePath: curve
				};
				var pts = [];
				pts.push(new THREE.Vector2(5, 5));
				pts.push(new THREE.Vector2(5, -5));
				pts.push(new THREE.Vector2(-5, -5));
				pts.push(new THREE.Vector2(-5, 5));

				var shape = new THREE.Shape(pts);
                
                //使用`ExtrudeGeometry`来扩展或说是挤压曲线，将曲线变成3D
				var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

				var material = new THREE.MeshBasicMaterial({
					color: 0xff8000
				});

				mesh = new THREE.Mesh(geometry, material);

				scene.add(mesh);

			}
    

---

ExtrudeGeometry

Constructor

    var geometry = new THREE.ExtrudeGeometry(shapes,options);

Main Properties

• shapes :形状或是一系列的形状
• options :选项参数

Options

• curveSegments :曲线上的点数
• steps :用于细分曲线段数
• amount :深度挤压的形状数
• extrudePath :THREE.CurvePath,3D曲线来扩展

View source

• source code 2D
• source code 3D