-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (67 loc) · 2.34 KB
/
index.html
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
<!doctype html>
<html>
<head>
<title>Three.js Test</title>
<style> canvas { width: 100%; height: 100% } </style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.z = 300;
camera.position.y = 40;
var light = new THREE.SpotLight();
light.position.set(100, 50, 100);
scene.add(light);
// initialize renderer and add canvas element to DOM
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// set scene background color
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.clear();
// add objects to scene
var vasePlane0 = new THREE.Mesh(
new THREE.CubeGeometry(100,50,5),
new THREE.MeshLambertMaterial({ color: 0xFFFFFF }));
var vasePlane1 = new THREE.Mesh(
new THREE.CubeGeometry(100,50,5),
new THREE.MeshLambertMaterial({ color: 0xFFFFFF }));
var vasePlane2 = new THREE.Mesh(
new THREE.CubeGeometry(100,50,5),
new THREE.MeshLambertMaterial({ color: 0xFFFFFF }));
var vasePlane3 = new THREE.Mesh(
new THREE.CubeGeometry(100,50,5),
new THREE.MeshLambertMaterial({ color: 0xFFFFFF }));
var vaseArray = [vasePlane0, vasePlane1, vasePlane2, vasePlane3];
for (var i = 0, len = vaseArray.length; i < len; i++) {
scene.add(vaseArray[i]);
}
// turn shadows on
renderer.shadowMapEnabled = true;
light.castShadow = true;
for (var i = 0, len = vaseArray.length; i < len; i++) {
vaseArray[i].castShadow = true;
vaseArray[i].receiveShadow = true;
}
function animate(t) {
// position objects along a circular path
for (var i = 0, len = vaseArray.length; i < len; i++) {
vaseArray[i].position.z = 80*Math.cos((t/1000) + (i*Math.PI/2));
vaseArray[i].position.x = 80*Math.sin((t/1000) + (i*Math.PI/2));
}
// rotate the objects
// vasePlane.rotation.x = .000;
// vasePlane.rotation.y += 0.0;
// vasePlane.rotation.z = .000;
// update lookAt every frame
camera.lookAt(scene.position);
// renderer automatically clears unless autoClear = false
renderer.render(scene, camera);
window.requestAnimationFrame(animate, renderer.domElement);
};
animate(new Date().getTime());
</script>
</body>
</html>