load-gltf-car-path-fixed.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  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 - Load .GLTF - Car Path Fixed</title>
  8. <style>
  9. html, body {
  10. margin: 0;
  11. height: 100%;
  12. }
  13. #c {
  14. width: 100%;
  15. height: 100%;
  16. display: block;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <canvas id="c"></canvas>
  22. </body>
  23. <!-- Import maps polyfill -->
  24. <!-- Remove this when import maps will be widely supported -->
  25. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  26. <script type="importmap">
  27. {
  28. "imports": {
  29. "three": "../../build/three.module.js",
  30. "three/addons/": "../../examples/jsm/"
  31. }
  32. }
  33. </script>
  34. <script type="module">
  35. import * as THREE from 'three';
  36. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  37. import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  38. function main() {
  39. const canvas = document.querySelector( '#c' );
  40. const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
  41. renderer.useLegacyLights = false;
  42. const fov = 45;
  43. const aspect = 2; // the canvas default
  44. const near = 0.1;
  45. const far = 100;
  46. const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
  47. camera.position.set( 0, 10, 20 );
  48. const controls = new OrbitControls( camera, canvas );
  49. controls.target.set( 0, 5, 0 );
  50. controls.update();
  51. const scene = new THREE.Scene();
  52. scene.background = new THREE.Color( 'black' );
  53. {
  54. const planeSize = 40;
  55. const loader = new THREE.TextureLoader();
  56. const texture = loader.load( 'resources/images/checker.png' );
  57. texture.wrapS = THREE.RepeatWrapping;
  58. texture.wrapT = THREE.RepeatWrapping;
  59. texture.magFilter = THREE.NearestFilter;
  60. texture.colorSpace = THREE.SRGBColorSpace;
  61. const repeats = planeSize / 2;
  62. texture.repeat.set( repeats, repeats );
  63. const planeGeo = new THREE.PlaneGeometry( planeSize, planeSize );
  64. const planeMat = new THREE.MeshPhongMaterial( {
  65. map: texture,
  66. side: THREE.DoubleSide,
  67. } );
  68. const mesh = new THREE.Mesh( planeGeo, planeMat );
  69. mesh.rotation.x = Math.PI * - .5;
  70. scene.add( mesh );
  71. }
  72. {
  73. const skyColor = 0xB1E1FF; // light blue
  74. const groundColor = 0xB97A20; // brownish orange
  75. const intensity = 2;
  76. const light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
  77. scene.add( light );
  78. }
  79. {
  80. const color = 0xFFFFFF;
  81. const intensity = 2.5;
  82. const light = new THREE.DirectionalLight( color, intensity );
  83. light.position.set( 5, 10, 2 );
  84. scene.add( light );
  85. scene.add( light.target );
  86. }
  87. function frameArea( sizeToFitOnScreen, boxSize, boxCenter, camera ) {
  88. const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
  89. const halfFovY = THREE.MathUtils.degToRad( camera.fov * .5 );
  90. const distance = halfSizeToFitOnScreen / Math.tan( halfFovY );
  91. // compute a unit vector that points in the direction the camera is now
  92. // in the xz plane from the center of the box
  93. const direction = ( new THREE.Vector3() )
  94. .subVectors( camera.position, boxCenter )
  95. .multiply( new THREE.Vector3( 1, 0, 1 ) )
  96. .normalize();
  97. // move the camera to a position distance units way from the center
  98. // in whatever direction the camera was from the center already
  99. camera.position.copy( direction.multiplyScalar( distance ).add( boxCenter ) );
  100. // pick some near and far values for the frustum that
  101. // will contain the box.
  102. camera.near = boxSize / 100;
  103. camera.far = boxSize * 100;
  104. camera.updateProjectionMatrix();
  105. // point the camera to look at the center of the box
  106. camera.lookAt( boxCenter.x, boxCenter.y, boxCenter.z );
  107. }
  108. let curve;
  109. let curveObject;
  110. {
  111. const controlPoints = [
  112. [ 1.118281, 5.115846, - 3.681386 ],
  113. [ 3.948875, 5.115846, - 3.641834 ],
  114. [ 3.960072, 5.115846, - 0.240352 ],
  115. [ 3.985447, 5.115846, 4.585005 ],
  116. [ - 3.793631, 5.115846, 4.585006 ],
  117. [ - 3.826839, 5.115846, - 14.736200 ],
  118. [ - 14.542292, 5.115846, - 14.765865 ],
  119. [ - 14.520929, 5.115846, - 3.627002 ],
  120. [ - 5.452815, 5.115846, - 3.634418 ],
  121. [ - 5.467251, 5.115846, 4.549161 ],
  122. [ - 13.266233, 5.115846, 4.567083 ],
  123. [ - 13.250067, 5.115846, - 13.499271 ],
  124. [ 4.081842, 5.115846, - 13.435463 ],
  125. [ 4.125436, 5.115846, - 5.334928 ],
  126. [ - 14.521364, 5.115846, - 5.239871 ],
  127. [ - 14.510466, 5.115846, 5.486727 ],
  128. [ 5.745666, 5.115846, 5.510492 ],
  129. [ 5.787942, 5.115846, - 14.728308 ],
  130. [ - 5.423720, 5.115846, - 14.761919 ],
  131. [ - 5.373599, 5.115846, - 3.704133 ],
  132. [ 1.004861, 5.115846, - 3.641834 ],
  133. ];
  134. const p0 = new THREE.Vector3();
  135. const p1 = new THREE.Vector3();
  136. curve = new THREE.CatmullRomCurve3(
  137. controlPoints.map( ( p, ndx ) => {
  138. p0.set( ...p );
  139. p1.set( ...controlPoints[ ( ndx + 1 ) % controlPoints.length ] );
  140. return [
  141. ( new THREE.Vector3() ).copy( p0 ),
  142. ( new THREE.Vector3() ).lerpVectors( p0, p1, 0.1 ),
  143. ( new THREE.Vector3() ).lerpVectors( p0, p1, 0.9 ),
  144. ];
  145. } ).flat(),
  146. true,
  147. );
  148. {
  149. const points = curve.getPoints( 250 );
  150. const geometry = new THREE.BufferGeometry().setFromPoints( points );
  151. const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
  152. curveObject = new THREE.Line( geometry, material );
  153. curveObject.scale.set( 100, 100, 100 );
  154. curveObject.position.y = - 621;
  155. //curveObject.visible = false;
  156. material.depthTest = false;
  157. curveObject.renderOrder = 1;
  158. scene.add( curveObject );
  159. }
  160. }
  161. const cars = [];
  162. {
  163. const gltfLoader = new GLTFLoader();
  164. gltfLoader.load( 'resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', ( gltf ) => {
  165. const root = gltf.scene;
  166. scene.add( root );
  167. const loadedCars = root.getObjectByName( 'Cars' );
  168. const fixes = [
  169. { prefix: 'Car_08', rot: [ Math.PI * .5, 0, Math.PI * .5 ], },
  170. { prefix: 'CAR_03', rot: [ 0, Math.PI, 0 ], },
  171. { prefix: 'Car_04', rot: [ 0, Math.PI, 0 ], },
  172. ];
  173. root.updateMatrixWorld();
  174. for ( const car of loadedCars.children.slice() ) {
  175. const fix = fixes.find( fix => car.name.startsWith( fix.prefix ) );
  176. const obj = new THREE.Object3D();
  177. car.getWorldPosition( obj.position );
  178. car.position.set( 0, 0, 0 );
  179. car.rotation.set( ...fix.rot );
  180. obj.add( car );
  181. scene.add( obj );
  182. cars.push( obj );
  183. }
  184. // compute the box that contains all the stuff
  185. // from root and below
  186. const box = new THREE.Box3().setFromObject( root );
  187. const boxSize = box.getSize( new THREE.Vector3() ).length();
  188. const boxCenter = box.getCenter( new THREE.Vector3() );
  189. // set the camera to frame the box
  190. frameArea( boxSize * 0.5, boxSize, boxCenter, camera );
  191. // update the Trackball controls to handle the new size
  192. controls.maxDistance = boxSize * 10;
  193. controls.target.copy( boxCenter );
  194. controls.update();
  195. } );
  196. }
  197. function resizeRendererToDisplaySize( renderer ) {
  198. const canvas = renderer.domElement;
  199. const width = canvas.clientWidth;
  200. const height = canvas.clientHeight;
  201. const needResize = canvas.width !== width || canvas.height !== height;
  202. if ( needResize ) {
  203. renderer.setSize( width, height, false );
  204. }
  205. return needResize;
  206. }
  207. function render( time ) {
  208. time *= 0.001; // convert to seconds
  209. if ( resizeRendererToDisplaySize( renderer ) ) {
  210. const canvas = renderer.domElement;
  211. camera.aspect = canvas.clientWidth / canvas.clientHeight;
  212. camera.updateProjectionMatrix();
  213. }
  214. for ( const car of cars ) {
  215. car.rotation.y = time;
  216. }
  217. renderer.render( scene, camera );
  218. requestAnimationFrame( render );
  219. }
  220. requestAnimationFrame( render );
  221. }
  222. main();
  223. </script>
  224. </html>