JSFiddle - React, Tailwind, and code Playground

by meetamit

HTML

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

CSS

body { margin: 0; }

JavaScript

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 1, 10000
);
camera.position.z = 35;

var light = new THREE.DirectionalLight( 0xffffff, 1, 1000 );
light.position.set( 100, 100, 150 );
scene.add( light );

var material = new THREE.MeshStandardMaterial({ color: 0xffffff });

var geometry = new THREE.BoxGeometry(10, 10, 10)

var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh)

var renderer = new THREE.WebGLRenderer({alpha: false, antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

render()

window.onresize = function() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
  render();
}

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


window.camera = camera; // TEMP DEBUG