JSFiddle - React, Tailwind, and code Playground

by hirako2000

HTML

<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<style>
		body {
			margin: 0;
		}
	
		canvas {
			width: 100% !important;
			height: 400px !important;
		}
		#app {
			overflow: hidden;
			<!-- position: fixed; -->
		}
	</style>
</head>

<body>
	<div id="app"></div>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
 <script src="src/app.js"></script>

</body>

</html>

JavaScript

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

var controls = new THREE.OrbitControls(camera, container);

camera.position.set(10, 0, 0);
controls.enablePan = false;
controls.enableRotate = false;
controls.update();

var geometry = new THREE.SphereGeometry(5, 32, 32);
var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();