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 vertex = `
	void main(){
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
	}
`

const fragment = `
	uniform vec3 uColor;

  out vec4 outColor;

  void main(){
    outColor = vec4(uColor, 1.0);
  }
`

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 geometry = new THREE.BoxGeometry(100, 100, 100)

const material = new THREE.ShaderMaterial({
	vertexShader: vertex,
  fragmentShader: fragment,
  transparent: true,
  uniforms: {
  	uColor: {value: new THREE.Color('red')}
  },
  glslVersion: THREE.GLSL3
})

const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

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

animate()