JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<div id='container'>
</div>

CSS

#container{
    background: black;
}

JavaScript

//THREE.js Experiements

//setting up the scene
var scene = new THREE.Scene();
//setting up the camera
var width = window.innerWidth, height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.01, 1000);
camera.position.z = 5;

//setting up the geometry
var geometry = new THREE.CubeGeometry(1,4,1);
var material = new THREE.MeshPhongMaterial();
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

//setting up the lighting
var light = new THREE.AmbientLight(0x002200);
scene.add(light);

var directionalLight = new THREE.DirectionalLight( 0x00ff00, 0.5);
directionalLight.position.set(10,20,20);
scene.add(directionalLight);

scene.fog = new THREE.Fog(0x000000, 1, 10);

//setting up the renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.getElementById('container').appendChild(renderer.domElement);

//render function
function render(){
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    //cube.rotation.y += 0.01;
    //cube.rotation.z += 0.005;
    cube.position.z -= .01;
    renderer.render(scene, camera);
}
render();