Skip to content

Commit

Permalink
[INDEX] - Minor changes on design. Added styles on the css.
Browse files Browse the repository at this point in the history
  • Loading branch information
Duxy1996 committed May 4, 2024
1 parent 0fa0984 commit 4409f1d
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 73 deletions.
Binary file added favicon.ico
Binary file not shown.
2 changes: 2 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@
</div>

<div class="float-button roll-left" onclick="rollLeft()"><img class="roll-right-img" src="assets/noun_Plane_2259237.svg" alt="plane rotating"></div>
<div class="float-button roll-number center-text" id="rollRateNumber">0</div>
<div class="float-button roll-right" onclick="rollRight()"><img class="roll-left-img" src="assets/noun_Plane_2259237.svg" alt="plane rotating"></div>
<div class="float-button pitch-up" onclick="pitchUp()"><img class="roll-right-img" src="assets/noun_Plane_2259236.svg" alt="plane rotating"></div>
<div class="float-button pitch-number center-text" id="pitchRateNumber">0</div>
<div class="float-button pitch-down" onclick="pitchDown()"><img class="roll-left-img" src="assets/noun_Plane_2259236.svg" alt="plane rotating"></div>

<input id="throttle" class="throttle-slider thrust slider" type="range"/>
Expand Down
65 changes: 61 additions & 4 deletions js/index.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
let scene = new THREE.Scene();
let ambientLight = new THREE.AmbientLight( 0xffffff, 1 );

let planeTerrain = initTerrain()
heighValue = Math.random() * (30 - 2) + 2;

terrainLoader = new Terrain(220.0, heighValue, 300.0, 300.0, 1000.0, 1000.0);

let planeTerrain = terrainLoader.initTerrain()

let releasedGBULCheck = false;
let releasedGBURCheck = false;
let releasedGBUL;
let releasedGBUR;

let camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
let cameraDrone = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );

cameraDrone.position.z = -1;
camera.position.z = 4;

var direction;

camera.add( listener );
scene.add( planeTerrain );
Expand All @@ -25,6 +32,9 @@ var currentThrust = 50;
var renderer = new THREE.WebGLRenderer({antialias:true});
var controls = new THREE.OrbitControls( camera, renderer.domElement );

/// limit the user interaction to 20m. Enough to avoid to see the horizont.
controls.maxDistance = 30;

let pauseSimulation = true;
let droneCrashed = false;

Expand Down Expand Up @@ -121,17 +131,52 @@ function launchGBU() {
if (!releasedGBUL) {
releasedGBULCheck = true;
releasedGBUL = helperPivoteGBULRef[0].children[0];

let position = new THREE.Vector3();
releasedGBUL.getWorldPosition(position);

helperPivoteGBULRef[0].remove(releasedGBUL);

releasedGBUL.position.x = position.x;
releasedGBUL.position.y = position.y;
releasedGBUL.position.z = position.z;

releasedGBUL.rotation.x = body.rotation.x;
releasedGBUL.rotation.y = body.rotation.y;
releasedGBUL.rotation.z = body.rotation.z;

releasedGBUL.scale.x = 10;
releasedGBUL.scale.y = 10;
releasedGBUL.scale.z = 10;

scene.add(releasedGBUL);
return;
}
if(!releasedGBUR)
{
releasedGBURCheck = true;
releasedGBUR = helperPivoteGBURRef[0].children[0];

let position = new THREE.Vector3();
releasedGBUR.getWorldPosition(position);

helperPivoteGBURRef[0].remove(releasedGBUR);

releasedGBUR.position.x = position.x;
releasedGBUR.position.y = position.y;
releasedGBUR.position.z = position.z;

releasedGBUR.rotation.x = body.rotation.x;
releasedGBUR.rotation.y = body.rotation.y;
releasedGBUR.rotation.z = body.rotation.z;

releasedGBUR.scale.x = 10;
releasedGBUR.scale.y = 10;
releasedGBUR.scale.z = 10;

scene.add(releasedGBUR);
return;
}
}

function onLoad()
Expand Down Expand Up @@ -256,13 +301,15 @@ function updateBody() {

if (body.position != undefined)
{
let direction = new THREE.Vector3( 0, 0, -1 ).applyQuaternion( body.quaternion );
direction = new THREE.Vector3( 0, 0, -1 ).applyQuaternion( body.quaternion );

let generalThrust = updateThrust();

currentSpeed = Math.round(generalThrust * 43400) / 10;

document.getElementById("speedMeter").innerHTML = currentSpeed + "\n Km/h";
document.getElementById("rollRateNumber").innerHTML = Math.round(realRoll / 0.0005 * 10) / 10;
document.getElementById("pitchRateNumber").innerHTML = Math.round(realPitch / 0.0005 * 10) / 10;

let stallState = stallValue(currentSpeed, direction.y);

Expand All @@ -286,7 +333,7 @@ function updateBody() {

if (bodyAircraft.length > 0)
{
if (getTerrainElevation(bodyAircraft[0].position)) {
if (terrainLoader.getTerrainElevation(bodyAircraft[0].position)) {
parts.push(new ExplodeAnimation(bodyAircraft[0].position.x, bodyAircraft[0].position.y, bodyAircraft[0].position.z));
droneCrashed = true;
sound.stop();
Expand Down Expand Up @@ -316,7 +363,17 @@ var render = function () {

if (releasedGBULCheck) {
if (releasedGBUL != undefined) {
releasedGBUL.position.z -= 0.07;
releasedGBUL.position.z += 0.07 * direction.z;
releasedGBUL.position.y += 0.07 * direction.y;
releasedGBUL.position.x += 0.07 * direction.x;
}
}

if (releasedGBURCheck) {
if (releasedGBUR != undefined) {
releasedGBUR.position.z += 0.07 * direction.z;
releasedGBUR.position.y += 0.07 * direction.y;
releasedGBUR.position.x += 0.07 * direction.x;
}
}

Expand Down
140 changes: 81 additions & 59 deletions js/terrain.js
Original file line number Diff line number Diff line change
@@ -1,74 +1,96 @@

noise.seed(Math.random());

function getTerrainElevation(positionDrone) {
let resolution = 120;
let muntains = 22;

let posX = 251 + positionDrone.x;
let posZ = 251 + positionDrone.z;
let perlingVal = Math.abs(noise.simplex2(posZ/ resolution, posX/ resolution)) * muntains;

if (Math.random() > 0.95) {
return ((perlingVal-20) > positionDrone.y);
class Terrain {
// Constructor function to initialize properties
// Adjust the perling value scale. When gigher the perling values change less.
// Altitude of the terrain. When the value is higher the terrain is high.
constructor(resolution, maxHeight, columns, rows, sizeX, sizeY) {
this.resolution = resolution;
this.maxHeight = maxHeight;
this.columns = columns;
this.rows = rows;
this.sizeX = sizeX;
this.sizeY = sizeY;
}
return false;
}

function initTerrain() {

let resolution = 120;
let muntains = 22;

let columns = 500;
let rows = 500;

let sizeX = 500;
let sizeY = 500;

var geometry = new THREE.PlaneGeometry( sizeX, sizeY, rows, columns );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, flatShading : THREE.FlatShading, side: THREE.DoubleSide, vertexColors: THREE.FaceColors} );
var plane = new THREE.Mesh( geometry, material );

plane.rotateX(-Math.PI / 2);
plane.position.y = -20;

columns = columns + 1;
rows = rows + 1;
getTerrainElevation(positionDrone) {

for (let i = 0; i < columns; i=i+1) {
for (let j = 0; j < rows; j=j+1) {
let offset = j + i * rows;
let perlingVal = Math.abs(noise.simplex2(i/ resolution, j/ resolution)) * muntains;
let posX = this.columns / 2.0 + positionDrone.x * this.columns / this.sizeX;
let posZ = this.rows / 2.0 + positionDrone.z * this.rows / this.sizeY;

geometry.vertices[offset].z = perlingVal;
let perlingVal = Math.abs(noise.simplex2(posZ / this.resolution, posX / this.resolution)) * this.maxHeight;

let r_v = 0;
let g_v = perlingVal / muntains;
let b_v = 0;
if (Math.random() > 0.95) {
return ((perlingVal-20) > positionDrone.y);
}
return false;
}

if (perlingVal < 1.5) {
geometry.vertices[offset].z = 1 ;
b_v = 1;
g_v = 0;
initTerrain() {

var geometry = new THREE.PlaneGeometry(this.sizeX, this.sizeY, this.rows, this.columns );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, flatShading : THREE.FlatShading, side: THREE.DoubleSide, vertexColors: THREE.FaceColors} );
var plane = new THREE.Mesh( geometry, material );

plane.rotateX(-Math.PI / 2);
plane.position.y = -20;

this.columns = this.columns + 1;
this.rows = this.rows + 1;

for (let i = 0; i < this.columns; i=i+1) {
for (let j = 0; j < this.rows; j=j+1) {
let offset = j + i * this.rows;
let perlingVal = Math.abs(noise.simplex2(i/ this.resolution, j/ this.resolution)) * this.maxHeight;

let perlingValColor = Math.abs(noise.simplex2(i/ 160, j/ 160));
let perlingValGroundColor = Math.abs(noise.simplex2(i/ 160, j/ 160));
let perlingValSnowColor = Math.abs(noise.simplex2(i/ 160 + 1000, j/ 160 + 1000));

geometry.vertices[offset].z = perlingVal;

let r_v = 0;
let g_v = (perlingVal / this.maxHeight) * 0.8 + 0.2;
let b_v = 0;

if (perlingVal < 1.5) {
r_v = 0;
geometry.vertices[offset].z = 1 ;
b_v = perlingValColor * 0.8 + 0.2;
g_v = 0;
}

if ((perlingVal > 8) && (perlingVal < 12)) {
if (perlingValGroundColor < (0.3 + 0.1 * Math.random())) {
r_v = 0.3 + perlingValGroundColor * 0.2;
g_v = 0.2 + perlingValGroundColor * 0.2 + perlingVal /this. maxHeight * 0.4;
b_v = 0;
}
}

if (perlingVal > (16 + Math.random() * 2)) {
if (perlingValSnowColor < (0.3 + 0.1 * Math.random()))
{
r_v = perlingValSnowColor * 0.29 + Math.random() * 0.01 + 0.7;
g_v = perlingValSnowColor * 0.29 + Math.random() * 0.01 + 0.7;
b_v = perlingValSnowColor * 0.29 + Math.random() * 0.01 + 0.7;
}
}

if (offset < plane.geometry.faces.length / 2 + this.columns - 2) {
plane.geometry.faces[offset * 2 + 1 - i * 2].color.setRGB(r_v, g_v, b_v);
plane.geometry.faces[offset * 2 + 0 - i * 2].color.setRGB(r_v, g_v, b_v);
}
}
}

if (perlingVal > 16) {
r_v = 1;
g_v = 1;
b_v = 1;
}
geometry.dynamic = true;
geometry.__dirtyVertices = true;
geometry.__dirtyNormals = true;

if (offset < plane.geometry.faces.length / 2 + columns - 2) {
plane.geometry.faces[offset * 2 + 1 - i * 2].color.setRGB(r_v, g_v, b_v);
plane.geometry.faces[offset * 2 + 0 - i * 2].color.setRGB(r_v, g_v, b_v);
}
}
return plane;
}

geometry.dynamic = true;
geometry.__dirtyVertices = true;
geometry.__dirtyNormals = true;

return plane;
}
}
36 changes: 26 additions & 10 deletions style/mystyle.css
Original file line number Diff line number Diff line change
Expand Up @@ -110,22 +110,38 @@ input[type='range']::-moz-range-thumb {
}

.pitch-up {
left: 40%;
left: 20%;
bottom: 32;
}

.pitch-number {
left: 25%;
bottom: 32;
display: flex;
justify-content: center;
align-items: center;
}

.pitch-down {
left: 45%;
left: 30%;
bottom: 32;
}

.roll-left {
left: 50%;
left: 70%;
bottom: 32;
}

.roll-number {
left: 75%;
bottom: 32;
display: flex;
justify-content: center;
align-items: center;
}

.roll-right {
left: 55%;
left: 80%;
bottom: 32;
}

Expand Down Expand Up @@ -153,19 +169,19 @@ input[type='range']::-moz-range-thumb {
transform: rotate(+20deg);
}

.heading-position {
.altitude-position {
left: 5;
bottom: 50%;
bottom: 70%;
}

.altitude-position {
.heading-position {
left: 5;
bottom: 60%;
bottom: 50%;
}

.hold-speed {
left: 5;
bottom: 40%;
bottom: 30%;
}

.showSpeed {
Expand All @@ -178,7 +194,7 @@ input[type='range']::-moz-range-thumb {
opacity: 1;
}

@media (max-aspect-ratio: 12/8) {
@media (max-aspect-ratio: 9/16) {
.float-button {
height: 60px;
width: 60px;
Expand Down

0 comments on commit 4409f1d

Please sign in to comment.