JSFiddle - React, Tailwind, and code Playground

by jmg157

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="http://wxalert.info/private/dv/OrbitControls.js"></script>

JavaScript

// DOM Element
container = document.createElement('div');
document.body.appendChild(container);

// Camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 200);

// Scene
scene = new THREE.Scene();
scene.add(camera);

// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

// Controls
controls = new THREE.OrbitControls(camera);
controls.noRotate = true;

// A grid
grid = new THREE.Object3D();
scene.add(grid);

var gridLines = new THREE.GridHelper(50, 5);
gridLines.position.set(0, 0, 0);
gridLines.rotation.x = Math.PI / 2;
grid.add(gridLines);

animate();

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