scenegraph-tank.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <!-- Licensed under a BSD license. See license.html for license -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  7. <title>Three.js - Scenegraph - Tank</title>
  8. <style>
  9. html, body {
  10. height: 100%;
  11. margin: 0;
  12. }
  13. #c {
  14. width: 100%;
  15. height: 100%;
  16. display: block;
  17. }
  18. #info {
  19. position: absolute;
  20. left: 1em;
  21. top: 1em;
  22. background: rgba(0,0,0,.8);
  23. padding: .5em;
  24. color: white;
  25. font-family: monospace;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <canvas id="c"></canvas>
  31. <div id="info"></div>
  32. </body>
  33. <!-- Import maps polyfill -->
  34. <!-- Remove this when import maps will be widely supported -->
  35. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  36. <script type="importmap">
  37. {
  38. "imports": {
  39. "three": "../../build/three.module.js"
  40. }
  41. }
  42. </script>
  43. <script type="module">
  44. import * as THREE from 'three';
  45. function main() {
  46. const canvas = document.querySelector( '#c' );
  47. const renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
  48. renderer.useLegacyLights = false;
  49. renderer.setClearColor( 0xAAAAAA );
  50. renderer.shadowMap.enabled = true;
  51. function makeCamera( fov = 40 ) {
  52. const aspect = 2; // the canvas default
  53. const zNear = 0.1;
  54. const zFar = 1000;
  55. return new THREE.PerspectiveCamera( fov, aspect, zNear, zFar );
  56. }
  57. const camera = makeCamera();
  58. camera.position.set( 8, 4, 10 ).multiplyScalar( 3 );
  59. camera.lookAt( 0, 0, 0 );
  60. const scene = new THREE.Scene();
  61. {
  62. const light = new THREE.DirectionalLight( 0xffffff, 3 );
  63. light.position.set( 0, 20, 0 );
  64. scene.add( light );
  65. light.castShadow = true;
  66. light.shadow.mapSize.width = 2048;
  67. light.shadow.mapSize.height = 2048;
  68. const d = 50;
  69. light.shadow.camera.left = - d;
  70. light.shadow.camera.right = d;
  71. light.shadow.camera.top = d;
  72. light.shadow.camera.bottom = - d;
  73. light.shadow.camera.near = 1;
  74. light.shadow.camera.far = 50;
  75. light.shadow.bias = 0.001;
  76. }
  77. {
  78. const light = new THREE.DirectionalLight( 0xffffff, 3 );
  79. light.position.set( 1, 2, 4 );
  80. scene.add( light );
  81. }
  82. const groundGeometry = new THREE.PlaneGeometry( 50, 50 );
  83. const groundMaterial = new THREE.MeshPhongMaterial( { color: 0xCC8866 } );
  84. const groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
  85. groundMesh.rotation.x = Math.PI * - .5;
  86. groundMesh.receiveShadow = true;
  87. scene.add( groundMesh );
  88. const carWidth = 4;
  89. const carHeight = 1;
  90. const carLength = 8;
  91. const tank = new THREE.Object3D();
  92. scene.add( tank );
  93. const bodyGeometry = new THREE.BoxGeometry( carWidth, carHeight, carLength );
  94. const bodyMaterial = new THREE.MeshPhongMaterial( { color: 0x6688AA } );
  95. const bodyMesh = new THREE.Mesh( bodyGeometry, bodyMaterial );
  96. bodyMesh.position.y = 1.4;
  97. bodyMesh.castShadow = true;
  98. tank.add( bodyMesh );
  99. const tankCameraFov = 75;
  100. const tankCamera = makeCamera( tankCameraFov );
  101. tankCamera.position.y = 3;
  102. tankCamera.position.z = - 6;
  103. tankCamera.rotation.y = Math.PI;
  104. bodyMesh.add( tankCamera );
  105. const wheelRadius = 1;
  106. const wheelThickness = .5;
  107. const wheelSegments = 6;
  108. const wheelGeometry = new THREE.CylinderGeometry(
  109. wheelRadius, // top radius
  110. wheelRadius, // bottom radius
  111. wheelThickness, // height of cylinder
  112. wheelSegments );
  113. const wheelMaterial = new THREE.MeshPhongMaterial( { color: 0x888888 } );
  114. const wheelPositions = [
  115. [ - carWidth / 2 - wheelThickness / 2, - carHeight / 2, carLength / 3 ],
  116. [ carWidth / 2 + wheelThickness / 2, - carHeight / 2, carLength / 3 ],
  117. [ - carWidth / 2 - wheelThickness / 2, - carHeight / 2, 0 ],
  118. [ carWidth / 2 + wheelThickness / 2, - carHeight / 2, 0 ],
  119. [ - carWidth / 2 - wheelThickness / 2, - carHeight / 2, - carLength / 3 ],
  120. [ carWidth / 2 + wheelThickness / 2, - carHeight / 2, - carLength / 3 ],
  121. ];
  122. const wheelMeshes = wheelPositions.map( ( position ) => {
  123. const mesh = new THREE.Mesh( wheelGeometry, wheelMaterial );
  124. mesh.position.set( ...position );
  125. mesh.rotation.z = Math.PI * .5;
  126. mesh.castShadow = true;
  127. bodyMesh.add( mesh );
  128. return mesh;
  129. } );
  130. const domeRadius = 2;
  131. const domeWidthSubdivisions = 12;
  132. const domeHeightSubdivisions = 12;
  133. const domePhiStart = 0;
  134. const domePhiEnd = Math.PI * 2;
  135. const domeThetaStart = 0;
  136. const domeThetaEnd = Math.PI * .5;
  137. const domeGeometry = new THREE.SphereGeometry(
  138. domeRadius, domeWidthSubdivisions, domeHeightSubdivisions,
  139. domePhiStart, domePhiEnd, domeThetaStart, domeThetaEnd );
  140. const domeMesh = new THREE.Mesh( domeGeometry, bodyMaterial );
  141. domeMesh.castShadow = true;
  142. bodyMesh.add( domeMesh );
  143. domeMesh.position.y = .5;
  144. const turretWidth = .1;
  145. const turretHeight = .1;
  146. const turretLength = carLength * .75 * .2;
  147. const turretGeometry = new THREE.BoxGeometry(
  148. turretWidth, turretHeight, turretLength );
  149. const turretMesh = new THREE.Mesh( turretGeometry, bodyMaterial );
  150. const turretPivot = new THREE.Object3D();
  151. turretMesh.castShadow = true;
  152. turretPivot.scale.set( 5, 5, 5 );
  153. turretPivot.position.y = .5;
  154. turretMesh.position.z = turretLength * .5;
  155. turretPivot.add( turretMesh );
  156. bodyMesh.add( turretPivot );
  157. const turretCamera = makeCamera();
  158. turretCamera.position.y = .75 * .2;
  159. turretMesh.add( turretCamera );
  160. const targetGeometry = new THREE.SphereGeometry( .5, 6, 3 );
  161. const targetMaterial = new THREE.MeshPhongMaterial( { color: 0x00FF00, flatShading: true } );
  162. const targetMesh = new THREE.Mesh( targetGeometry, targetMaterial );
  163. const targetOrbit = new THREE.Object3D();
  164. const targetElevation = new THREE.Object3D();
  165. const targetBob = new THREE.Object3D();
  166. targetMesh.castShadow = true;
  167. scene.add( targetOrbit );
  168. targetOrbit.add( targetElevation );
  169. targetElevation.position.z = carLength * 2;
  170. targetElevation.position.y = 8;
  171. targetElevation.add( targetBob );
  172. targetBob.add( targetMesh );
  173. const targetCamera = makeCamera();
  174. const targetCameraPivot = new THREE.Object3D();
  175. targetCamera.position.y = 1;
  176. targetCamera.position.z = - 2;
  177. targetCamera.rotation.y = Math.PI;
  178. targetBob.add( targetCameraPivot );
  179. targetCameraPivot.add( targetCamera );
  180. // Create a sine-like wave
  181. const curve = new THREE.SplineCurve( [
  182. new THREE.Vector2( - 10, 0 ),
  183. new THREE.Vector2( - 5, 5 ),
  184. new THREE.Vector2( 0, 0 ),
  185. new THREE.Vector2( 5, - 5 ),
  186. new THREE.Vector2( 10, 0 ),
  187. new THREE.Vector2( 5, 10 ),
  188. new THREE.Vector2( - 5, 10 ),
  189. new THREE.Vector2( - 10, - 10 ),
  190. new THREE.Vector2( - 15, - 8 ),
  191. new THREE.Vector2( - 10, 0 ),
  192. ] );
  193. const points = curve.getPoints( 50 );
  194. const geometry = new THREE.BufferGeometry().setFromPoints( points );
  195. const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
  196. const splineObject = new THREE.Line( geometry, material );
  197. splineObject.rotation.x = Math.PI * .5;
  198. splineObject.position.y = 0.05;
  199. scene.add( splineObject );
  200. function resizeRendererToDisplaySize( renderer ) {
  201. const canvas = renderer.domElement;
  202. const width = canvas.clientWidth;
  203. const height = canvas.clientHeight;
  204. const needResize = canvas.width !== width || canvas.height !== height;
  205. if ( needResize ) {
  206. renderer.setSize( width, height, false );
  207. }
  208. return needResize;
  209. }
  210. const targetPosition = new THREE.Vector3();
  211. const tankPosition = new THREE.Vector2();
  212. const tankTarget = new THREE.Vector2();
  213. const cameras = [
  214. { cam: camera, desc: 'detached camera', },
  215. { cam: turretCamera, desc: 'on turret looking at target', },
  216. { cam: targetCamera, desc: 'near target looking at tank', },
  217. { cam: tankCamera, desc: 'above back of tank', },
  218. ];
  219. const infoElem = document.querySelector( '#info' );
  220. function render( time ) {
  221. time *= 0.001;
  222. if ( resizeRendererToDisplaySize( renderer ) ) {
  223. const canvas = renderer.domElement;
  224. cameras.forEach( ( cameraInfo ) => {
  225. const camera = cameraInfo.cam;
  226. camera.aspect = canvas.clientWidth / canvas.clientHeight;
  227. camera.updateProjectionMatrix();
  228. } );
  229. }
  230. // move target
  231. targetOrbit.rotation.y = time * .27;
  232. targetBob.position.y = Math.sin( time * 2 ) * 4;
  233. targetMesh.rotation.x = time * 7;
  234. targetMesh.rotation.y = time * 13;
  235. targetMaterial.emissive.setHSL( time * 10 % 1, 1, .25 );
  236. targetMaterial.color.setHSL( time * 10 % 1, 1, .25 );
  237. // move tank
  238. const tankTime = time * .05;
  239. curve.getPointAt( tankTime % 1, tankPosition );
  240. curve.getPointAt( ( tankTime + 0.01 ) % 1, tankTarget );
  241. tank.position.set( tankPosition.x, 0, tankPosition.y );
  242. tank.lookAt( tankTarget.x, 0, tankTarget.y );
  243. // face turret at target
  244. targetMesh.getWorldPosition( targetPosition );
  245. turretPivot.lookAt( targetPosition );
  246. // make the turretCamera look at target
  247. turretCamera.lookAt( targetPosition );
  248. // make the targetCameraPivot look at the at the tank
  249. tank.getWorldPosition( targetPosition );
  250. targetCameraPivot.lookAt( targetPosition );
  251. wheelMeshes.forEach( ( obj ) => {
  252. obj.rotation.x = time * 3;
  253. } );
  254. const camera = cameras[ time * .25 % cameras.length | 0 ];
  255. infoElem.textContent = camera.desc;
  256. renderer.render( scene, camera.cam );
  257. requestAnimationFrame( render );
  258. }
  259. requestAnimationFrame( render );
  260. }
  261. main();
  262. </script>
  263. </html>