JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis debitis totam neque beatae quas amet, eaque optio accusantium odit corrupti placeat, est molestias magni quos fuga quia! Eaque, dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit....

CSS

canvas {
	position: absolute;
	top: 0;
}

JavaScript

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
);
const renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.SphereGeometry( 1, 64, 32 );
const material = new THREE.MeshPhysicalMaterial({
    roughness: 0,
    transmission: 1,
    thickness: 2
});
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

camera.position.z = 5;

function animate() {
	requestAnimationFrame( animate );
	sphere.rotation.x += 0.01;
	sphere.rotation.y += 0.01;
	renderer.render( scene, camera );
}

animate();