JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="angle" style="position: absolute; color: white;">

</div>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 1, 2);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var geom = new THREE.BoxGeometry(0.1, 0.1, 1);
geom.translate(0, 0, 0.5);
var mesh = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({color: "aqua", wireframe: true}));
scene.add(mesh);

render();

function render() {
  requestAnimationFrame(render);
  mesh.rotation.y += 0.01;
  angle.innerHTML = THREE.Math.radToDeg(mesh.rotation.y) % 360;
  renderer.render(scene, camera);
}