JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

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

JavaScript

console.clear();

let camera, scene, renderer, mesh;

function init() {
	camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 100);
	camera.position.z = 15;
	//camera.position.x = 9;
	//camera.rotation.y = 0.5;
	
	scene = new THREE.Scene();
	
	mesh = new THREE.Mesh(
		new THREE.BoxBufferGeometry(1, 1, 1),
		new THREE.MeshLambertMaterial({
			color: 0xeeeeee,
			emissive: 0x111111,
			side: THREE.DoubleSide,
			flatShading: true
		})
	);
	
	mesh.receiveShadow = true;
	mesh.castShadow = true;
	scene.add(mesh);
	
	let light = new THREE.SpotLight(0xffffff, 1, 50);
	light.position.set(0, 0, 20);
	light.castShadow = true;
	light.shadow.mapSize.x = 1 << 12;
	light.shadow.mapSize.y = 1 << 12;
	console.log(light);
	scene.add(light);
	
	let plane = new THREE.Mesh(
		new THREE.PlaneGeometry(6, 6),
		new THREE.MeshStandardMaterial({ color: 0xffffff })
	);
	
	plane.receiveShadow = true;
	scene.add(plane);
	
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMap.enabled = true;
	console.log(renderer.shadowMap);
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	document.body.appendChild(renderer.domElement);
}

function animate() {
	mesh.rotation.x += 0.005;
	
	renderer.render(scene, camera);

	requestAnimationFrame(animate);
}

init();
animate();