JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<html>

	<head>

		<title>My first Three.js app</title>

		<style>
		canvas { width: 75%; height: 75%; }
		body { background-color: #000; overflow:hidden;}
		</style>

	</head>

	<body>

		<script src="three.min.js"></script>

		<script>

			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			var geometry = new THREE.CubeGeometry(1,1,1);
			var material = new THREE.MeshLambertMaterial({color: 0xffaabb});
			var cube = new THREE.Mesh(geometry, material);
			scene.add( cube );

			var pointLight = new THREE.PointLight(0xFFFFFF);

			pointLight.position.x = 10;
			pointLight.position.y = 50;
			pointLight.position.z = 130;

			scene.add(pointLight);

			camera.position.z = 5;

			var render = function render() {
				requestAnimationFrame(render);
				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render(scene, camera);
			};
			render();
		</script>

	</body>

</html>