master

分支 (1)

管理

管理

master

d3-project
/
三角，line.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#canvas-frame{
			border:none;
			cursor: pointer;
			width:100%;
			height:600px;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div id="canvas-frame"></div>
</body>
<!-- <script src='three.js'></script> -->
<script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
<script>
	window.onload = function(){
		var renderer,camera,scene,light,cube;
		function inintThree(){
			width = document.getElementById('canvas-frame').clientWidth;
			height = document.getElementById('canvas-frame').clientHeight;
			renderer = new THREE.WebGLRenderer({
				antialias:false   //抗锯齿  true 会占用更多资源
			})
			renderer.setSize(width,height); //渲染器的大小
			//把renderer添加到dom节点里
			document.getElementById('canvas-frame').appendChild(renderer.domElement);
			renderer.setClearColor(0x000000,1.0);//每一帧绘制之后进行刷新，不刷新可能回重叠等，留下我们不想要的线条
		}
		function initCamera(){
			//初始化一个相机 最近能看到1 ，最远能看到10000
			camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
			//相机位置
			camera.position.x = 0;
			camera.position.y = 0;
			camera.position.z = 400;
			//相机的上方向，决定相机摆放的旋转角度，（0,1,0）指相机的快门是朝上的
			camera.up.x = 0;
			camera.up.y = 1;
			camera.up.z = 0;
			//代表一个方向 ，相机镜头看的方向
			camera.lookAt({
				x:0,
				y:0,
				z:0
			})
		}
		//初始化场景
		function initScene(){
			scene = new THREE.Scene();
		}
		//初始化灯光
		function initLight(){
			light = new THREE.DirectionalLight(0xFF0000,1.0,0);
			light.position.set(1000,1000,200);
			scene.add(light)
		}
		//初始化演员
		function initObject(){
			var geometry = new THREE.Geometry();
			var material = new THREE.LineBasicMaterial({vertexColors:true});  //设置一个线的材质,设置会用下面的颜色
			var color1 = new THREE.Color(0x444444),color2 = new THREE.Color(0xFF0000),color3 = new THREE.Color(0xFFFF00);

			/**
			 * 设置两个点： Vector3(x,y,z)
			 */
			//线的材质可由2点的颜色决定
			var p1 = new THREE.Vector3(-100,0,0);
			var p2 = new THREE.Vector3(100,0,0);

			var p3 = new THREE.Vector3(0,100,0);

			geometry.vertices.push(p1);
			geometry.vertices.push(p2);
			geometry.vertices.push(p3);
			geometry.vertices.push(p1);
			//最后加上p1是要线连回去
			geometry.colors.push(color1,color2,color3,color1);
			//开始划线
			// var line = new THREE.Line(geometry,material,THREE.LineSegments);
			var line = new THREE.Line(geometry,material,THREE.LineStrip);
			// var line = new THREE.Line(geometry,material,THREE.LinePieces);
			//THREE.LineSegments  参数是划线的方式
			scene.add(line); //渲染到场景里
		}
		function DomInit(){
			inintThree();
			initCamera();
			initScene();
			initLight();
			initObject();
			renderer.clear();//清空一次，与 inintThree() 里的renderer.setClearColor(0xFFFFFF,1.0);对应
			renderer.render(scene,camera);
		}

		DomInit();
	}
</script>
</html>