JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

CSS

body {
        color: #ffffff;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;

        background-color: #000000;
        margin: 0px;
        overflow: hidden;
}
#three{
    position: absolute;
    top: 0px;
    left: 0px;
    width:  100%;
    height: 100%;
}

JavaScript

var renderer, scene, camera;

var goLeft = false
var goRight = false
var goUp = false
var goDown = false

//vars
var rotationx = rotationy = rotationz = 0
    
var _q1 = new THREE.Quaternion(); // CHANGED
var axisX = new THREE.Vector3( 1, 0, 0 ); // CHANGED
var axisZ = new THREE.Vector3( 0, 1, 0 ); // CHANGED

var pitchAcceleration = 0, rollAcceleration = 0;

function rotateOnAxis( object, axis, angle ) { // CHANGED
    
    _q1.setFromAxisAngle( axis, angle );
    object.quaternion.multiplySelf( _q1 );

}    

init();
animate();

function init() {
    airplane = new THREE.Object3D();
    
    airplane.useQuaternion = true; // CHANGED
    
    // dom
    var container = document.getElementById( 'container' );

    // renderer
    renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
    
    // scene
    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 400;


    var axes = new THREE.AxisHelper();
    
    //airplane.add( axes );  // CHANGED
    

    //using a cube to represent my airplane for jsfiddle purposes
    //in my code i'm loading in a collada model   
    var cubeMaterial = new THREE.MeshPhongMaterial( { ambient: 0xffabe4, color: 0xace3ff, specular: 0xffabe4, shininess: 0, perPixel: true, metal: true } );
    var cube = new THREE.Mesh( new THREE.CylinderGeometry( 0.1, 25, 40, 3 ), new THREE.MeshNormalMaterial() );
    airplane.add(cube) 
    
    airplane.scale.z = 0.5

    scene.add(airplane)

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {
    if(goLeft)
        rollAcceleration -= 0.001;
        
    if(goRight)
        rollAcceleration += 0.001;

    if(goUp)
        pitchAcceleration += 0.003;

    if(goDown)
        pitchAcceleration -= 0.003;
  ...