JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>

CSS

body {
    margin: 0px;
    overflow: hidden;
    background-color: black;
}

JavaScript

/*
 * Scale = 1, no flickering.
 * Scale = 1000, flickering. 
 */
var scale = 1000;

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 100, 1000000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100 * scale;
var renderer = new THREE.WebGLRenderer({
    antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.AmbientLight(0xFFFFFF);
scene.add(light);

var material = new THREE.MeshBasicMaterial({
    transparent: false,
    side: THREE.DoubleSide,
    fog: false,
    color: 0xFFFF00,
    opacity: 1.0
});

var cubeGeometry = new THREE.PlaneGeometry(50 * scale, 50 * scale, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
cubeMesh.position.set(0, 0, 1 * scale);
scene.add(cubeMesh);

var material = new THREE.MeshBasicMaterial({
    transparent: false,
    side: THREE.DoubleSide,
    fog: false,
    color: 0xFF0000,
    opacity: 1.0
});

var cubeGeometry = new THREE.PlaneGeometry(100 * scale, 100 * scale, 1, 1);
var cubeMesh = new THREE.Mesh(cubeGeometry, material);
scene.add(cubeMesh);

function render() {
    var time = Date.now() * 0.5;
    camera.position.x = Math.sin(time / 1000) * 150 * scale;
    camera.position.y = 0;
    camera.position.z = Math.cos(time / 1000) * 150 * scale;
    camera.lookAt(scene.position);
    renderer.render(scene, camera);  
    requestAnimationFrame(render);
}
render();