JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="https://fangzhangmnm.github.io/minigames/lib/three.min.js"></script>
flight test. found source code somewhere, editing it for learning purposes.
<div id="game_container"></div>

CSS

#game_container {
    width: 400px;
    height: 300px;
    border: 2px solid black;
    /*border-radius: 5px;*/
}

JavaScript

if(false){
    var THREE = require("three");
}
//==========basic setting==========
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();

let container = document.getElementById("game_container");
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 10000);
camera.position.set(2,1,3);
camera.lookAt(0,0,0);
const listener = new THREE.AudioListener();
camera.add(listener);
let renderFactor = 1;

function resize(){
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setDrawingBufferSize(container.clientWidth * renderFactor, container.clientHeight * renderFactor, window.devicePixelRatio);
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
}

resize();
window.addEventListener("resize",resize);

//==========input output==========
class Input {

    constructor(domElement,camera){
        this.mouseX = this.mouseY = 0;
        this.clicked = false;
        let mousemove = event => {
            let rect = domElement.getBoundingClientRect();
            this.mouseX = (event.clientX - rect.left) / rect.width * 2 - 1;
            this.mouseY =- (event.clientY - rect.top) / rect.height * 2 + 1;
        };
        let mousedown = event => {
            if(event.button == 0)
                this.clicked = true;
        }
        domElement.addEventListener("mousemove",mousemove);
        domElement.addEventListener("mousedown",mousedown);
    }
    
    update(dt){
        this.clicked = false;
    }
}

const input = new Input(renderer.domElement, camera);

//==========main loop==========
const clock = new THREE.Clock();
const updates = [];

function loop(){
    let dt = clock.getDelta();
    for(let handler of updates){
        handler(dt);
    }
  ...