JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

CSS

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js';

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;

const scene = new THREE.Scene();

const cubeGeometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const cubeMaterial = new THREE.MeshNormalMaterial();

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.02;
  cube.rotation.z += 0.02;

  renderer.render(scene, camera);
});