JSFiddle - React, Tailwind, and code Playground

by hirako2000

HTML

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

CSS

body {
  margin: 0;
}

JavaScript 1.7

let renderer, scene, camera, mesh, geometry, material;

init();

// initializing stuff
function init() {

	setupRenderer();
  
  scene = new THREE.Scene();
 	setupCamera();
  addMesh();
  animate();
}

function animate() {
	requestAnimationFrame(animate);
	render();
}

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

function addMesh() {
	geometry = new THREE.BoxGeometry(3, 3, 3);
  
  material = new THREE.MeshBasicMaterial({
  	color: 0x00FF00,
    wireframe: true
  })

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

function setupCamera() {
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 15000);
  camera.position.z = 10;
}

function setupRenderer() {
	renderer = new THREE.WebGLRenderer({
  	antalias: true
  });
  
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}