-
Notifications
You must be signed in to change notification settings - Fork 0
/
3d.html
121 lines (108 loc) · 3.55 KB
/
3d.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Lasers</title>
<script src="lib/three.min.js"></script>
<script src="lib/threex.laserbeam.js"></script>
<script src="lib/threex.lasercooked.js"></script>
</head>
<body style="margin: 0px; background-color: #bbbbbb; overflow: hidden;">
<script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor('black', 1);
var onRenderFcts = [];
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 10;
// Lighting
var light = new THREE.HemisphereLight(0xfffff0, 0x101020, 0.2);
light.position.set(0.75, 1, 0.25);
scene.add(light);
// Camera Controls
var mouse = {
x: 0,
y: 0
};
document.addEventListener('mousemove', function(event) {
mouse.x = (event.clientX / window.innerWidth) - 0.5;
mouse.y = (event.clientY / window.innerHeight) - 0.5;
}, false);
onRenderFcts.push(function(delta, now) {
camera.position.x += (mouse.x * 20 - camera.position.x) * 0.01;
camera.position.y += (mouse.y * 20 - camera.position.y) * 0.01;
camera.lookAt(scene.position);
});
// Add an object and make it move
var nLasers = 14;
for (var i = 0; i < nLasers; i++) {
(function() {
var laserBeam = new THREEx.LaserBeam();
scene.add(laserBeam);
var laserCooked = new THREEx.LaserCooked(laserBeam);
onRenderFcts.push(function(delta, now) {
laserCooked.update(delta, now);
});
laserBeam.position.x = (i - nLasers / 2) / 2;
laserBeam.position.y = 4;
laserBeam.rotation.z = -Math.PI / 2;
})();
}
// Out box
(function() {
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xaa8888,
specular: 0xffffff,
shininess: 300,
side: THREE.BackSide,
});
var object3d = new THREE.Mesh(geometry, material);
object3d.scale.set(10, 8, 10);
scene.add(object3d);
})();
// Moving torus
(function() {
var geometry = new THREE.TorusGeometry(0.5 - 0.15, 0.15, 32, 32);
var material = new THREE.MeshPhongMaterial({
color: 0xffffff,
specular: 0xffffff,
shininess: 200,
});
var object3d = new THREE.Mesh(geometry, material);
object3d.scale.set(1, 1, 1).multiplyScalar(5);
scene.add(object3d);
onRenderFcts.push(function(delta, now) {
var angle = 0.1 * Math.PI * 2 * now;
angle = Math.cos(angle) * Math.PI / 15 + 3 * Math.PI / 2;
var radius = 30;
object3d.position.x = Math.cos(angle) * radius;
object3d.position.y = (radius - 1) + Math.sin(angle) * radius;
object3d.position.z = 0.1; // Couch
// workaround: if the laser is exactly between 2 faces, it can go thru
// object3d.rotation.x = 0.05*Math.PI*2*now;
});
})();
// Render the scene
onRenderFcts.push(function() {
renderer.render(scene, camera);
});
// Loop runner
var lastTimeMsec = null
requestAnimationFrame(function animate(nowMsec) {
// keep looping
requestAnimationFrame(animate);
// measure time
lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60;
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec);
lastTimeMsec = nowMsec;
// call each update function
onRenderFcts.forEach(function(updateFn) {
updateFn(deltaMsec / 1000, nowMsec / 1000);
});
});
</script>
</body>
</html>