API tools faq
paste
Advertisement
julong

collision

julong
Sep 18th, 2014
308
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.29 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE HTML>
  3. <html lang="en">
  4. <head>
  5. <title>Ray collision test</title>
  6. <meta charset="utf-8">
  7. <link rel="stylesheet" type="text/css" href="../css/style.css">
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div id="infobutton">
  13. <a href="javascript:toggleInfo()"><img src="../general/i.png" border="0"></a>
  14. </div>
  15. <div id="info">
  16. <B>Ray collision test - WebGL(html5)</B><BR>
  17. Arrowkeys to move. Space to jump.
  18. <P>A test to do some sort of collision checking. By shooting a ray and see if it hits a mesh.<BR>It's probably a stupid/ineffective way of doing this, don't know how these things are<BR>usually dealt with when it comes to 3d.</P>
  19. Done using <a href="https://github.com/mrdoob/three.js" target="_blank">three.js</a>.
  20. <P><B>Note.</B> You need a modern browser that supports WebGL for this to run the way it is intended.<BR>
  21. For example. <a href="http://www.google.com/landing/chrome/beta/" target="_blank">Google Chrome 9+</a> or <a href="http://www.mozilla.com/firefox/beta/" target="_blank">Firefox 4+</a>.</P>
  22. <font color="#777777">(C) OutsideOfSociety 2010.
  23. </div>
  24.  
  25. <script type="text/javascript" src="../build/ThreeExtras.js"></script>
  26.  
  27. <script type="text/javascript" src="keys.js"></script>
  28.  
  29. <script type="text/javascript" src="../general/RequestAnimationFrame.js"></script>
  30. <script type="text/javascript" src="../general/Stats.js"></script>
  31. <script type="text/javascript" src="../general/info.js"></script>
  32.  
  33.  
  34. <script type="text/javascript">
  35.  
  36. var SCREEN_WIDTH = window.innerWidth;
  37. var SCREEN_HEIGHT = window.innerHeight;
  38. var FLOOR = -250;
  39.  
  40. var container;
  41. var stats;
  42.  
  43. var camera;
  44. var scene;
  45. var webglRenderer;
  46.  
  47. var mesh, zmesh, lightMesh, geometry;
  48.  
  49. var directionalLight, pointLight;
  50.  
  51. var mouseX = 0;
  52. var mouseY = 0;
  53.  
  54. var windowHalfX = window.innerWidth >> 1;
  55. var windowHalfY = window.innerHeight >> 1;
  56.  
  57. var render_gl = 1;
  58. var has_gl = 0;
  59.  
  60. var cubeRefMesh;
  61. var collideMesh;
  62.  
  63. var r = 0;
  64.  
  65. var gravity = 1;
  66. var yspeed = 0;
  67. var onGround = true;
  68.  
  69. init(), animate();
  70.  
  71.  
  72.  
  73.  
  74.  
  75. function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
  76.  
  77. mesh = new THREE.Mesh( geometry, material );
  78. mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
  79. mesh.position.x = x;
  80. mesh.position.y = y;
  81. mesh.position.z = z;
  82. mesh.rotation.x = rx;
  83. mesh.rotation.y = ry;
  84. mesh.rotation.z = rz;
  85. mesh.overdraw = true;
  86. mesh.doubleSided = false;
  87. mesh.updateMatrix();
  88. scene.addObject(mesh);
  89.  
  90. return mesh;
  91.  
  92. }
  93.  
  94. function init() {
  95.  
  96. container = document.createElement('div');
  97. document.body.appendChild(container);
  98.  
  99. var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  100.  
  101. camera = new THREE.Camera( 75, aspect, 1, 100000 );
  102. camera.position.z = 600;
  103. camera.position.x = 0;
  104. camera.position.y = 200;
  105.  
  106. camera.updateMatrix();
  107.  
  108. scene = new THREE.Scene();
  109.  
  110. // LIGHTS
  111.  
  112. var ambient = new THREE.AmbientLight( 0x101010 );
  113. scene.addLight( ambient );
  114.  
  115. directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
  116. directionalLight.position.x = 1;
  117. directionalLight.position.y = 1;
  118. directionalLight.position.z = 2;
  119. directionalLight.position.normalize();
  120. scene.addLight( directionalLight );
  121.  
  122. pointLight = new THREE.PointLight( 0x666666 );
  123. pointLight.position.x = 0;
  124. pointLight.position.y = 0;
  125. pointLight.position.z = 0;
  126. scene.addLight( pointLight );
  127.  
  128. var cubeRef = new Cube( 100, 100, 100, 1, 1 );
  129.  
  130. cubeRefMesh = addMesh( cubeRef, 1, -300, FLOOR+50, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xFF0000 } ) );
  131. camera.target = cubeRefMesh;
  132.  
  133. var collideCube = new Cube( 20, 20, 20, 1, 1 );
  134. collideMesh = addMesh( collideCube, 1, -300, FLOOR+5000, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xFF0000 } ) );
  135.  
  136. var cube = new Cube( 300, 300, 300, 1, 1 );
  137. addMesh( cube, 1, 0, FLOOR+150, 0, 0,1.57,0, getMaterial() );
  138. addMesh( cube, 1, 300, FLOOR+150+300, 0, 0,1.57,0, getMaterial() );
  139. addMesh( cube, 1, 600, FLOOR+150+600, 0, 0,1.57,0, getMaterial() );
  140.  
  141. addMesh( cube, 1, 0, FLOOR+150, -1500, 0,1.57,0, getMaterial() );
  142. addMesh( cube, 1, -600, FLOOR+150, -1500, 0,1.57,0, getMaterial() );
  143. addMesh( cube, 1, -1200, FLOOR+150+300, -1500, 0,1.57,0, getMaterial(true) );
  144.  
  145. addMesh( cube, 1, 0, FLOOR+150, -2100, 0,1.57,0, getMaterial() );
  146.  
  147. plane = new Plane( 100, 100, 15, 10 );
  148.  
  149. for(var i=0; i<plane.uvs.length; i++) {
  150. var uvs = plane.uvs[i];
  151. for ( j = 0, jl = uvs.length; j < jl; j++ ) {
  152. uvs[j].u *= 10;
  153. uvs[j].v *= 10;
  154. }
  155.  
  156. }
  157.  
  158. addMesh( plane, 100, 0, FLOOR, 0, -1.57,0,0, getFloorMaterial() );
  159.  
  160. try {
  161. webglRenderer = new THREE.WebGLRenderer( scene );
  162. webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  163. container.appendChild( webglRenderer.domElement );
  164. has_gl = 1;
  165. }
  166. catch (e) {
  167. // need webgl
  168. document.getElementById('info').innerHTML = "<P><BR><B>Note.</B> You need a modern browser that supports WebGL for this to run the way it is intended.<BR>For example. <a href='http://www.google.com/landing/chrome/beta/' target='_blank'>Google Chrome 9+</a> or <a href='http://www.mozilla.com/firefox/beta/' target='_blank'>Firefox 4+</a>.</P><CENTER><BR><img src='../general/WebGL_logo.png' border='0'></CENTER>";
  169. document.getElementById('info').style.display = "block";
  170. return;
  171. }
  172.  
  173.  
  174. stats = new Stats();
  175. stats.domElement.style.position = 'absolute';
  176. stats.domElement.style.top = '0px';
  177. stats.domElement.style.zIndex = 100;
  178. container.appendChild( stats.domElement );
  179.  
  180. document.addEventListener( 'keydown', keyD, false );
  181. document.addEventListener( 'keyup', keyU, false );
  182. }
  183.  
  184. function getMaterial (qmark) {
  185. var imageTextureMaterial = new THREE.MeshLambertMaterial( { map: new THREE.Texture(), shading: THREE.FlatShading } );
  186. var img = new Image();
  187. imageTextureMaterial.map.image = img;
  188. img.onload = function () {
  189. imageTextureMaterial.map.image.loaded = 1;
  190. };
  191. if (qmark) {
  192. img.src = "../textures/qmark1.png";
  193. } else {
  194. img.src = "../textures/rock.png";
  195. }
  196. return imageTextureMaterial;
  197. }
  198.  
  199.  
  200. function getFloorMaterial () {
  201. var floorTextureMaterial = new THREE.MeshPhongMaterial( { map: new THREE.Texture(null, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping), ambient: 0xCCCCCC, specular: 0x666666, shininess: 90, shading: THREE.SmoothShading } );
  202.  
  203. var img = new Image();
  204. floorTextureMaterial.map.image = img;
  205. img.onload = function () {
  206. floorTextureMaterial.map.image.loaded = 1;
  207. };
  208. img.src = "../textures/grid.png";
  209.  
  210. return floorTextureMaterial;
  211. }
  212.  
  213. function control() {
  214. var speed = 10;
  215. var halfSize = 50;
  216. var nearHalfSize = halfSize-5;
  217.  
  218. if (keyUp) {
  219. cubeRefMesh.position.z -= speed;
  220. }
  221. if (keyDown) {
  222. cubeRefMesh.position.z += speed;
  223. }
  224. if (keyLeft) {
  225. cubeRefMesh.position.x -= speed;
  226. }
  227. if (keyRight) {
  228. cubeRefMesh.position.x += speed;
  229. }
  230. if (keySpace && onGround) {
  231. yspeed = 30;
  232. onGround = false;
  233. }
  234.  
  235. collideMesh.position.y = 6000;
  236.  
  237. onGround = false;
  238. // y
  239. yspeed -= gravity;
  240. cubeRefMesh.position.y += yspeed;
  241.  
  242. var down_vector = new THREE.Vector3( 0, -1, 0 );
  243. var up_vector = new THREE.Vector3( 0, 1, 0 );
  244.  
  245. var bl = new THREE.Vector3( cubeRefMesh.position.x-halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z-halfSize );
  246. var br = new THREE.Vector3( cubeRefMesh.position.x+halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z-halfSize );
  247. var fl = new THREE.Vector3( cubeRefMesh.position.x-halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z+halfSize );
  248. var fr = new THREE.Vector3( cubeRefMesh.position.x+halfSize, cubeRefMesh.position.y, cubeRefMesh.position.z+halfSize );
  249.  
  250. // down
  251. if (yspeed < 0) {
  252. // bl
  253. var bl_ray = new THREE.Ray( bl, down_vector );
  254. var bl_intersects = bl_ray.intersectScene( scene );
  255. if ( bl_intersects.length > 0 && bl_intersects[0].distance < halfSize ) {
  256. cubeRefMesh.position.y = bl_intersects[0].point.y+halfSize;
  257. onGround = true;
  258. }
  259. // br
  260. var br_ray = new THREE.Ray( br, down_vector );
  261. var br_intersects = br_ray.intersectScene( scene );
  262. if ( br_intersects.length > 0 && br_intersects[0].distance < halfSize ) {
  263. cubeRefMesh.position.y = br_intersects[0].point.y+halfSize;
  264. onGround = true;
  265. }
  266. // fl
  267. var fl_ray = new THREE.Ray( fl, down_vector );
  268. var fl_intersects = fl_ray.intersectScene( scene );
  269. if ( fl_intersects.length > 0 && fl_intersects[0].distance < halfSize ) {
  270. cubeRefMesh.position.y = fl_intersects[0].point.y+halfSize;
  271. onGround = true;
  272. }
  273. // fr
  274. var fr_ray = new THREE.Ray( fr, down_vector );
  275. var fr_intersects = fr_ray.intersectScene( scene );
  276. if ( fr_intersects.length > 0 && fr_intersects[0].distance < halfSize ) {
  277. cubeRefMesh.position.y = fr_intersects[0].point.y+halfSize;
  278. onGround = true;
  279. }
  280. }
  281. // up
  282. if (yspeed > 0) {
  283. // bl
  284. var bl_ray = new THREE.Ray( bl, up_vector );
  285. var bl_intersects = bl_ray.intersectScene( scene );
  286. if ( bl_intersects.length > 0 && bl_intersects[0].distance < halfSize ) {
  287. cubeRefMesh.position.y = bl_intersects[0].point.y-halfSize;
  288. yspeed = 0;
  289. }
  290. // br
  291. var br_ray = new THREE.Ray( br, up_vector );
  292. var br_intersects = br_ray.intersectScene( scene );
  293. if ( br_intersects.length > 0 && br_intersects[0].distance < halfSize ) {
  294. cubeRefMesh.position.y = br_intersects[0].point.y-halfSize;
  295. yspeed = 0;
  296. }
  297. // fl
  298. var fl_ray = new THREE.Ray( fl, up_vector );
  299. var fl_intersects = fl_ray.intersectScene( scene );
  300. if ( fl_intersects.length > 0 && fl_intersects[0].distance < halfSize ) {
  301. cubeRefMesh.position.y = fl_intersects[0].point.y-halfSize;
  302. yspeed = 0;
  303. }
  304. // fr
  305. var fr_ray = new THREE.Ray( fr, up_vector );
  306. var fr_intersects = fr_ray.intersectScene( scene );
  307. if ( fr_intersects.length > 0 && fr_intersects[0].distance < halfSize ) {
  308. cubeRefMesh.position.y = fr_intersects[0].point.y-halfSize;
  309. yspeed = 0;
  310. }
  311. }
  312.  
  313. if (onGround) {
  314. yspeed = 0;
  315. }
  316.  
  317. cubeRefMesh.updateMatrix();
  318.  
  319. // ray
  320. var f_vector = new THREE.Vector3( 0, 0, -1 );
  321. var b_vector = new THREE.Vector3( 0, 0, 1 );
  322. var l_vector = new THREE.Vector3( -1, 0, 0 );
  323. var r_vector = new THREE.Vector3( 1, 0, 0 );
  324.  
  325. var left = new THREE.Vector3( cubeRefMesh.position.x-halfSize, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z );
  326. var right = new THREE.Vector3( cubeRefMesh.position.x+halfSize, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z );
  327. var front = new THREE.Vector3( cubeRefMesh.position.x, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z+halfSize );
  328. var back = new THREE.Vector3( cubeRefMesh.position.x, cubeRefMesh.position.y-nearHalfSize, cubeRefMesh.position.z-halfSize );
  329.  
  330. // front
  331. if (keyUp) {
  332. var left_ray = new THREE.Ray( left, f_vector );
  333. var left_intersects = left_ray.intersectScene( scene );
  334. if ( left_intersects.length > 0 && left_intersects[0].distance < halfSize ) {
  335. cubeRefMesh.position.z = left_intersects[0].point.z+halfSize+1;
  336. }
  337. var right_ray = new THREE.Ray( right, f_vector );
  338. var right_intersects = right_ray.intersectScene( scene );
  339. if ( right_intersects.length > 0 && right_intersects[0].distance < halfSize ) {
  340. cubeRefMesh.position.z = right_intersects[0].point.z+halfSize+1;
  341. }
  342. }
  343. // back
  344. if (keyDown) {
  345. var left_ray = new THREE.Ray( left, b_vector );
  346. var left_intersects = left_ray.intersectScene( scene );
  347. if ( left_intersects.length > 0 && left_intersects[0].distance < halfSize ) {
  348. cubeRefMesh.position.z = left_intersects[0].point.z-halfSize-1;
  349. }
  350. var right_ray = new THREE.Ray( right, b_vector );
  351. var right_intersects = right_ray.intersectScene( scene );
  352. if ( right_intersects.length > 0 && right_intersects[0].distance < halfSize ) {
  353. cubeRefMesh.position.z = right_intersects[0].point.z-halfSize-1;
  354. }
  355. }
  356. // right
  357. if (keyRight) {
  358. var back_ray = new THREE.Ray( back, r_vector );
  359. var back_intersects = back_ray.intersectScene( scene );
  360. if ( back_intersects.length > 0 && back_intersects[0].distance < halfSize ) {
  361. cubeRefMesh.position.x = back_intersects[0].point.x-halfSize-1;
  362. }
  363. var front_ray = new THREE.Ray( front, r_vector );
  364. var front_intersects = front_ray.intersectScene( scene );
  365. if ( front_intersects.length > 0 && front_intersects[0].distance < halfSize ) {
  366. cubeRefMesh.position.x = front_intersects[0].point.x-halfSize-1;
  367. }
  368. }
  369. // left
  370. if (keyLeft) {
  371. var back_ray = new THREE.Ray( back, l_vector );
  372. var back_intersects = back_ray.intersectScene( scene );
  373. if ( back_intersects.length > 0 && back_intersects[0].distance < halfSize ) {
  374. cubeRefMesh.position.x = back_intersects[0].point.x+halfSize+1;
  375. }
  376. var front_ray = new THREE.Ray( front, l_vector );
  377. var front_intersects = front_ray.intersectScene( scene );
  378. if ( front_intersects.length > 0 && front_intersects[0].distance < halfSize ) {
  379. cubeRefMesh.position.x = front_intersects[0].point.x+halfSize+1;
  380. }
  381. }
  382. cubeRefMesh.updateMatrix();
  383. collideMesh.position.y += 100;
  384. }
  385.  
  386. function animate() {
  387. requestAnimationFrame( animate );
  388. loop();
  389. }
  390.  
  391. function loop() {
  392. control();
  393.  
  394. camera.position.x = 0+cubeRefMesh.position.x-(cubeRefMesh.position.x/5);//200*Math.cos(r);
  395. camera.position.y = 200+cubeRefMesh.position.y;
  396. camera.position.z = cubeRefMesh.position.z+600;
  397.  
  398. pointLight.position.x = 1000*Math.cos(r);
  399. pointLight.position.z = 1000*Math.sin(r);
  400.  
  401. r += 0.01;
  402.  
  403. if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
  404.  
  405. stats.update();
  406.  
  407. }
  408.  
  409.  
  410. </script>
  411.  
  412. </body>
  413. </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!