JSFiddle - React, Tailwind, and code Playground

by marquizzo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>

CSS

html, body, canvas {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

var loader = new THREE.TextureLoader();
var uvMapURL = `//threejs.org/examples/textures/UV_Grid_Sm.jpg`;

var renderer = new THREE.WebGLRenderer();
var vp = new THREE.Vector3(
    window.innerWidth,
    window.innerHeight,
    window.innerWidth / window.innerHeight
);
renderer.autoClear = false;
document.body.append(renderer.domElement);
renderer.setSize(vp.x, vp.y);

// Background scene
var bgScene = new THREE.Scene();
var bgCam = new THREE.Camera();
var bgGeom = new THREE.PlaneBufferGeometry(2, 2);
var bgMat = new THREE.MeshBasicMaterial({
    map: loader.load(uvMapURL),
    depthTest: false,
    depthWrite: false
});
var bgMesh = new THREE.Mesh(bgGeom, bgMat);
bgScene.add(bgMesh);

// Foreground scene
var fgScene = new THREE.Scene();
var fgCam = new THREE.PerspectiveCamera(60, vp.z, 1, 100);
fgCam.position.z = 5;

var geom = new THREE.BoxBufferGeometry(1, 1, 1);
var mat = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geom, mat);
fgScene.add(cube);

function update(t) {
    cube.rotation.x = Math.sin(t / 1000) * Math.PI;
    cube.rotation.y = Math.cos(t / 1000) * Math.PI;
    
    // Clear previous frame
    renderer.clear();
    renderer.render(bgScene, bgCam);
    renderer.render(fgScene, fgCam);
    
    requestAnimationFrame(update);
}

update();