JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script>
	var jslinks = [
  	"https://threejs.org/build/three.min.js",
    "https://threejs.org/examples/js/controls/OrbitControls.js"
  ]
  jslinks.forEach( jsl => {
  	let imported = document.createElement('script');
    imported.src = jsl;
    document.head.appendChild(imported); 
  });
  console.log(document);
</script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set( 0, 0, 2 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var box = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
scene.add(box);

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