JSFiddle - React, Tailwind, and code Playground

by bemuse

HTML

<canvas id="canvas"></canvas>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>

CSS

body{
  background: black;
}
#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.setClearColor(0x000000, 0.0)

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

const src = `https://cdn.genshin.cc/media/characters/256/Raiden.png`
const loader = new THREE.TextureLoader()


loader.load(src, function(texture){

  
  console.log('loaded')
})

const geometry = new THREE.PlaneGeometry(9, 16)
const material = new THREE.MeshBasicMaterial({color: 'white'})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

console.log(renderer.info)

window.addEventListener('resize', () => {
	
})


// render
animate()
function animate(){
	camera.lookAt(scene.position)
	renderer.render(scene, camera)
	requestAnimationFrame(animate)
}