window.addEventListener('load', function(){ /*WebGL 3D-interactive game by Joakim Nyland*/ alert("Thanks for checking out my script! I have commented most of the code so hopefully you can learn something.\n\nNew in v3.0:\n- Added arrows (Thanks to Saantonandre for arrow sprites)\n- Added car\n- Added sound\n- Added score"); /* Thanks for checking out my script! I have commented most of the code so hopefully you can learn something, and maybe get started with your own WebGL simulations. The simulation should work in browsers and on phones thanks to WebGL and OpenGL ES. Use computer for best readability of the code. Some information for those interested, these are my preferences when making 3D simulations: - Writing the JavaScript code: Sublime Text - Testing the code: Firefox browser - Making the models: Blender (and exporting as .obj and .mtl) */ // ********** Setting parameters ********** console.log=function(){}; const SCALE = 27; const PI = Math.PI; var posNeg=0; var loopVar=0; var spawnVar=0; var leftArrow = document.getElementById("left"); var rightArrow = document.getElementById("right"); var helloWorld= new Audio("https://dl.dropbox.com/s/tdwrhq7dyfu8e2f/helloWorld.mp3"); var niceSong = new Audio("https://dl.dropbox.com/s/47yhesl39v8w3at/niceSong.mp3"); //Camera values const FOV = 45; const ASPECT = window.innerWidth/window.innerHeight; const NEAR = 0.1; const FAR = 2000; //Button parameters var initAnim = true; var startButton = document.getElementById( 'startButtonId' ); // ********** Creating the scene: ********** var renderer = new THREE.WebGLRenderer({ antialias: true }); //Creates a WebGL renderer using threejs library renderer.setPixelRatio( window.devicePixelRatio ); //Prevents blurry output renderer.setSize( window.innerWidth,window.innerHeight ); //Sets renderer size to the size of the window renderer.setClearColor(0xA9F5F2, 1); //Makes the background color of the scene blue renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; document.body.appendChild( renderer.domElement ); //Attaches renderer to DOM (initializes renderer) var scene = new THREE.Scene(); //Creates an empty scene where we are going to add our objects var camera = new THREE.PerspectiveCamera( FOV,ASPECT,NEAR,FAR ); //Creates a camera camera.position.set( 50/SCALE , -200/SCALE, 100/SCALE ); //Positions the camera camera.up.set( 0,0,1 ); //Sets the camera the correct direction camera.rotation.x=-PI/2; scene.add( camera ); //Adds the camera to the scene var controls = new THREE.OrbitControls( camera, renderer.domElement ); //OrbitControls allows camera to be controlled and orbit around a target controls.minDistance = 400/SCALE; //Sets the minimum distance one can pan into the scene controls.maxDistance = 1000/SCALE; //Sets the maximum distance one can pan away from scene // ************** Right and Left arrows**************** leftArrow.addEventListener("touchstart", function () { leftKey = true; leftArrow.style.transform = "scale(1.5)"; leftArrow.style.opacity = "1"; car.rotation.y=PI/2+0.4; }); rightArrow.addEventListener("touchstart", function () { rightKey = true; rightArrow.style.transform = "scale(1.5)"; rightArrow.style.opacity = "1"; car.rotation.y=(3*PI)/2+0.4; }); leftArrow.addEventListener("touchend", leftEnd); function leftEnd(){ leftKey = false; leftArrow.style.transform = ""; leftArrow.style.opacity = "0.9"; car.rotation.y=PI/2+0.4; } rightArrow.addEventListener("touchend", rightEnd); function rightEnd(){ rightKey = false; rightArrow.style.transform = ""; rightArrow.style.opacity = "0.9"; car.rotation.y=(3*PI)/2+0.4; } //PC controls leftArrow.addEventListener("mousedown", function () { leftKey = true; leftArrow.style.transform = "scale(1.5)"; leftArrow.style.opacity = "1"; car.rotation.y=PI/2+0.4; }); rightArrow.addEventListener("mousedown", function () { rightKey = true; rightArrow.style.transform = "scale(1.5)"; rightArrow.style.opacity = "1"; car.rotation.y=(3*PI)/2+0.4; }); document.addEventListener("mouseup", function () { leftKey = false; leftArrow.style.transform = ""; leftArrow.style.opacity = "0.9"; rightKey = false; rightArrow.style.transform = ""; rightArrow.style.opacity = "0.9"; }); // ********** Initialize GUI (Graphical user interface) ********** var gui = new dat.GUI(); var guiParams = { //Sets the variable names and default values of the GUI cameraPosition : false, }; gui.add(guiParams, 'cameraPosition').name('POV'); //Button that sets camera position equal to car position gui.closed = true; // ********** Adding light and Shadow********** var ambientLight = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambientLight); //Adding ambient light var light = new THREE.DirectionalLight( 0xffffff, 1.1 ); light.position.set(0, 0, 1); light.castShadow = true; var d = 8; light.shadowCameraLeft = -d; light.shadowCameraRight = d; light.shadowCameraTop = d; light.shadowCameraBottom = -d; scene.add(light); // ********** Loading the models ********** var car = new THREE.Object3D(); //Creates a new threejs 3D-object variable named car var mtlLoader = new THREE.MTLLoader(); //Creates a mtlLoader (to apply texture to 3d objects) mtlLoader.load( 'https://dl.dropbox.com/s/gv5gne294ewyxfj/Car.mtl', function( materials ) //Prepare to set color { var objLoader = new THREE.OBJLoader(); //Creates an object loader (to load 3d objects) objLoader.setMaterials( materials ); //Sets color to the car objLoader.load( 'https://dl.dropbox.com/s/4shab2h7zm3rk5r/Car.obj', function ( object ) //Loads car { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.castShadow = true; } }); car.add( object ); //Adds the object with material to the car variable }); }); scene.add( car ); //Adds car to the scene //Some positioning and scaling car.position.z=-0.15; //Positions car onto ground car.position.x=0; car.position.y=-71/10; car.rotation.x=PI/2; car.rotation.y=PI/2+0.4; car.scale.x = 0.6; car.scale.y = 0.6; car.scale.z = 0.6; var obstacle = new THREE.Object3D(); //Creates a new threejs 3D-object variable named obstacle var mtlLoader = new THREE.MTLLoader(); //Creates an mtlLoader (to apply texture to 3d objects) var objLoader = new THREE.OBJLoader(); mtlLoader.setTexturePath("https://dl.dropbox.com/s/t4cm3vzsbx21crc/"); mtlLoader.setCrossOrigin(true); mtlLoader.load('https://dl.dropbox.com/s/co60o9quyar7r4w/Earth.mtl', function (materials) { materials.preload(); objLoader.setMaterials(materials); objLoader.load('https://dl.dropbox.com/s/od28dsqplhfxa93/Earth.obj', function(object) { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.castShadow = true; } }); obstacle.add( object ); }); }); scene.add(obstacle); //Some positioning obstacle.position.z=0.621; obstacle.position.y=72/10; obstacle.position.x=-20/10; obstacle.scale.x=0.25; obstacle.scale.y=0.25; obstacle.scale.z=0.25; var obstacle2 = new THREE.Object3D(); //Creates a new threejs 3D-object variable named obstacle2 var mtlLoader = new THREE.MTLLoader(); //Creates a mtlLoader (to apply texture to 3d objects) var objLoader = new THREE.OBJLoader(); mtlLoader.setTexturePath("https://dl.dropbox.com/s/t4cm3vzsbx21crc/"); mtlLoader.setCrossOrigin(true); mtlLoader.load('https://dl.dropbox.com/s/co60o9quyar7r4w/Earth.mtl', function (materials) { materials.preload(); objLoader.setMaterials(materials); objLoader.load('https://dl.dropbox.com/s/od28dsqplhfxa93/Earth.obj', function(object) { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.castShadow = true; } }); obstacle2.add( object ); }); }); // ********** Ground ********** var width = 10; //width of ground var length = 15; //length of ground var geometry = new THREE.PlaneGeometry( width, length); //ThreeJS function to create plane geometry var texture; texture = new THREE.TextureLoader().load( "https://dl.dropbox.com/s/f8exr3zow9nqsol/grass.jpg?dl=0" ); var groundmat = new THREE.MeshLambertMaterial({ //Sets color and material attributes for plane color: 0x088A08, map:texture, opacity: 1, side: THREE.DoubleSide //Ground visible from both sides }); var ground = new THREE.Mesh( geometry, groundmat ); //Creates a mesh containing the geometry and groundmaterial just defined ground.receiveShadow = true; scene.add( ground ); //Adds ground to scene // ******** Functions to make stuff happen ******* function obstacleTranslate(){ if (loopVar <=3) { obstacle.position.y-=1/10; obstacle.rotation.x+=1/10; } else if (loopVar < 10) { obstacle.position.y-=2/10; obstacle.rotation.x+=2/10; } else if (loopVar<=20) { obstacle.position.y-=3/10; obstacle2.position.y-=3/10; obstacle.rotation.x+=3/10; obstacle2.rotation.x+=3/10; } else if (loopVar<=40) { obstacle.position.y-=4/10; obstacle2.position.y-=4/10; obstacle.rotation.x+=4/10; obstacle2.rotation.x+=4/10; } else if (loopVar<=100) { obstacle.position.y-=5/10; obstacle2.position.y-=5/10; obstacle.rotation.x+=5/10; obstacle2.rotation.x+=5/10; } else if (loopVar>100) { obstacle.position.y-=6/10; obstacle2.position.y-=6/10; obstacle.rotation.x+=6/10; obstacle2.rotation.x+=6/10; } }; function carTranslate() { if(leftKey==true && car.position.x>-4.3) { car.position.x-=1/10; } else if ( rightKey==true && car.position.x<4.3) { car.position.x+=1/10; } }; function obstacleTeleport(){ if( obstacle.position.y<=-90/10 ) { loopVar += 1; obstacle.position.y=72/10; obstacle2.position.y=72/10; posNeg = Math.random() if (posNeg>0.5) { q = -1; } else { q=1; } obstacle.position.x=((q*Math.random()*10)/(100) )*47; obstacle2.position.x=((-q*Math.random()*10)/(100) )*47; obstacle.scale.x=0.25; obstacle.scale.y=0.25; obstacle.scale.z=0.25; obstacle2.scale.x=0.25; obstacle2.scale.y=0.25; obstacle2.scale.z=0.25; helloWorld.play(); } }; function obstacleDisappear(){ if( obstacle.position.y<=-80/10) { obstacle.scale.x-=0.03; obstacle.scale.y-=0.03; obstacle.scale.z-=0.03; } if(loopVar>=10) { if( obstacle2.position.y<=-80/10) { obstacle2.scale.x-=0.03; obstacle2.scale.y-=0.03; obstacle2.scale.z-=0.03; } } } function obstacleCollision(){ if( car.position.x<=(obstacle.position.x+1.2) && car.position.x>=(obstacle.position.x-1.2) ) { if ( obstacle.position.y<=-70/10 && obstacle.position.y>=-79/10) { if (loopVar<40) { alert("Ops, you crashed! You got " + loopVar + " points!"); } else if (loopVar>=40) { alert("Ops, you crashed! You got " + loopVar + " points! You're really good!"); } car.position.x=0; obstacle.position.y=72/10; obstacle.scale.x=0.25; obstacle.scale.y=0.25; obstacle.scale.z=0.25; scene.remove(obstacle2); leftEnd(); rightEnd(); loopVar=0 spawnVar=0; } } if (loopVar >=10) { if( car.position.x<=(obstacle2.position.x+1.2) && car.position.x>=(obstacle2.position.x-1.2) ) { if ( obstacle2.position.y<=-70/10 && obstacle.position.y>=-79/10) { if (loopVar<40) { alert("Ops, you crashed! You got " + loopVar + " points!"); } else if (loopVar>=40) { alert("Ops, you crashed! You got " + loopVar + " points! You're really good!"); } car.position.x=0; obstacle.position.y=72/10; obstacle.scale.x=0.25; obstacle.scale.y=0.25; obstacle.scale.z=0.25; scene.remove(obstacle2); loopVar=0; spawnVar=0; } } } }; function obstacleSpawn(){ if(loopVar == 10 && spawnVar==0) { scene.add( obstacle2 ); //Adds new obstacle to the scene //Some positioning obstacle2.position.z=0.621; obstacle2.scale.x=0.25; obstacle2.scale.y=0.25; obstacle2.scale.z=0.25; obstacle2.position.y=72/10; spawnVar=1; } }; function enablePOV(){ if (guiParams.cameraPosition==true) { camera.position.set(car.position.x,car.position.y,-car.position.z ); camera.lookAt( car.position.x,72/10,0.621 ); } else { controls.update(); } }; function score(){ var scoreId = document.getElementById( 'scoreId'); scoreId.innerHTML = "Score: " + loopVar; } startButton.onclick = function StartAnimation() { render(); helloWorld.play(); gui.closed = false; document.getElementById( 'startButtonId'); startButtonId.parentNode.removeChild(startButtonId); }; //********** Render function ********** var render = function () { requestAnimationFrame(render); //render function is called every frame! //Car translation when pressing arrows carTranslate(); //Obstacle translation obstacleTranslate(); //Obstacle disappearing before teleporting obstacleDisappear(); //Obstacle teleportation obstacleTeleport(); //Obstacle collision obstacleCollision(); //New obstacle spawn obstacleSpawn(); //Setting camera position to car position when POV enabled enablePOV(); //Shows players score score(); niceSong.play(); niceSong.volume=0.5; renderer.render(scene, camera); //We need this in the loop to perform the rendering }; renderer.render(scene, camera); }); //Made by Joakim Nyland

🚘3D Car Game🚘