JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="https://fangzhangmnm.github.io/minigames/lib/three.min.js"></script>

JavaScript

//@ts-check
if(false){/* just to enable the code snippers*/
    var THREE=require("three");
}
//==========基本设定==========
const scene=new THREE.Scene();
const renderer=new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.gammaFactor=2.2;
renderer.gammaOutput=true;
const camera=new THREE.PerspectiveCamera(45,1,.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(window.innerWidth, window.innerHeight);
    renderer.setDrawingBufferSize(window.innerWidth*renderFactor, window.innerHeight*renderFactor,window.devicePixelRatio);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}
resize();
window.addEventListener("resize",resize);
/*
renderer.vr.enabled = true;
document.body.appendChild( WEBVR.createButton( renderer ) );*/
//==========输入输出==========
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);
//==========主循环==========
const clock=new THREE.Clock();
const updates=[];
function loop(){
    let dt=clock.getDelta();
    for(let handler of updates)handler(dt);
    input.update(dt);
   ...