three.js/xiaoche6.html at master · hanweizhe/three.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>THree Js</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="400"></canvas>
		<script type="text/javascript" src="js/three.min.js"></script>
		<script type="text/javascript" src="js/MTLLoader.js"></script>
		<script type="text/javascript" src="js/OBJLoader.js"></script>
		<script type="text/javascript">
			var renderer =new THREE.WebGLRenderer({
				canvas:document.getElementById('canvas')
			});
			renderer.setClearColor(0x000000);
			var scene = new THREE.Scene();

			var camera= new THREE.OrthographicCamera(-5,5,4,-4,0.1,100);
			camera.position.set(3,4,5);
			camera.lookAt(new THREE.Vector3(0,2,0));
			scene.add(camera);

			var light = new THREE.DirectionalLight(0xffffff);
			light.position.set(20,10,5);
			scene.add(light);
			var onError = function(error){

			};
			var onProgress = function(xhr){
				if(xhr.lengthComputable){
					var percentComplete =xhr.loaded/xhr.total*100;
					console.log(Math.round(percentComplete,2)+'% downloaded');
				}
			}

			var mtlLoader =new THREE.MTLLoader();
			mtlLoader.setPath('loader/');
			mtlLoader.load('port.mtl',function(materials){
//				materials.preload();

				var objLoader =new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('loader/');
				objLoader.load('port.obj',function(object){
					object.position.y=-95;

					if(object.children.length>0){
						scene.add(object.children[0]);
					}

				},onProgress,onError);
			});
//			renderer.render(scene,camera);
			id=setInterval(draw,20);

			function draw(){
				renderer.render(scene,camera);

			}
		</script>
	</body>
</html>