JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.159.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
    }
  }
</script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "three";
import {
  OrbitControls
} from "three/addons/controls/OrbitControls.js";

let scene = new THREE.Scene();
scene.background = new THREE.Color("#102");
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 10, 10).setLength(10);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

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

// ************************************************
let box = new THREE.Box3().setFromCenterAndSize ( 
	new THREE.Vector3(1, 0.5, 1), 
  new THREE.Vector3(3, 1, 5) 
);

let box3helper = new THREE.Box3Helper(box);
scene.add(box3helper);

let mat4 = new THREE.Matrix4().makeRotationY(Math.PI * 0.25);
box3helper.applyMatrix4(mat4);
// ************************************************

let clock = new THREE.Clock();
let t = 0;

renderer.setAnimationLoop(() => {
	let dt = clock.getDelta();
  t += dt;

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