JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/vr/WebVR.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer, mesh;

init();
animate();

function init() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );

	var geometry = new THREE.BoxBufferGeometry();
	var material = new THREE.MeshBasicMaterial( {
		color: 0xff0000,
		transparent: true,
		blending: THREE.CustomBlending,
		blendEquation: THREE.MaxEquation
	} );

	mesh = new THREE.Mesh(geometry, material);
	mesh.position.set( 0, 2, - 5 );
	scene.add(mesh);

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0x00ff00 );
	renderer.vr.enabled = true;
	document.body.appendChild(renderer.domElement);

	window.addEventListener( 'resize', onWindowResize, false );

	document.body.appendChild( WEBVR.createButton( renderer ) );

}

function animate() {

	renderer.setAnimationLoop( render );

}

function render() {

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}