JSFiddle - React, Tailwind, and code Playground

by Matt

HTML

<base href="https://rawcdn.githack.com/mrdoob/three.js/r152/examples/" />
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
			"lil-gui": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.esm.min.js"
		}
	}
</script>

CSS

canvas {
	position: fixed;
	inset: 0;
}

JavaScript

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GUI } from 'lil-gui'

let scene, camera, renderer
let orbitControls, clock
let params
let pointR, pointL
let axes

const matrix = new THREE.Matrix4()
const vector3 = new THREE.Vector3()

// +Y axis
const up = new THREE.Vector3(0, 1, 0)

// Rotates 90 degrees to the right
const matrixRight = new THREE.Matrix4()
	.makeRotationFromEuler(new THREE.Euler(0, -Math.PI/2 * 1, 0))

init().then(animate)

async function init() {

	params = {
		speed: 1
	}
  
  // scene
  
	scene = new THREE.Scene()
	scene.background = new THREE.Color('black')

	// camera
  
	camera = new THREE.PerspectiveCamera(75, undefined, 0.1, 1000)
	camera.position.set(1, 2, 3)
	
  // clock
  
	clock = new THREE.Clock()

	// lights
  
	const directionalLight = new THREE.DirectionalLight('white')
	directionalLight.position.set(2, 3, 4)
	scene.add(directionalLight)

	const ambientLight = new THREE.AmbientLight('white', 0.3)
	scene.add(ambientLight)

	// renderer
  
	renderer = new THREE.WebGLRenderer({ antialias: true })
	document.body.appendChild(renderer.domElement)

	// orbit controls
  
	orbitControls = new OrbitControls(camera, renderer.domElement)

	// grid
  
	const grid = new THREE.GridHelper()
	grid.position.y = -1
	scene.add(grid)

	// point meshes
  
  const geometry = new THREE.SphereGeometry(0.1)
  
  pointR = new THREE.Mesh(
  	geometry,
	  new THREE.MeshStandardMaterial({ color: "red" })
  )
  
  pointL = new THREE.Mesh(
  	geometry,
	  new THREE.MeshStandardMaterial({ color: "blue" })
  )
  
  scene.add(pointR)
  scene.add(pointL)
  
  // axes
  
  axes = new THREE.AxesHelper(0.5)
  scene.add(axes)
  
	const gui = new GUI()
	gui.add(params, 'speed').step(0.1).min(0).max(2)
	
	onWindowResize()
	
	window.addEventListener('resize', onWindowResize, false)
	
}

function animate() {

	const time = performance.now() / 1000

	orbitControls.update()
  
  // animate points to new...