-
Notifications
You must be signed in to change notification settings - Fork 1
/
lighting.html
99 lines (87 loc) · 2.52 KB
/
lighting.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
97
98
99
<!doctype html>
<html>
<head>
<title>Lighting</title>
</head>
<body>
<script src="vendor/three.js"></script>
<script src='vendor/dat.gui.min.js'></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-window.innerWidth/2, window.innerWidth/2, -window.innerHeight/2, window.innerHeight/2, - 200, 200);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x000000, 1 );
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer.domElement: A canvas element to draw WebGL output
document.body.appendChild(renderer.domElement);
// Sphere 1
var geometry = new THREE.SphereGeometry(100, 100, 50);
var material = new THREE.MeshPhongMaterial({color: 0x996600});
var mesh1 = new THREE.Mesh(geometry, material);
mesh1.position.set(-200, 0, 0);
scene.add(mesh1);
// Sphere 2
material = new THREE.MeshPhongMaterial({color: 0x996600});
var mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.set(200, 0, 0);
scene.add(mesh2);
var ambientLight = new THREE.AmbientLight( 0x888888 );
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0x888888, 1 );
directionalLight.position.set( 150, 0, -150 );
scene.add(directionalLight);
var pointLight = new THREE.PointLight( 0xffffff, 1 );
scene.add(pointLight);
var spotLight = new THREE.SpotLight( 0xffffff, 1 );
spotLight.position.set( 0, 0, -200 );
spotLight.target.position.set( -200, 0, 0 );
scene.add(spotLight);
// Set up dat.GUI.
var guiConfig = {
ambient: true,
directional: true,
point: true,
spot: true
};
var gui = new dat.GUI();
gui.add(guiConfig, 'ambient').onChange(function() {
if (guiConfig.ambient) {
scene.add(ambientLight);
}
else {
scene.remove(ambientLight);
}
});
gui.add(guiConfig, 'directional').onChange(function() {
if (guiConfig.directional) {
scene.add(directionalLight);
}
else {
scene.remove(directionalLight);
}
});
gui.add(guiConfig, 'point').onChange(function() {
if (guiConfig.point) {
scene.add(pointLight);
}
else {
scene.remove(pointLight);
}
});
gui.add(guiConfig, 'spot').onChange(function() {
if (guiConfig.spot) {
scene.add(spotLight);
}
else {
scene.remove(spotLight);
}
});
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>