123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333 |
- <!--<!DOCTYPE html>-->
- <html lang="en">
- <head>
- <title>threejs obj space</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <style type="text/css">
- html,
- body {
- margin: 0;
- padding: 0;
- background-color: #121212;
- }
- #game {
- width: 100%;
- height: 100%;
- /*margin: 10% auto auto auto;*/
- display: block;
- }
- </style>
- </head>
- <body>
- <div id="game"></div>
- <script src="./js/three.js-master/build/three.js"></script>
- <script src="./js/three.js-master/examples/js/loaders/OBJLoader.js"></script>
- <script src="./js/three.js-master/examples/js/loaders/MTLLoader.js"></script>
- <script type="text/javascript">
- var scene;
- var plane;
- var spaceCraft;
- var acceleration = { x: 0, y: 0 };
- var velocity = { x: 0, y: 0 };
- var camera;
- var renderer;
- var oscillator = 0;
- var targetObject;
- var spotLight;
- var keys = [];
- var targetCameraHeight = 175;
- var mouse;
- var mouseThrusting = false;
- var shipSpeed = 0.02;
- var shipRotationSpeed = 3;
- var gameContainer = document.getElementById("game");
- window.addEventListener("resize", function (event) {
- gameContainer = document.getElementById("game");
- buildCamera();
- renderer.setSize(gameContainer.clientWidth, gameContainer.clientHeight);
- });
- window.addEventListener("keydown", (event) => {
- keys[event.keyCode] = true;
- });
- window.addEventListener("keyup", (event) => {
- keys[event.keyCode] = false;
- });
- window.addEventListener("mousemove", (event) => {
- mouse.x = event.clientX - (window.innerWidth / 2);
- mouse.y = event.clientY - (window.innerHeight / 2);
- });
- window.addEventListener("wheel", (event) => {
- targetCameraHeight += (event.deltaY / 10);
- targetCameraHeight = Math.max(Math.min(targetCameraHeight, 500), 10);
- });
- var scaling = false;
- var pinchCenter = { x: 0, y: 0 };
- var origDistance = null;
- var origCameraHeight = null;
- window.addEventListener("touchstart", (event) => {
- scaling = false;
- mouseThrusting = false;
- if (event.touches.length == 1) {
- mouseThrusting = true;
- mouse.x = event.touches[0].clientX - (window.innerWidth / 2);
- mouse.y = event.touches[0].clientY - (window.innerHeight / 2);
- } else if (event.touches.length == 2) {
- scaling = true;
- pinchCenter = {
- x: (event.touches[0].clientX + event.touches[1].clientX) / 2,
- y: (event.touches[0].clientY + event.touches[1].clientY) / 2
- };
- origDistance = Math.hypot(
- event.touches[0].clientX - pinchCenter.x,
- event.touches[0].clientY - pinchCenter.y
- );
- origCameraHeight = targetCameraHeight;
- }
- });
- window.addEventListener("touchmove", (event) => {
- mouseThrusting = false;
- if (event.touches.length == 1) {
- mouseThrusting = true;
- mouse.x = event.touches[0].clientX - (window.innerWidth / 2);
- mouse.y = event.touches[0].clientY - (window.innerHeight / 2);
- } else if (event.touches.length == 2) {
- if (scaling) {
- var newDist = Math.hypot(
- event.touches[0].clientX - pinchCenter.x,
- event.touches[0].clientY - pinchCenter.y
- );
- targetCameraHeight = origCameraHeight * (origDistance / newDist);
- targetCameraHeight = Math.max(Math.min(targetCameraHeight, 500), 10);
- }
- }
- });
- window.addEventListener("touchend", (event) => {
- if (scaling) {
- scaling = false;
- }
- mouseThrusting = false;
- });
- window.addEventListener("mousedown", event => {
- });
- window.addEventListener("contextmenu", event => {
- event.preventDefault();
- mouseThrusting = true;
- return false;
- });
- window.addEventListener("mouseup", event => {
- if (event.button == 2) {
- mouseThrusting = false;
- }
- });
- let onProgress = (xhr) => {
- console.log((xhr.loaded / xhr.total * 100) + '% loaded');
- };
- let onError = (error) => {
- console.error("onError", error);
- };
- let buildCamera = () => {
- camera = new THREE.PerspectiveCamera(66, gameContainer.clientWidth / gameContainer.clientHeight, 0.1, 1000);
- targetCameraHeight = 175;
- camera.position.y = targetCameraHeight;
- camera.position.x = 0;
- camera.position.z = 0;
- camera.rotation.y = 90 * (Math.PI / 180);
- camera.up = new THREE.Vector3(0, 1, 0);
- camera.lookAt(new THREE.Vector3(0, 0, 0));
- return camera;
- }
- let addAmbientLight = (scene) => {
- var light = new THREE.AmbientLight(0xffffff);
- light.intensity = 0.6;
- scene.add(light);
- };
- let addSpotLight = (scene) => {
- spotLight = new THREE.SpotLight(0xffffff);
- spotLight.position.set(0, 100, 0);
- //spotLight.shadow.camera.near = 0.0001;
- spotLight.angle = 0.18;
- spotLight.penumbra = 1;
- spotLight.intensity = 0.2;
- //spotLight.castShadow = true;
- scene.add(spotLight);
- };
- let addSpacePlane = (scene) => {
- var texture = new THREE.TextureLoader().load('./assets/Backgrounds/blue.png');
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.RepeatWrapping;
- texture.side = THREE.SingleSide;
- texture.repeat.set(20, 20);
- var geometry = new THREE.PlaneGeometry(500, 500, 256, 256);
- var material = new THREE.MeshLambertMaterial({ map: texture, color: 0xffffff });
- plane = new THREE.Mesh(geometry, material);
- plane.position.y = -10;
- plane.rotation.x = 270 * (Math.PI / 180);
- //plane.receiveShadow = true;
- scene.add(plane);
- };
- let addSpaceCraft = (scene) => {
- new THREE.MTLLoader().load('./assets/Models/spaceCraft1.mtl', function (materials) {
- materials.preload();
- new THREE.OBJLoader()
- .setMaterials(materials)
- .load('./assets/Models/spaceCraft1.obj', function (object) {
- //object.traverse(function (child) {
- // child.castShadow = true;
- // child.receiveShadow = true;
- //});
- spaceCraft = object;
- spaceCraft.up = new THREE.Vector3(0, 0, 1);
- //object.castShadow = true;
- //object.receiveShadow = true;
- // object.rotation.x = 90;
- scene.add(object);
- }, onProgress, onError);
- }, onProgress, onError);
- };
- let animate = () => {
- requestAnimationFrame(animate);
- update();
- renderer.render(scene, camera);
- };
- let update = () => {
- acceleration.x = 0;
- acceleration.y = 0;
- oscillator += 1;
- oscillator %= 360;
- if (spaceCraft) {
- spaceCraft.rotation.y = Math.atan2(-mouse.x, -mouse.y);
- //spaceCraft.rotation.y = mouse.x;
- //float effect
- spaceCraft.position.y = Math.sin(oscillator * Math.PI / 180);
- spaceCraft.rotation.z = Math.cos(oscillator * Math.PI / 180) / 8;
- if (keys[37]) { // left
- spaceCraft.rotation.y += shipRotationSpeed * (Math.PI / 180);
- }
- if ((keys[38] || keys[87]) || mouseThrusting) { // up || w
- acceleration.x = shipSpeed * Math.sin(spaceCraft.rotation.y - (180 * Math.PI / 180));
- acceleration.y = shipSpeed * Math.cos(spaceCraft.rotation.y - (180 * Math.PI / 180));
- }
- if (keys[39]) { // right
- spaceCraft.rotation.y -= shipRotationSpeed * (Math.PI / 180);
- }
- if (keys[40]) { // down
- }
- velocity.x += acceleration.x;
- velocity.y += acceleration.y;
- spaceCraft.position.x += velocity.x;
- spaceCraft.position.z += velocity.y;
- camera.position.x = spaceCraft.position.x;
- camera.position.z = spaceCraft.position.z;
- //targetCameraHeight = Math.floor(75 + (50 * ((Math.abs(velocity.x) + Math.abs(velocity.y)))));
- // if (camera.position.y < targetCameraHeight) {
- // camera.position.y += Math.sign(targetCameraHeight);
- // }
- // if (acceleration.x == 0 && this.acceleration.y == 0) { //only zoom back in if the user isn't touching the throttle
- // if (camera.position.y > targetCameraHeight) {
- // camera.position.y -= Math.sign(targetCameraHeight);
- // }
- // }
- camera.position.y = targetCameraHeight;
- spotLight.position.x = camera.position.x;
- spotLight.position.z = camera.position.z;
- targetObject.position.x = spaceCraft.position.x + (5 * Math.cos(oscillator * Math.PI / 180));
- targetObject.position.z = spaceCraft.position.z + (5 * Math.sin(oscillator * Math.PI / 180));
- }
- //raycaster.setFromCamera(mouse, camera);
- // raycaster.ray.intersectPlane(plane, intersectPoint);
- //intersectPoint.x = 10;
- //intersectPoint.z = 10;
- //if (spaceCraft) { spaceCraft.lookAt(intersectPoint); }
- // mousePoint.position.x = intersectPoint.x;
- // mousePoint.position.y = intersectPoint.y;
- // mousePoint.position.z = intersectPoint.z;
- };
- document.addEventListener("DOMContentLoaded", function () {
- scene = new THREE.Scene();
- scene.background = new THREE.Color(0x000000);
- mouse = new THREE.Vector2();
- // intersectPoint = new THREE.Vector3();
- // raycaster = new THREE.Raycaster();
- camera = buildCamera();
- renderer = new THREE.WebGLRenderer();
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setSize(gameContainer.clientWidth, gameContainer.clientHeight);
- addAmbientLight(scene);
- addSpacePlane(scene);
- addSpotLight(scene);
- targetObject = new THREE.Object3D();
- scene.add(targetObject);
- spotLight.target = targetObject;
- addSpaceCraft(scene);
- gameContainer.appendChild(renderer.domElement);
- animate();
- });
- </script>
- </body>
- </html>
|