-
Notifications
You must be signed in to change notification settings - Fork 19
/
lasercooked.html
124 lines (109 loc) · 4.34 KB
/
lasercooked.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
122
123
124
<!DOCTYPE html>
<script src='vendor/three.js/build/three.js'></script>
<script src='../threex.laserbeam.js'></script>
<script src='../threex.lasercooked.js'></script>
<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;
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
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*5 - camera.position.x) * 0.01
camera.position.y += (mouse.y*5 - camera.position.y) * 0.01
camera.lookAt( scene.position )
})
//////////////////////////////////////////////////////////////////////////////////
// add an object and make it move //
//////////////////////////////////////////////////////////////////////////////////
var laserBeam = new THREEx.LaserBeam()
scene.add(laserBeam.object3d)
// laserBeam.object3d.position.x = 2
var laserCooked = new THREEx.LaserCooked(laserBeam)
onRenderFcts.push(function(delta, now){
laserCooked.update(delta, now)
})
onRenderFcts.push(function(delta, now){
var object3d = laserBeam.object3d
object3d.rotation.x += 0.4 * delta;
object3d.rotation.y += 0.5 * delta;
})
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
;(function(){
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({
color : 0xaa8888,
specular: 0xffffff,
// shininess: 200,
side : THREE.BackSide,
});
var object3d = new THREE.Mesh( geometry, material )
object3d.scale.set(10,5,10)
scene.add(object3d)
})()
for(var i = 0; i < 200; i++){
(function(){
var geometry = new THREE.TorusGeometry(0.5-0.15, 0.15, 32, 16);
//var geometry = new THREE.SphereGeometry(0.5, 32, 16);
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(1/2)
scene.add( object3d );
object3d.position.x = (Math.random()-0.5)*10
object3d.position.y = (Math.random()-0.5)*5
object3d.position.z = (Math.random()-0.5)*10
object3d.rotation.x = (Math.random()-0.5)*Math.PI*2
object3d.rotation.y = (Math.random()-0.5)*Math.PI*2
object3d.rotation.z = (Math.random()-0.5)*Math.PI*2
// onRenderFcts.push(function(delta, now){
// object3d.rotation.x += 1 * delta;
// object3d.rotation.y += 0.01;
// })
})()
}
//////////////////////////////////////////////////////////////////////////////////
// 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>