games_fps.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js - misc - octree collisions</title>
  5. <meta charset=utf-8 />
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info">
  11. Octree threejs demo - basic collisions with static triangle mesh<br />
  12. MOUSE to look around and to throw balls<br/>
  13. WASD to move and SPACE to jump
  14. </div>
  15. <div id="container"></div>
  16. <!-- Import maps polyfill -->
  17. <!-- Remove this when import maps will be widely supported -->
  18. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  19. <script type="importmap">
  20. {
  21. "imports": {
  22. "three": "../build/three.module.js",
  23. "three/addons/": "./jsm/"
  24. }
  25. }
  26. </script>
  27. <script type="module">
  28. import * as THREE from 'three';
  29. import Stats from 'three/addons/libs/stats.module.js';
  30. import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  31. import { Octree } from 'three/addons/math/Octree.js';
  32. import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';
  33. import { Capsule } from 'three/addons/math/Capsule.js';
  34. import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
  35. const clock = new THREE.Clock();
  36. const scene = new THREE.Scene();
  37. scene.background = new THREE.Color( 0x88ccee );
  38. scene.fog = new THREE.Fog( 0x88ccee, 0, 50 );
  39. const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
  40. camera.rotation.order = 'YXZ';
  41. const fillLight1 = new THREE.HemisphereLight( 0x4488bb, 0x002244, 0.5 );
  42. fillLight1.position.set( 2, 1, 1 );
  43. scene.add( fillLight1 );
  44. const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
  45. directionalLight.position.set( - 5, 25, - 1 );
  46. directionalLight.castShadow = true;
  47. directionalLight.shadow.camera.near = 0.01;
  48. directionalLight.shadow.camera.far = 500;
  49. directionalLight.shadow.camera.right = 30;
  50. directionalLight.shadow.camera.left = - 30;
  51. directionalLight.shadow.camera.top = 30;
  52. directionalLight.shadow.camera.bottom = - 30;
  53. directionalLight.shadow.mapSize.width = 1024;
  54. directionalLight.shadow.mapSize.height = 1024;
  55. directionalLight.shadow.radius = 4;
  56. directionalLight.shadow.bias = - 0.00006;
  57. scene.add( directionalLight );
  58. const container = document.getElementById( 'container' );
  59. const renderer = new THREE.WebGLRenderer( { antialias: true } );
  60. renderer.setPixelRatio( window.devicePixelRatio );
  61. renderer.setSize( window.innerWidth, window.innerHeight );
  62. renderer.shadowMap.enabled = true;
  63. renderer.shadowMap.type = THREE.VSMShadowMap;
  64. renderer.outputEncoding = THREE.sRGBEncoding;
  65. renderer.toneMapping = THREE.ACESFilmicToneMapping;
  66. container.appendChild( renderer.domElement );
  67. const stats = new Stats();
  68. stats.domElement.style.position = 'absolute';
  69. stats.domElement.style.top = '0px';
  70. container.appendChild( stats.domElement );
  71. const GRAVITY = 30;
  72. const NUM_SPHERES = 100;
  73. const SPHERE_RADIUS = 0.2;
  74. const STEPS_PER_FRAME = 5;
  75. const sphereGeometry = new THREE.IcosahedronGeometry( SPHERE_RADIUS, 5 );
  76. const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xbbbb44 } );
  77. const spheres = [];
  78. let sphereIdx = 0;
  79. for ( let i = 0; i < NUM_SPHERES; i ++ ) {
  80. const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
  81. sphere.castShadow = true;
  82. sphere.receiveShadow = true;
  83. scene.add( sphere );
  84. spheres.push( {
  85. mesh: sphere,
  86. collider: new THREE.Sphere( new THREE.Vector3( 0, - 100, 0 ), SPHERE_RADIUS ),
  87. velocity: new THREE.Vector3()
  88. } );
  89. }
  90. const worldOctree = new Octree();
  91. const playerCollider = new Capsule( new THREE.Vector3( 0, 0.35, 0 ), new THREE.Vector3( 0, 1, 0 ), 0.35 );
  92. const playerVelocity = new THREE.Vector3();
  93. const playerDirection = new THREE.Vector3();
  94. let playerOnFloor = false;
  95. let mouseTime = 0;
  96. const keyStates = {};
  97. const vector1 = new THREE.Vector3();
  98. const vector2 = new THREE.Vector3();
  99. const vector3 = new THREE.Vector3();
  100. document.addEventListener( 'keydown', ( event ) => {
  101. keyStates[ event.code ] = true;
  102. } );
  103. document.addEventListener( 'keyup', ( event ) => {
  104. keyStates[ event.code ] = false;
  105. } );
  106. container.addEventListener( 'mousedown', () => {
  107. document.body.requestPointerLock();
  108. mouseTime = performance.now();
  109. } );
  110. document.addEventListener( 'mouseup', () => {
  111. if ( document.pointerLockElement !== null ) throwBall();
  112. } );
  113. document.body.addEventListener( 'mousemove', ( event ) => {
  114. if ( document.pointerLockElement === document.body ) {
  115. camera.rotation.y -= event.movementX / 500;
  116. camera.rotation.x -= event.movementY / 500;
  117. }
  118. } );
  119. window.addEventListener( 'resize', onWindowResize );
  120. function onWindowResize() {
  121. camera.aspect = window.innerWidth / window.innerHeight;
  122. camera.updateProjectionMatrix();
  123. renderer.setSize( window.innerWidth, window.innerHeight );
  124. }
  125. function throwBall() {
  126. const sphere = spheres[ sphereIdx ];
  127. camera.getWorldDirection( playerDirection );
  128. sphere.collider.center.copy( playerCollider.end ).addScaledVector( playerDirection, playerCollider.radius * 1.5 );
  129. // throw the ball with more force if we hold the button longer, and if we move forward
  130. const impulse = 15 + 30 * ( 1 - Math.exp( ( mouseTime - performance.now() ) * 0.001 ) );
  131. sphere.velocity.copy( playerDirection ).multiplyScalar( impulse );
  132. sphere.velocity.addScaledVector( playerVelocity, 2 );
  133. sphereIdx = ( sphereIdx + 1 ) % spheres.length;
  134. }
  135. function playerCollisions() {
  136. const result = worldOctree.capsuleIntersect( playerCollider );
  137. playerOnFloor = false;
  138. if ( result ) {
  139. playerOnFloor = result.normal.y > 0;
  140. if ( ! playerOnFloor ) {
  141. playerVelocity.addScaledVector( result.normal, - result.normal.dot( playerVelocity ) );
  142. }
  143. playerCollider.translate( result.normal.multiplyScalar( result.depth ) );
  144. }
  145. }
  146. function updatePlayer( deltaTime ) {
  147. let damping = Math.exp( - 4 * deltaTime ) - 1;
  148. if ( ! playerOnFloor ) {
  149. playerVelocity.y -= GRAVITY * deltaTime;
  150. // small air resistance
  151. damping *= 0.1;
  152. }
  153. playerVelocity.addScaledVector( playerVelocity, damping );
  154. const deltaPosition = playerVelocity.clone().multiplyScalar( deltaTime );
  155. playerCollider.translate( deltaPosition );
  156. playerCollisions();
  157. camera.position.copy( playerCollider.end );
  158. }
  159. function playerSphereCollision( sphere ) {
  160. const center = vector1.addVectors( playerCollider.start, playerCollider.end ).multiplyScalar( 0.5 );
  161. const sphere_center = sphere.collider.center;
  162. const r = playerCollider.radius + sphere.collider.radius;
  163. const r2 = r * r;
  164. // approximation: player = 3 spheres
  165. for ( const point of [ playerCollider.start, playerCollider.end, center ] ) {
  166. const d2 = point.distanceToSquared( sphere_center );
  167. if ( d2 < r2 ) {
  168. const normal = vector1.subVectors( point, sphere_center ).normalize();
  169. const v1 = vector2.copy( normal ).multiplyScalar( normal.dot( playerVelocity ) );
  170. const v2 = vector3.copy( normal ).multiplyScalar( normal.dot( sphere.velocity ) );
  171. playerVelocity.add( v2 ).sub( v1 );
  172. sphere.velocity.add( v1 ).sub( v2 );
  173. const d = ( r - Math.sqrt( d2 ) ) / 2;
  174. sphere_center.addScaledVector( normal, - d );
  175. }
  176. }
  177. }
  178. function spheresCollisions() {
  179. for ( let i = 0, length = spheres.length; i < length; i ++ ) {
  180. const s1 = spheres[ i ];
  181. for ( let j = i + 1; j < length; j ++ ) {
  182. const s2 = spheres[ j ];
  183. const d2 = s1.collider.center.distanceToSquared( s2.collider.center );
  184. const r = s1.collider.radius + s2.collider.radius;
  185. const r2 = r * r;
  186. if ( d2 < r2 ) {
  187. const normal = vector1.subVectors( s1.collider.center, s2.collider.center ).normalize();
  188. const v1 = vector2.copy( normal ).multiplyScalar( normal.dot( s1.velocity ) );
  189. const v2 = vector3.copy( normal ).multiplyScalar( normal.dot( s2.velocity ) );
  190. s1.velocity.add( v2 ).sub( v1 );
  191. s2.velocity.add( v1 ).sub( v2 );
  192. const d = ( r - Math.sqrt( d2 ) ) / 2;
  193. s1.collider.center.addScaledVector( normal, d );
  194. s2.collider.center.addScaledVector( normal, - d );
  195. }
  196. }
  197. }
  198. }
  199. function updateSpheres( deltaTime ) {
  200. spheres.forEach( sphere => {
  201. sphere.collider.center.addScaledVector( sphere.velocity, deltaTime );
  202. const result = worldOctree.sphereIntersect( sphere.collider );
  203. if ( result ) {
  204. sphere.velocity.addScaledVector( result.normal, - result.normal.dot( sphere.velocity ) * 1.5 );
  205. sphere.collider.center.add( result.normal.multiplyScalar( result.depth ) );
  206. } else {
  207. sphere.velocity.y -= GRAVITY * deltaTime;
  208. }
  209. const damping = Math.exp( - 1.5 * deltaTime ) - 1;
  210. sphere.velocity.addScaledVector( sphere.velocity, damping );
  211. playerSphereCollision( sphere );
  212. } );
  213. spheresCollisions();
  214. for ( const sphere of spheres ) {
  215. sphere.mesh.position.copy( sphere.collider.center );
  216. }
  217. }
  218. function getForwardVector() {
  219. camera.getWorldDirection( playerDirection );
  220. playerDirection.y = 0;
  221. playerDirection.normalize();
  222. return playerDirection;
  223. }
  224. function getSideVector() {
  225. camera.getWorldDirection( playerDirection );
  226. playerDirection.y = 0;
  227. playerDirection.normalize();
  228. playerDirection.cross( camera.up );
  229. return playerDirection;
  230. }
  231. function controls( deltaTime ) {
  232. // gives a bit of air control
  233. const speedDelta = deltaTime * ( playerOnFloor ? 25 : 8 );
  234. if ( keyStates[ 'KeyW' ] ) {
  235. playerVelocity.add( getForwardVector().multiplyScalar( speedDelta ) );
  236. }
  237. if ( keyStates[ 'KeyS' ] ) {
  238. playerVelocity.add( getForwardVector().multiplyScalar( - speedDelta ) );
  239. }
  240. if ( keyStates[ 'KeyA' ] ) {
  241. playerVelocity.add( getSideVector().multiplyScalar( - speedDelta ) );
  242. }
  243. if ( keyStates[ 'KeyD' ] ) {
  244. playerVelocity.add( getSideVector().multiplyScalar( speedDelta ) );
  245. }
  246. if ( playerOnFloor ) {
  247. if ( keyStates[ 'Space' ] ) {
  248. playerVelocity.y = 15;
  249. }
  250. }
  251. }
  252. const loader = new GLTFLoader().setPath( './models/gltf/' );
  253. loader.load( 'collision-world.glb', ( gltf ) => {
  254. scene.add( gltf.scene );
  255. worldOctree.fromGraphNode( gltf.scene );
  256. gltf.scene.traverse( child => {
  257. if ( child.isMesh ) {
  258. child.castShadow = true;
  259. child.receiveShadow = true;
  260. if ( child.material.map ) {
  261. child.material.map.anisotropy = 4;
  262. }
  263. }
  264. } );
  265. const helper = new OctreeHelper( worldOctree );
  266. helper.visible = false;
  267. scene.add( helper );
  268. const gui = new GUI( { width: 200 } );
  269. gui.add( { debug: false }, 'debug' )
  270. .onChange( function ( value ) {
  271. helper.visible = value;
  272. } );
  273. animate();
  274. } );
  275. function teleportPlayerIfOob() {
  276. if ( camera.position.y <= - 25 ) {
  277. playerCollider.start.set( 0, 0.35, 0 );
  278. playerCollider.end.set( 0, 1, 0 );
  279. playerCollider.radius = 0.35;
  280. camera.position.copy( playerCollider.end );
  281. camera.rotation.set( 0, 0, 0 );
  282. }
  283. }
  284. function animate() {
  285. const deltaTime = Math.min( 0.05, clock.getDelta() ) / STEPS_PER_FRAME;
  286. // we look for collisions in substeps to mitigate the risk of
  287. // an object traversing another too quickly for detection.
  288. for ( let i = 0; i < STEPS_PER_FRAME; i ++ ) {
  289. controls( deltaTime );
  290. updatePlayer( deltaTime );
  291. updateSpheres( deltaTime );
  292. teleportPlayerIfOob();
  293. }
  294. renderer.render( scene, camera );
  295. stats.update();
  296. requestAnimationFrame( animate );
  297. }
  298. </script>
  299. </body>
  300. </html>