JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<canvas id="main_canvas" style="border: solid 1px red;" width=300 height=300></canvas>

CSS

body {
  background: #000;
}

JavaScript

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

// renderer
const renderer = new THREE.WebGLRenderer({
  antialias: false,
  alpha: true,
  canvas: document.querySelector('#main_canvas'),
});
renderer.setPixelRatio(window.devicePixelRatio);

const [cw, ch] = [400, 400];
const camera = new THREE.OrthographicCamera(-cw / 2, cw / 2, ch / 2, -ch / 2, 0, 100);

const mesh = new THREE.InstancedMesh(
	new THREE.BoxBufferGeometry(10, 10, 10, 1, 1, 1), 
  new THREE.MeshPhongMaterial({ color: 0xffaa00 }), 
  10);
mesh.position.set(0, 0, -50);

const scene = new THREE.Scene().add(mesh);

const lightD = new THREE.DirectionalLight(0xffffff, 1);
lightD.position.set(20, 30, 100);
scene.add(lightD);

renderer.render(scene, camera);