jQuery addClass example

Change class name on click in jQuery

by Petter Wingren

HTML

<html> 
    <head> 
        <title>
            Plane environment
        </title> 
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head> 
    <body> 
        <p id="instructions">
            ↑ to move forward, ← to turn left, → to turn right and ← and → at the same time to move backwards. Blue makes you move slower, this is a simplified debug version.
        </p>
        <p id="scoreboard">
            Environment: <span id="camEnvironment">0</span>
            EnvIndex: <span id="envIndex">NaN</span>
            FPS: <span id="fps">-</span>
        </p>

        <canvas id="canvas" title="3d Canvas - invisible" alt="used for rendering should never be shown"> 
        </canvas>
        
        <img id="interim-img" title="placeholder till interimCanvas works" alt="placeholder till interimCanvas works">
        
        <canvas id="InterimCanvas" title="displays the image from canvas so it can be captured and displayed in AI_Img">
        </canvas>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
        <script src="main.js"></script> 

    </body> 
</html>

CSS

body { 
    margin: 0;
    background-color:grey;
} 
    
#scoreboard{
    width: 80%;
    height:15%
    text-align: center;
}

#instructions{
    width:80%;
    text-align:center;
}

#canvas{
    width:25%;
    height:42%;
    float:left;
    border:3px solid white;
    
}

#interim-img{
    width:25%;
    height:30%;
    float:left;
    border:3px solid yellow;
}

#InterimCanvas{
    width:25%;
    height:30%;
    border:3px solid red;
    float:right;
}

JavaScript

/* Need to revamp all scriptfiles so there is one mainfile that calls the others onload(tm), before further reorganization */
var playerIsHuman = true; //CHECK THIS! will be used in meta.js to determine which functions to use for handlers and feeback, and for using the correct input functions, maybe just make two separate programs for human and AI instead of using this?

//World creation UPDATE? getIndexAtCamera only works for square worlds (ie xSize=zSize), so probably no reason to keep two variables here..

var xSize = 2;
var zSize = 2;

var planeArray = [0,2,1,2];


// The Fundamentals
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 5 ); 
    //all below is new verion (as compared to old that is commented below)
    var drawingSurface = document.getElementById( 'canvas' );
    var interimCanvas = document.getElementById("InterimCanvas");
    var renderer = new THREE.WebGLRenderer( { antialias: true, canvas: drawingSurface } );
    // console.log(window.devicePixelRatio); //used to check pixelratio if relevant
    //width and height of the renderer has a big impact on performance, and for the AI same resolution as its input would be optimal.
    var renderedWidth = 300;
    var renderedHeight = 300;
    renderer.setSize(renderedWidth,renderedHeight);// CHECK THIS! should be automatically set to input resolution of the AI, if an AI is in control.
    //renderer.setPixelRatio( window.devicePixelRatio); //window.devicePixelRatio for my comp is 1.25, if it is lowered resolution will lower as well.
    
// just some canvas testing
var interimCanvas = document.getElementById("InterimCanvas");
var ctx = interimCanvas.getContext("2d");


// Lightsource UPDATE ? put in a lightsource that rotates around the plane to make a day/night-cycle
    const pointLight =
new THREE.PointLight(0xFFFFFF);
    pointLight.position.x = 50;
    pointLight.position.y = 5;
    pointLight.position.z = 5;
   ...