API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 21st, 2017
39
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.50 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>My first three.js app</title>
  4. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  5. <style>
  6. body { margin: 0; }
  7. canvas { width: 100%; height: 100% }
  8. </style>
  9. </head>
  10. <body>
  11. <script src="js/three.js"></script>
  12. <script src="js/webvr.js"></script>
  13. <script>
  14. var loader = new THREE.TextureLoader();
  15. var texture = loader.load( "assets/UV_Grid_Sm.jpg" );
  16. texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  17. texture.repeat.set( 0.008, 0.008 );
  18.  
  19. var scene = new THREE.Scene();
  20. var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
  21.  
  22.  
  23. var renderer = new THREE.WebGLRenderer();
  24. renderer.setSize( window.innerWidth, window.innerHeight );
  25.  
  26. var y_val = 1;
  27. var gravity = 9.8;
  28. var Bottom, Sphere;
  29. var coor = {x: 0, y: y_val, z: 0, deg: 0, ydeg: 0, frame: 0, v_x: 0, v_z: 0};
  30. var moving = {doing: false, ori_x: 0, ori_y: 0, ori_deg: 0};
  31. var press = {left: false, right: false, up: false, down: false};
  32. var moveScale = {move: 6, deg: 2};
  33. var cursor_now = {x: 0, y: 0};
  34. var jump = {jumping: false, time: 0};
  35. var prev_time = 0;
  36.  
  37. function init(){
  38. WEBVR.checkAvailability().catch( function( message ) {
  39. document.body.appendChild( WEBVR.getMessageContainer( message ) );
  40. } );
  41. document.body.appendChild( renderer.domElement );
  42.  
  43. renderer.vr.enabled = true;
  44. WEBVR.getVRDisplay( function ( display ) {
  45. renderer.vr.setDevice( display );
  46. document.body.appendChild( WEBVR.getButton( display, renderer.domElement ) );
  47. } );
  48. window.addEventListener( 'resize', onWindowResize, false );
  49. window.addEventListener( 'keyup', onKeyUp, true);
  50. window.addEventListener( 'keydown', onKeyDown, true);
  51. window.addEventListener( 'mousemove', onMouseMove, true);
  52. window.addEventListener( 'mousedown', onMouseDown, true);
  53. var sqPts = []
  54. sqPts.push(new THREE.Vector2(-15,-15));
  55. sqPts.push(new THREE.Vector2(-15, 15));
  56. sqPts.push(new THREE.Vector2(15, 15));
  57. sqPts.push(new THREE.Vector2(15, -15));
  58. sqPts.push(new THREE.Vector2(-15, -15));
  59. var square = new THREE.Shape(sqPts);
  60. var Bottom = new THREE.Mesh(new THREE.ShapeBufferGeometry(square), new THREE.MeshBasicMaterial( {map: texture} ));
  61. Bottom.position.set(0, 0, 0);
  62. Bottom.rotation.x = -Math.PI/2;
  63. scene.add(Bottom);
  64.  
  65. var geometry = new THREE.SphereGeometry( 0.2, 32, 32 );
  66. var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
  67. Sphere = new THREE.Mesh( geometry, material );
  68. scene.add( Sphere );
  69. }
  70. function animate(){
  71. var movingTask = function(){
  72. requestAnimationFrame( animate );
  73. camera.position.x = coor.x;
  74. camera.position.z = coor.z;
  75. var plus_y = 0;
  76. var now_time = new Date().getTime();
  77. var delta_time = (now_time - prev_time) / 1000.0;
  78. prev_time = now_time;
  79. if(press.up || press.down || press.left || press.right) coor.frame += 1;
  80. if(jump.jumping){
  81. var now_time = (now_time - jump.time) / 1000.0;
  82. if(now_time > 2.0 * Math.PI / 9.8){
  83. jump.jumping = false;
  84. }else{
  85. plus_y = Math.PI * now_time - 0.5 * gravity * now_time * now_time;
  86. }
  87. }
  88. coor.v_x = 0; coor.v_z = 0;
  89. if(press.up){
  90. coor.v_z -= moveScale.move * Math.cos(coor.deg);
  91. coor.v_x += moveScale.move * Math.sin(coor.deg);
  92. }
  93. if(press.down){
  94. coor.v_z += moveScale.move * Math.cos(coor.deg);
  95. coor.v_x -= moveScale.move * Math.sin(coor.deg);
  96. }
  97. if(press.left){
  98. coor.v_x -= moveScale.move * Math.cos(coor.deg) / 2;
  99. coor.v_z -= moveScale.move * Math.sin(coor.deg) / 2;
  100. }
  101. if(press.right){
  102. coor.v_x += moveScale.move * Math.cos(coor.deg) / 2;
  103. coor.v_z += moveScale.move * Math.sin(coor.deg) / 2;
  104. }
  105. //console.log(delta_time, coor.v_x, coor.v_z);
  106. coor.x += delta_time * coor.v_x; coor.z += delta_time * coor.v_z;
  107. //press.up = false; press.down = false; press.left = false; press.right = false;
  108. var real_y = (y_val - 0.1) + 0.1 * Math.cos(coor.frame / 6.0);
  109. camera.position.y = real_y + plus_y;
  110. camera.lookAt(new THREE.Vector3(coor.x + 100 * Math.sin(coor.deg), (y_val + plus_y) + 100 * Math.sin(coor.ydeg), coor.z - 100 * Math.cos(coor.deg)));
  111. Sphere.position.x = coor.x + 100 * Math.sin(coor.deg);
  112. Sphere.position.y = (y_val + plus_y) + 100 * Math.sin(coor.ydeg);
  113. Sphere.position.z = coor.z - 100 * Math.cos(coor.deg);
  114. if(moving.doing) document.body.style.cursor = "none";
  115. else document.body.style.cursor = "default";
  116. var width = window.innerWidth; var height = window.innerHeight;
  117. if(moving.doing){
  118. if(cursor_now.x <= 0.02 * width){
  119. moving.ori_deg -= moveScale.deg * Math.PI / 180.0;
  120. coor.deg -= moveScale.deg * Math.PI / 180.0;
  121. }if(cursor_now.x >= 0.98 * width){
  122. moving.ori_deg += moveScale.deg * Math.PI / 180.0;
  123. coor.deg += moveScale.deg * Math.PI / 180.0;
  124. }
  125. }
  126. }
  127. movingTask();
  128. renderer.render(scene, camera);
  129. }
  130. function onWindowResize() {
  131. camera.aspect = window.innerWidth / window.innerHeight;
  132. camera.updateProjectionMatrix();
  133. renderer.setSize( window.innerWidth, window.innerHeight );
  134. }
  135. function onMouseMove(e){
  136. cursor_now.x = e.clientX;
  137. cursor_now.y = e.clientY;
  138. if(moving.doing){
  139. //console.log(e.clientX, e.clientY);
  140. var new_x = e.clientX, new_y = e.clientY;
  141. var width = window.innerWidth; var height = window.innerHeight;
  142. coor.ydeg = Math.PI / 2.0 * Math.min(0.5, Math.max(-0.5, (moving.ori_y - new_y)/ height));
  143. coor.deg = moving.ori_deg - Math.PI * Math.min(0.5, Math.max(-0.5, (moving.ori_x - new_x)/ width));
  144. //console.log(coor.ydeg);
  145. }
  146. }
  147. function onMouseDown(e){
  148. if(!moving.doing){
  149. moving.doing = true;
  150. var width = window.innerWidth; var height = window.innerHeight;
  151. moving.ori_x = 0.5 * width;//e.clientX;
  152. moving.ori_y = 0.5 * height;
  153. moving.ori_deg = coor.deg;
  154. }
  155. }
  156. function onKeyDown(e){
  157. //console.log("keydown", e.keyCode);
  158. if(moving.doing){
  159. // Up
  160. if(e.keyCode == 38 || e.keyCode == 87){
  161. if(!(press.up)){
  162. press.up = true;
  163. }
  164. }
  165. // Down
  166. if(e.keyCode == 40 || e.keyCode == 83){
  167. if(!(press.down)){
  168. press.down = true;
  169. }
  170. }
  171. // Left
  172. if(e.keyCode == 37 || e.keyCode == 65){
  173. if(!(press.left)){
  174. press.left = true;
  175. }
  176. //coor.deg -= moveScale.deg * Math.PI / 180.0;
  177. }
  178. // Right
  179. if(e.keyCode == 39 || e.keyCode == 68){
  180. if(!(press.right)){
  181. press.right = true;
  182. }
  183. }
  184. // Esc
  185. if(e.keyCode == 27){
  186. moving.doing = false;
  187. }
  188. // Space
  189. if(e.keyCode == 32){
  190. if(!jump.jumping){
  191. jump.jumping = true;
  192. jump.time = new Date().getTime();
  193. }
  194. }
  195. }
  196. }
  197. function onKeyUp(e){
  198. //console.log("keyup", e.keyCode);
  199. if(moving.doing){
  200. // Up
  201. if(e.keyCode == 38 || e.keyCode == 87){
  202. if((press.up)){
  203. press.up = false;
  204. }
  205. }
  206. // Down
  207. if(e.keyCode == 40 || e.keyCode == 83){
  208. if((press.down)){
  209. press.down = false;
  210. }
  211. }
  212. // Left
  213. if(e.keyCode == 37 || e.keyCode == 65){
  214. if((press.left)){
  215. press.left = false;
  216. }
  217. //coor.deg -= moveScale.deg * Math.PI / 180.0;
  218. }
  219. // Right
  220. if(e.keyCode == 39 || e.keyCode == 68){
  221. if((press.right)){
  222. press.right = false;
  223. }
  224. }
  225. }
  226. }
  227. init();
  228. animate();
  229. </script>
  230. </body>
  231. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!