window.onload = ()=> { console.error = () => {}; console.warn = () => {}; var scene, camera, renderer; scene = new THREE.Scene(); scene.background = new THREE.Color("skyblue"); camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth ,window.innerHeight ); renderer.shadowMap.enabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; document.body.appendChild( renderer.domElement ); //getting elements from HTML var scoreViewer = document.getElementById("score"); var turnL = document.getElementById("turnLeft"); var turnR = document.getElementById("turnRight"); //declaring variables var terrainGrass, terrainSand, water, airplane, hotAirBallon, hotAirBallonCount=10, objects=[], ballons=[], score=0, forward = true; //Terrain var terrainGrassGeo = new THREE.PlaneGeometry(180,150,150,100); var terrainGrassMat = new THREE.MeshPhongMaterial({color:"#649e0d", shading:THREE.FlatShading});//#6fad11 terrainGrassMat.displacementMap = terrainMap; terrainGrassMat.displacementScale = 4.7; terrainGrass = new THREE.Mesh(terrainGrassGeo, terrainGrassMat); terrainGrass.castShadow = false; terrainGrass.receiveShadow = true; scene.add(terrainGrass); var terrainSandGeo = new THREE.PlaneGeometry(180,155,155,100); var terrainSandMat = new THREE.MeshPhongMaterial({color:"#d7ee44", shading:THREE.FlatShading}); terrainSandMat.displacementMap = terrainMap; terrainSandMat.displacementScale = 4.1; terrainSand = new THREE.Mesh(terrainSandGeo, terrainSandMat); terrainSand.castShadow = false; terrainSand.receiveShadow = true; scene.add(terrainSand); //Water var waterGeo = new THREE.CylinderGeometry(80, 80, 5, 100); var waterMat = new THREE.MeshPhongMaterial({color:"#0e97ff",shading:THREE.SmoothShading}); waterMat.transparent = true; waterMat.opacity = 0.62; waterMat.map = waterT; waterMat.bumpMap = waterT; waterMat.bumpScale = 0.7; var water = new THREE.Mesh(waterGeo, waterMat); scene.add(water); //Airplane airplane = new THREE.Object3D(); var fuselage, wings, rudder, elevator, cockpit, powerplant, propeller, propellerNose; var planeMat = new THREE.MeshPhongMaterial({color:"gold", shading:THREE.FlatShading}); var fuselageGeo = new THREE.CylinderGeometry(1.9,0.35,9.5,15); fuselage = new THREE.Mesh(fuselageGeo, planeMat); fuselage.rotation.x = Math.PI / -2; wingsGeo = new THREE.BoxGeometry(12,0.3,1.7); wings = new THREE.Mesh(wingsGeo, planeMat); wings.position.z -= 1.3; rudderGeo = new THREE.BoxGeometry(0.2,2,0.8); rudder = new THREE.Mesh(rudderGeo, planeMat); rudder.position.y += 1.1; rudder.position.z += 4.5; elevatorGeo = new THREE.BoxGeometry(2.9,0.2,0.9); elevator = new THREE.Mesh(elevatorGeo, planeMat); elevator.position.y += 0.2; elevator.position.z += 4.5; powerplantGeo = new THREE.CylinderGeometry(0.72,1.7,2); powerplant = new THREE.Mesh(powerplantGeo, planeMat); powerplant.position.z -= 5.85; powerplant.rotation.x = Math.PI / -2; cockpitGeo = new THREE.CylinderGeometry(0.5,1.5,2); cockpitMat = new THREE.MeshPhongMaterial({color:"skyblue", shading:THREE.FlatShading}); cockpit = new THREE.Mesh(cockpitGeo, cockpitMat); cockpit.position.z -= 5.7; cockpit.position.y += 0.3; cockpit.rotation.x -= 0.05; cockpit.rotation.x = Math.PI / -2; propellerGeo = new THREE.BoxGeometry(5,0.5,0.2); propellerMat = new THREE.MeshPhongMaterial({color:"goldenrod", shading:THREE.FlatShading}); propeller = new THREE.Mesh(propellerGeo, propellerMat); propeller.rotation.z = 0.2; propeller.position.z -= 7.2; var spinPropeller = setInterval(()=>{ propeller.rotation.z += 0.01; renderer.render(scene,camera); }, 20); propellerNoseGeo = new THREE.ConeGeometry(0.5,1.2,8); propellerNoseMat = new THREE.MeshPhongMaterial({color:"black", shading:THREE.FlatShading}); propellerNose = new THREE.Mesh(propellerNoseGeo, propellerNoseMat); propellerNose.position.z -= 7.5; propellerNose.rotation.x = Math.PI / -2; airplane.add(fuselage, wings, rudder, elevator, cockpit, powerplant, propeller, propellerNose); airplane.position.y = 7; airplane.position.z = 30; scene.add(airplane); var airplaneGeo = new THREE.BoxGeometry(5,2,9.5); var airplaneMat = new THREE.MeshPhongMaterial({color:"yellow"}); airplaneMat.transparent = true; airplaneMat.opacity = 0; airplaneBox = new THREE.Mesh(airplaneGeo, airplaneMat); airplaneBox.position.y = 7; airplaneBox.position.z = 30; scene.add(airplaneBox); //airplaneBox = new THREE.BoundingBoxHelper(airplane); //make airplane move var fly = setInterval(()=>{ if(airplane.rotation.y >= 0.4 && airplane.rotation.y < 2){ airplane.position.x -= 0.1; airplaneBox.position.x -= 0.1; }else if(airplane.rotation.y <= -0.4 && airplane.rotation.y > -2){ airplane.position.x += 0.1; airplaneBox.position.x += 0.1; }else if(airplane.rotation.y <= -2 || airplane.rotation.y >= 2){ airplane.position.z += 0.1; airplaneBox.position.z += 0.1; }else if(airplane.rotation.y < 0.4 || airplane.rotation.y > -0.4){ airplane.position.z -= 0.1; airplaneBox.position.z -= 0.1; } //airplaneBox.update(airplaneBox); renderer.render(scene,camera); }, 100); //Controls turnL.onclick = () => { airplane.rotation.y >= 3 ? airplane.rotation.y += 0 : airplane.rotation.y += 0.05; airplaneBox.rotation.y >= 3 ? airplaneBox.rotation.y += 0 : airplaneBox.rotation.y += 0.05; renderer.render(scene,camera); } turnR.onclick = () => { airplane.rotation.y <= -3 ? airplane.rotation.y -= 0 : airplane.rotation.y -= 0.05; airplaneBox.rotation.y <= -3 ? airplaneBox.rotation.y -= 0 : airplaneBox.rotation.y -= 0.05; renderer.render(scene,camera); } document.onkeydown=function(key){ if(key.keyCode==37){ airplane.rotation.y >= 3 ? airplane.rotation.y += 0 : airplane.rotation.y += 0.05; airplaneBox.rotation.y >= 3 ? airplaneBox.rotation.y += 0 : airplaneBox.rotation.y += 0.05; renderer.render(scene,camera); }else if(key.keyCode==39){ airplane.rotation.y <= -3 ? airplane.rotation.y -= 0 : airplane.rotation.y -= 0.05; airplaneBox.rotation.y <= -3 ? airplaneBox.rotation.y -= 0 : airplaneBox.rotation.y -= 0.05; renderer.render(scene,camera); }; } //Hot air ballon var hotAirBallonColors = [ redBallon = { envelopeColor:"#d9372b", skirtColor:"#7d0f06", burnerColor:"#210000" }, blueBallon = { envelopeColor:"dodgerblue", skirtColor:"#013782", burnerColor:"#00081a" }, orangeBallon = { envelopeColor:"orange", skirtColor:"#ba4a04", burnerColor:"#1a0900" }, greenBallon = { envelopeColor:"#86ff0d", skirtColor:"#417a07", burnerColor:"#0a1a00" } ]; function HotAirBallon(envelopeColorPick, skirtColorPick, burnerColorPick){ hotAirBallon = new THREE.Object3D(); var envelope = new THREE.Object3D(), part1, part2; var skirt, rope1, rope2, burner, wickerBasket; var part1Geo = new THREE.SphereGeometry(3.4,10,10); var part2Geo = new THREE.CylinderGeometry(3.55,0.8,5,11); var envelopeMat = new THREE.MeshPhongMaterial({color:envelopeColorPick, shading:THREE.FlatShading}); part1 = new THREE.Mesh(part1Geo, envelopeMat); part1.position.y += 2.8; part2 = new THREE.Mesh(part2Geo, envelopeMat); envelope.add(part1, part2); var skirtGeo = new THREE.CylinderGeometry(1,1,1,10); var skirtMat = new THREE.MeshPhongMaterial({color:skirtColorPick, shading:THREE.FlatShading}); skirt = new THREE.Mesh(skirtGeo, skirtMat); skirt.position.y -= 2.3; ropeGeo = new THREE.CylinderGeometry(0.1,0.1,8,20); ropeMat = new THREE.MeshPhongMaterial({color:"#452800", shading:THREE.FlatShading}); rope1 = new THREE.Mesh(ropeGeo, ropeMat); rope1.position.x -= 0.7; rope1.position.y -= 1; rope2 = new THREE.Mesh(ropeGeo, ropeMat); rope2.position.x += 0.7; rope2.position.y -= 1; burnerGeo = new THREE.BoxGeometry(0.4,0.7,0.4); burnerMat = new THREE.MeshPhongMaterial({color:burnerColorPick, shading:THREE.FlatShading}); burner = new THREE.Mesh(burnerGeo, burnerMat); burner.position.y -= 3.2; wickerBasketGeo = new THREE.BoxGeometry(1.8,1.5,1.8); wickerBasketMat = new THREE.MeshPhongMaterial({color:"#824b00", shading:THREE.FlatShading}); wickerBasket = new THREE.Mesh(wickerBasketGeo, wickerBasketMat); wickerBasket.position.y -= 5; hotAirBallon.add(envelope, skirt, rope1, rope2, burner, wickerBasket); hotAirBallon.position.y = 10; hotAirBallon.position.z = 10; var cubeGeo = new THREE.BoxGeometry(3,3,3); var cubeMat = new THREE.MeshPhongMaterial({color:'red'}); cubeMat.transparent = true; cubeMat.opacity = 0; cube = new THREE.Mesh(cubeGeo, cubeMat); cube.position.y = hotAirBallon.position.y - 1; var xPositions = [], zPositions = [], xPos, zPos; for(var i=0; i<=hotAirBallonCount; i++){ xPos = Math.floor(Math.random()*(30 - -30) - 40) + 15; xPositions.push(xPos); zPos = Math.floor(Math.random()*(20 - -30) - 30); zPositions.push(zPos); } xPositions.forEach(xPos => { hotAirBallon.position.x = xPos; cube.position.x = xPos; }); zPositions.forEach(zPos => { hotAirBallon.position.z = zPos; cube.position.z = zPos; }); scene.add(hotAirBallon); scene.add(cube); objects.push(cube); ballons.push(hotAirBallon); } for(var i=0; i { for (var vertexIndex = 0; vertexIndex < airplaneBox.geometry.vertices.length; vertexIndex++) { var directionVector = (airplaneBox.geometry.vertices[vertexIndex].applyMatrix4(airplaneBox.matrix)).sub(airplaneBox.position); var ray = new THREE.Raycaster(airplaneBox.position, directionVector.clone().normalize()); var collisionResults = ray.intersectObjects(objects); if(collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) { collisionResults[0].object.position.y = -50; ballons.forEach(ballon => { if(collisionResults[0].object.position.x == ballon.position.x){ ballon.position.y = -50; ballons.splice(ballons.indexOf(ballon), 1); score++; scoreViewer.innerHTML= score; if(ballons.length == 0){ clearInterval(fly); clearInterval(gameLogic); } } }) } } }) camera.position.z = 47; camera.position.y += 25; camera.rotation.x -= 0.82; renderer.render(scene, camera); }

THREE.js Game (in progress)