-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmirror2.html
107 lines (90 loc) · 2.75 KB
/
mirror2.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
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<title>Mirror</title>
</head>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
<body>
<div id="container"></div>
</body>
<script src="bower_components/three.js/build/three.js"></script>
<script src="bower_components/three.js/examples/js/controls/TrackballControls.js"></script>
<script src="bower_components/three.js/examples/js/Mirror.js"></script>
<script src="bower_components/dat.gui/dat.gui.min.js"></script>
<script src="js/classes.js"></script>
<script>
var camera, scene, renderer, controls, gui;
var angle = 0;
var clock = new THREE.Clock();
var time;
var mirror;
var box;
const DEFAULT_LAYER = 0,
OCCLUSION_LAYER = 1,
OTHER = 2;
function resize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function init() {
var container = document.getElementById( 'container' );
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCSoftShadowMap;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.setClearColor(0xededed);
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0, 0, 10);
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 2.0;
controls.panSpeed = 0.8;
controls.zoomSpeed = 1.5;
scene = new THREE.Scene();
var directionalLight = new THREE.DirectionalLight(0xffffff, .7);
directionalLight.position.set(1, -1, 0).normalize();
directionalLight.castShadow = true;
var ambientLight = new THREE.AmbientLight(0xffffff);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 0, 0);
scene.add(ambientLight);
scene.add(directionalLight);
scene.add(pointLight);
var group = new THREE.Group();
mirror = new THREE.Mirror(5, 5, {
clipBias : 0.003,
textureWidth: window.innerWidth * window.devicePixelRatio,
textureHeight: window.innerHeight * window.devicePixelRatio,
color: 0x777777
});
mirror.rotation.x = -Math.PI/2;
mirror.position.y = -1;
group.add(mirror);
box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshPhongMaterial({color : 0x000000}));
group.add(box);
group.rotation.x = Math.PI/6;
scene.add(group);
window.addEventListener('resize', resize);
}
function update(){
box.rotation.y += .005;
box.rotation.x += .005;
camera.lookAt(scene.position);
controls.update();
}
function animate(){
update();
renderer.render(scene, camera);
window.requestAnimationFrame(animate);
}
init();
animate();
</script>
</html>