UNPKG

threex

Version:

Game Extensions for three.js http://www.threejsgames.com/extensions/

github.com/omni360/threex

omni360/threex

86 lines (76 loc) • 3.46 kB
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
<!DOCTYPE html> <script src='../../../vendor/three.js/build/three.min.js'></script> <script src='../../../vendor/three.js/examples/js/loaders/ColladaLoader.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 ); var onRenderFcts= []; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000); camera.position.z = 3; ////////////////////////////////////////////////////////////////////////////////// // add an object and make it move // ////////////////////////////////////////////////////////////////////////////////// // var geometry = new THREE.CubeGeometry( 1, 1, 1); // var material = new THREE.MeshNormalMaterial(); // var mesh = new THREE.Mesh( geometry, material ); // scene.add( mesh ); // onRenderFcts.push(function(delta, now){ // mesh.rotation.x += 1 * delta; // mesh.rotation.y += 2 * delta; // }) ////////////////////////////////////////////////////////////////////////////////// // Comment // ////////////////////////////////////////////////////////////////////////////////// // var loader = new THREE.JSONLoader(); // loader.load( 'importBlenderSuzanne.js', function( geometry, materials ){ // var material = new THREE.MeshFaceMaterial( materials ); // var mesh = new THREE.Mesh( geometry, material ) // scene.add(mesh) // }) ////////////////////////////////////////////////////////////////////////////////// // Comment // ////////////////////////////////////////////////////////////////////////////////// var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load( 'importBlenderSuzanne.dae', function( collada ){ var object3d = collada.scene; scene.add(object3d) }) ////////////////////////////////////////////////////////////////////////////////// // 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) * (delta*3) camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3) camera.lookAt( scene.position ) }) ////////////////////////////////////////////////////////////////////////////////// // 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(onRenderFct){ onRenderFct(deltaMsec/1000, nowMsec/1000) }) }) </script></body>