-
Notifications
You must be signed in to change notification settings - Fork 4
/
shadows.html
96 lines (76 loc) · 2.86 KB
/
shadows.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
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<title>Yeah!</title>
<script type="text/javascript" src="three.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" id="display-logic">
var WIDTH = 1000,
HEIGHT = 600;
VIEW_ANGLE = 45,
ASPECT_RATIO = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT_RATIO, NEAR, FAR);
var scene = new THREE.Scene();
//camera.position.z = 500;
// camera.position.y = 400;
camera.position.set(0, -400, 500);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var floor = new THREE.Mesh(
new THREE.PlaneGeometry(3000, 3000, 100, 100),
new THREE.MeshBasicMaterial({color: '#139', wireframe: false})
);
floor.position.set(0, 0, 0);
floor.receiveShadow = true;
scene.add(floor);
var crateTexture = THREE.ImageUtils.loadTexture('http://i.imgur.com/eH3YvZw.jpg');
var crateMaterial = new THREE.MeshPhongMaterial({map: crateTexture, color: 0xFFFFFF});
var crate = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), crateMaterial);
crate.receiveShadow = true;
crate.castShadow = true;
crate.position.set(0, 0, 150);
scene.add(crate);
var crate2 = new THREE.Mesh(new THREE.CubeGeometry(15, 15, 15), crateMaterial);
crate2.receiveShadow = true;
crate2.castShadow = true;
crate2.position.set(0, 0, 200);
scene.add(crate2);
var spotLight = new THREE.SpotLight('#222');
spotLight.position.set(0, 0, 400);
spotLight.castShadow = true;
spotLight.shadowDarkness = 0.35;
spotLight.intensity = 10;
spotLight.castShadow = true;
scene.add(spotLight);
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(30, 46, 16),
new THREE.MeshBasicMaterial({color: '#913', wireframe: true})
);
sphere.position = spotLight.position;
scene.add(sphere);
var ambientLight = new THREE.AmbientLight('#444');
scene.add(ambientLight);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor('#000');
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
var frame = 0;
var render = function() {
requestAnimationFrame(render);
scene.remove(crate);
crate.rotation.z -= 0.025;
crate2.rotation.z += 0.075;
crate2.rotation.y += 0.075;
scene.add(crate);
scene.add(camera);
renderer.render(scene, camera);
};
render();
document.getElementById('container').appendChild(renderer.domElement);
</script>
</body>
</html>