JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 5000);
camera.position.set(-5, 5, 5);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

let g = new THREE.PlaneBufferGeometry(1, 1, 3, 1);
let pts = [
	// top
  0, 1, 0,
  1, 1, 0,
  1, 1, 1,
  2, 1, 1,
  //bottom
  0, 0, 0,
  1, 0, 0,
  1, 0, 1,
  2, 0, 1
]
g.setAttribute("position", new THREE.Float32BufferAttribute(pts, 3));
g.computeVertexNormals();
g.rotateX(-Math.PI * 0.5);

let m = new THREE.MeshBasicMaterial({color: "aqua"});
let o = new THREE.Mesh(g, m);
scene.add(o);

renderer.setAnimationLoop(()=>{
	renderer.render(scene, camera);
});