master

分支 (1)

管理

管理

master

html5
/
light1.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>光源1</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.setClearColor(0xFFFFFF, 1.0);
			}
			var camera;
			function initCamera() {
				camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
				camera.position.x = 500;
				camera.position.y = 0;
				camera.position.z = 400;
				camera.up.x = 0;
				camera.up.y = 0;
				camera.up.z = 0;
				camera.lookAt({
					x : 0,
					y : 0,
					z : 0
				});
			}
			var scene;
			function initScene() {
				scene = new THREE.Scene();
			}
			// A begin
			var light;
			function initLight() {
				light = new THREE.AmbientLight(0x00FF00);
                light.position.set(1000, 1000, 1000);
                scene.add(light);

                light = new THREE.PointLight(0xFF0000);
                light.position.set(0, 0,300);
                scene.add(light);
			}
			// A end
			function initObject() {
				var geometry = new THREE.BoxGeometry( 200, 100, 50,4,4);
                var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
                var mesh = new THREE.Mesh( geometry,material);
                mesh.position.set(0,0,0);
                scene.add(mesh);

                var geometry2 = new THREE.BoxGeometry( 200, 100, 50,4,4);
                var material2 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
                var mesh2 = new THREE.Mesh( geometry2,material2);
                mesh2.position.set(-300,0,0);
                scene.add(mesh2);

                var geometry3 = new THREE.BoxGeometry( 200, 100, 50,4,4);
                var material3 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
                var mesh3 = new THREE.Mesh( geometry3,material3);
                mesh3.position.set(0,-150,0);
                scene.add(mesh3);

                var mesh4 = new THREE.Mesh( geometry3,material3);
                mesh4.position.set(0,150,0);
                scene.add(mesh4);

                var mesh5 = new THREE.Mesh( geometry3,material3);
                mesh5.position.set(300,0,0);
                scene.add(mesh5);

                var mesh6 = new THREE.Mesh( geometry3,material3);
                mesh6.position.set(0,0,-100);
                scene.add(mesh6);
			}
			function threeStart() {
				initThree();
				initCamera();
				initScene();
				initLight();
				initObject();
				renderer.clear();
				renderer.render(scene, camera);
			}
		</script>
	</head>
	<body onload="javascript:threeStart();">
		<div id="canvas-frame"></div>
	</body>
</html>