secondhomework/example.html at master · guohaolys/secondhomework · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
	<head>
	<meta charset="utf-8">
	<link href="example.css" rel="stylesheet" type="text/css">
		<title>homework2</title>
	</head>

	<body>

	<div id="Part1">旋转的几何体</div>
	<div id="Part2">
	<!--滚动条-->
	<marquee direction="left" scrollamount="12" loop="-1" height="50px" width="1250px">这个网页结合了html,css和JavaScript的使用，
	引用threejs的案例。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，
	可以在它的主页上看到许多精彩的演示。</marquee>
	</div>
	<div id="Part3">
	<div id="Object1"></div>
	<div id="Text1">旋转的长方体</div>
	<hr/>
	<div id="Object2"></div>
	<div id="Text2">旋转的正方体</div>
	<hr/>
	<div id="Object3"></div>
	<div id="Text3">暴走的几何体</div>
	<hr/>
	</div>


		<script src="build/three.js"></script>
		<script>
			var scene = new THREE.Scene();
			var scene2=new THREE.Scene();
			var scene3=new THREE.Scene();
			var camera1 = new THREE.OrthographicCamera( 200 / - 80, 200 / 80, 200 / 80, 200 / -80 , - 5, 10);
			var camera2 = new THREE.PerspectiveCamera( 75,1, 0.1, 1000 );
			var camera3 = new THREE.PerspectiveCamera( 75,1, 0.1, 1000 );
			camera1.position.z = 5;
			camera2.position.z = 5;
			camera3.position.z = 5;
			<!--PerspectiveCamera( 75,window.innerWidth/window.innerHeight, 0.1, 1000 );OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );-->


			var renderer1 = new THREE.WebGLRenderer();
			var renderer2 = new THREE.WebGLRenderer();
			var renderer3 = new THREE.WebGLRenderer();
			renderer1.setSize( 200, 200 );
			renderer2.setSize(200,200);
			renderer3.setSize(200,200);
			document.getElementById("Object1").appendChild( renderer1.domElement );
		    document.getElementById("Object2").appendChild( renderer2.domElement );
			document.getElementById("Object3").appendChild( renderer3.domElement );
			<!--document.body.appendChild( renderer.domElement );-->

			var geometry1 = new THREE.BoxGeometry( 3, 1, 1 );
			var geometry2=new THREE.BoxGeometry(2,2,2);
			var geometry3=new THREE.BoxGeometry(1.5,3,3.5);
			var material1 = new THREE.MeshBasicMaterial( { color: 0x00FFFF } );
			var cube1 = new THREE.Mesh( geometry1, material1 );
			var cube2=new THREE.Mesh(geometry2,material1);
			var cube3=new THREE.Mesh(geometry3,material1);
			scene.add( cube1 );
			scene2.add(cube2);
			scene3.add(cube3);


			var render = function () {
				requestAnimationFrame( render );
				cube1.rotation.x += 0.07;
				cube1.rotation.y += 0.07;

				cube2.rotation.x +=0.02;
				cube2.rotation.y +=0.02;
				cube2.rotation.z +=0.02;

				cube3.rotation.x +=0.3;
				cube3.rotation.y +=0.3;


				renderer1.render(scene, camera1);
				renderer2.render(scene2, camera2);
				renderer3.render(scene3, camera3);
			};

			render();
		</script>
	</body>
</html>