index.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <!--<!DOCTYPE html>-->
  2. <html lang="en">
  3. <head>
  4. <title>threejs obj space</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. <style type="text/css">
  8. html,
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. background-color: #121212;
  13. }
  14. #game {
  15. width: 100%;
  16. height: 100%;
  17. /*margin: 10% auto auto auto;*/
  18. display: block;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="game"></div>
  24. <script src="./js/three.js-master/build/three.js"></script>
  25. <script src="./js/three.js-master/examples/js/loaders/OBJLoader.js"></script>
  26. <script src="./js/three.js-master/examples/js/loaders/MTLLoader.js"></script>
  27. <script type="text/javascript">
  28. var scene;
  29. var plane;
  30. var spaceCraft;
  31. var acceleration = { x: 0, y: 0 };
  32. var velocity = { x: 0, y: 0 };
  33. var camera;
  34. var renderer;
  35. var oscillator = 0;
  36. var targetObject;
  37. var spotLight;
  38. var keys = [];
  39. var targetCameraHeight = 175;
  40. var mouse;
  41. var mouseThrusting = false;
  42. var shipSpeed = 0.02;
  43. var shipRotationSpeed = 3;
  44. var gameContainer = document.getElementById("game");
  45. window.addEventListener("resize", function (event) {
  46. gameContainer = document.getElementById("game");
  47. buildCamera();
  48. renderer.setSize(gameContainer.clientWidth, gameContainer.clientHeight);
  49. });
  50. window.addEventListener("keydown", (event) => {
  51. keys[event.keyCode] = true;
  52. });
  53. window.addEventListener("keyup", (event) => {
  54. keys[event.keyCode] = false;
  55. });
  56. window.addEventListener("mousemove", (event) => {
  57. mouse.x = event.clientX - (window.innerWidth / 2);
  58. mouse.y = event.clientY - (window.innerHeight / 2);
  59. });
  60. window.addEventListener("wheel", (event) => {
  61. targetCameraHeight += (event.deltaY / 10);
  62. targetCameraHeight = Math.max(Math.min(targetCameraHeight, 500), 10);
  63. });
  64. var scaling = false;
  65. var pinchCenter = { x: 0, y: 0 };
  66. var origDistance = null;
  67. var origCameraHeight = null;
  68. window.addEventListener("touchstart", (event) => {
  69. scaling = false;
  70. mouseThrusting = false;
  71. if (event.touches.length == 1) {
  72. mouseThrusting = true;
  73. mouse.x = event.touches[0].clientX - (window.innerWidth / 2);
  74. mouse.y = event.touches[0].clientY - (window.innerHeight / 2);
  75. } else if (event.touches.length == 2) {
  76. scaling = true;
  77. pinchCenter = {
  78. x: (event.touches[0].clientX + event.touches[1].clientX) / 2,
  79. y: (event.touches[0].clientY + event.touches[1].clientY) / 2
  80. };
  81. origDistance = Math.hypot(
  82. event.touches[0].clientX - pinchCenter.x,
  83. event.touches[0].clientY - pinchCenter.y
  84. );
  85. origCameraHeight = targetCameraHeight;
  86. }
  87. });
  88. window.addEventListener("touchmove", (event) => {
  89. mouseThrusting = false;
  90. if (event.touches.length == 1) {
  91. mouseThrusting = true;
  92. mouse.x = event.touches[0].clientX - (window.innerWidth / 2);
  93. mouse.y = event.touches[0].clientY - (window.innerHeight / 2);
  94. } else if (event.touches.length == 2) {
  95. if (scaling) {
  96. var newDist = Math.hypot(
  97. event.touches[0].clientX - pinchCenter.x,
  98. event.touches[0].clientY - pinchCenter.y
  99. );
  100. targetCameraHeight = origCameraHeight * (origDistance / newDist);
  101. targetCameraHeight = Math.max(Math.min(targetCameraHeight, 500), 10);
  102. }
  103. }
  104. });
  105. window.addEventListener("touchend", (event) => {
  106. if (scaling) {
  107. scaling = false;
  108. }
  109. mouseThrusting = false;
  110. });
  111. window.addEventListener("mousedown", event => {
  112. });
  113. window.addEventListener("contextmenu", event => {
  114. event.preventDefault();
  115. mouseThrusting = true;
  116. return false;
  117. });
  118. window.addEventListener("mouseup", event => {
  119. if (event.button == 2) {
  120. mouseThrusting = false;
  121. }
  122. });
  123. let onProgress = (xhr) => {
  124. console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  125. };
  126. let onError = (error) => {
  127. console.error("onError", error);
  128. };
  129. let buildCamera = () => {
  130. camera = new THREE.PerspectiveCamera(66, gameContainer.clientWidth / gameContainer.clientHeight, 0.1, 1000);
  131. targetCameraHeight = 175;
  132. camera.position.y = targetCameraHeight;
  133. camera.position.x = 0;
  134. camera.position.z = 0;
  135. camera.rotation.y = 90 * (Math.PI / 180);
  136. camera.up = new THREE.Vector3(0, 1, 0);
  137. camera.lookAt(new THREE.Vector3(0, 0, 0));
  138. return camera;
  139. }
  140. let addAmbientLight = (scene) => {
  141. var light = new THREE.AmbientLight(0xffffff);
  142. light.intensity = 0.6;
  143. scene.add(light);
  144. };
  145. let addSpotLight = (scene) => {
  146. spotLight = new THREE.SpotLight(0xffffff);
  147. spotLight.position.set(0, 100, 0);
  148. //spotLight.shadow.camera.near = 0.0001;
  149. spotLight.angle = 0.18;
  150. spotLight.penumbra = 1;
  151. spotLight.intensity = 0.2;
  152. //spotLight.castShadow = true;
  153. scene.add(spotLight);
  154. };
  155. let addSpacePlane = (scene) => {
  156. var texture = new THREE.TextureLoader().load('./assets/Backgrounds/blue.png');
  157. texture.wrapS = THREE.RepeatWrapping;
  158. texture.wrapT = THREE.RepeatWrapping;
  159. texture.side = THREE.SingleSide;
  160. texture.repeat.set(20, 20);
  161. var geometry = new THREE.PlaneGeometry(500, 500, 256, 256);
  162. var material = new THREE.MeshLambertMaterial({ map: texture, color: 0xffffff });
  163. plane = new THREE.Mesh(geometry, material);
  164. plane.position.y = -10;
  165. plane.rotation.x = 270 * (Math.PI / 180);
  166. //plane.receiveShadow = true;
  167. scene.add(plane);
  168. };
  169. let addSpaceCraft = (scene) => {
  170. new THREE.MTLLoader().load('./assets/Models/spaceCraft1.mtl', function (materials) {
  171. materials.preload();
  172. new THREE.OBJLoader()
  173. .setMaterials(materials)
  174. .load('./assets/Models/spaceCraft1.obj', function (object) {
  175. //object.traverse(function (child) {
  176. // child.castShadow = true;
  177. // child.receiveShadow = true;
  178. //});
  179. spaceCraft = object;
  180. spaceCraft.up = new THREE.Vector3(0, 0, 1);
  181. //object.castShadow = true;
  182. //object.receiveShadow = true;
  183. // object.rotation.x = 90;
  184. scene.add(object);
  185. }, onProgress, onError);
  186. }, onProgress, onError);
  187. };
  188. let animate = () => {
  189. requestAnimationFrame(animate);
  190. update();
  191. renderer.render(scene, camera);
  192. };
  193. let update = () => {
  194. acceleration.x = 0;
  195. acceleration.y = 0;
  196. oscillator += 1;
  197. oscillator %= 360;
  198. if (spaceCraft) {
  199. spaceCraft.rotation.y = Math.atan2(-mouse.x, -mouse.y);
  200. //spaceCraft.rotation.y = mouse.x;
  201. //float effect
  202. spaceCraft.position.y = Math.sin(oscillator * Math.PI / 180);
  203. spaceCraft.rotation.z = Math.cos(oscillator * Math.PI / 180) / 8;
  204. if (keys[37]) { // left
  205. spaceCraft.rotation.y += shipRotationSpeed * (Math.PI / 180);
  206. }
  207. if ((keys[38] || keys[87]) || mouseThrusting) { // up || w
  208. acceleration.x = shipSpeed * Math.sin(spaceCraft.rotation.y - (180 * Math.PI / 180));
  209. acceleration.y = shipSpeed * Math.cos(spaceCraft.rotation.y - (180 * Math.PI / 180));
  210. }
  211. if (keys[39]) { // right
  212. spaceCraft.rotation.y -= shipRotationSpeed * (Math.PI / 180);
  213. }
  214. if (keys[40]) { // down
  215. }
  216. velocity.x += acceleration.x;
  217. velocity.y += acceleration.y;
  218. spaceCraft.position.x += velocity.x;
  219. spaceCraft.position.z += velocity.y;
  220. camera.position.x = spaceCraft.position.x;
  221. camera.position.z = spaceCraft.position.z;
  222. //targetCameraHeight = Math.floor(75 + (50 * ((Math.abs(velocity.x) + Math.abs(velocity.y)))));
  223. // if (camera.position.y < targetCameraHeight) {
  224. // camera.position.y += Math.sign(targetCameraHeight);
  225. // }
  226. // if (acceleration.x == 0 && this.acceleration.y == 0) { //only zoom back in if the user isn't touching the throttle
  227. // if (camera.position.y > targetCameraHeight) {
  228. // camera.position.y -= Math.sign(targetCameraHeight);
  229. // }
  230. // }
  231. camera.position.y = targetCameraHeight;
  232. spotLight.position.x = camera.position.x;
  233. spotLight.position.z = camera.position.z;
  234. targetObject.position.x = spaceCraft.position.x + (5 * Math.cos(oscillator * Math.PI / 180));
  235. targetObject.position.z = spaceCraft.position.z + (5 * Math.sin(oscillator * Math.PI / 180));
  236. }
  237. //raycaster.setFromCamera(mouse, camera);
  238. // raycaster.ray.intersectPlane(plane, intersectPoint);
  239. //intersectPoint.x = 10;
  240. //intersectPoint.z = 10;
  241. //if (spaceCraft) { spaceCraft.lookAt(intersectPoint); }
  242. // mousePoint.position.x = intersectPoint.x;
  243. // mousePoint.position.y = intersectPoint.y;
  244. // mousePoint.position.z = intersectPoint.z;
  245. };
  246. document.addEventListener("DOMContentLoaded", function () {
  247. scene = new THREE.Scene();
  248. scene.background = new THREE.Color(0x000000);
  249. mouse = new THREE.Vector2();
  250. // intersectPoint = new THREE.Vector3();
  251. // raycaster = new THREE.Raycaster();
  252. camera = buildCamera();
  253. renderer = new THREE.WebGLRenderer();
  254. renderer.setPixelRatio(window.devicePixelRatio);
  255. renderer.setSize(gameContainer.clientWidth, gameContainer.clientHeight);
  256. addAmbientLight(scene);
  257. addSpacePlane(scene);
  258. addSpotLight(scene);
  259. targetObject = new THREE.Object3D();
  260. scene.add(targetObject);
  261. spotLight.target = targetObject;
  262. addSpaceCraft(scene);
  263. gameContainer.appendChild(renderer.domElement);
  264. animate();
  265. });
  266. </script>
  267. </body>
  268. </html>