JSFiddle - React, Tailwind, and code Playground

by bemuse

HTML

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

CSS

body{
  background: black;
  overflow: hidden;
}
canvas{
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

const width = window.innerWidth, height = window.innerHeight
const canvas = document.querySelector('#canvas')

const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true, canvas: canvas})
renderer.setSize(width, height)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0x000000, 0.0)
renderer.setClearAlpha(0.0)

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 10000)
camera.position.z = 1000

const loader = new THREE.FontLoader()
let mesh

loader.load('https://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.json', font => {
	const text = new THREE.TextGeometry('ABC', {
    font: font,
    size: 150,
    height: 10,
    curveSegments: 1
	})

  const geometry = new THREE.EdgesGeometry(text)
  const material = new THREE.LineBasicMaterial({color: 'white'})
  mesh = new THREE.LineSegments(geometry, material)
  
  scene.add(mesh)
})

const render = () => {
	if(!mesh) return
  
  mesh.rotation.y += 0.01

}

const animate = () => {
	render()
  
  camera.lookAt(scene.position)
	renderer.render(scene, camera)

	requestAnimationFrame(animate)
}

animate()