three.js画线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Three框架</title>
		<script src="../js/Three.js"></script>
		<style type="text/css">
			div#canvas-frame{
				border: none;
				cursor: pointer;
				width: 100%;
				height: 600px;
				background-color: #EEEEEE;
			}
		</style>
		<script>
			//初始化渲染器
			var renderer;
			function  initThree() {
				width=document.getElementById('canvas-frame').clientWidth;
				height=document.getElementById('canvas-frame').clientHeight;
				//初始化一个渲染器,开启抗锯齿
				renderer=new THREE.WebGLRenderer({
					antialias:true
				});
				//设置渲染窗口的大小
				renderer.setSize(width,height);
				document.getElementById('canvas-frame').appendChild(renderer.domElement);
				renderer.setClearColorHex(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;
				//UP向量
				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.Geometry();
				//定义线条材质,vertexColors:true 线条各部分的值用顶点颜色来插值
				var material=new THREE.LineBasicMaterial({vertexColors:true});
				var color1=new THREE.Color(0x444444),color2=new THREE.Color(0xFF0000);

				//线的材质可以由2点的颜色决定
				var p1=new THREE.Vector3(-100,0,100);
				var p2=new THREE.Vector3(100,0,-100);
				//vertices变量用于存放点
				geometry.vertices.push(p1);
				geometry.vertices.push(p2);
				geometry.colors.push(color1,color2);

				var line=new THREE.Line(geometry,material,THREE.LinePieces);
				scene.add(line);
            }

            function threeStart() {
				initThree();
				initCamera();
				initScene()
				initLight();
				initObject();
				renderer.clear();
				renderer.render(scene,camera);
            }
            
            
		</script>
	</head>

	<body onload="threeStart();">
		<div id="canvas-frame"></div>
	</body>
</html>
猜你喜欢
