JSFiddle - React, Tailwind, and code Playground

by giperon

HTML

<script src="https://unpkg.com/[email protected]/examples/jsm/controls/FlyControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.min.js';

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspesctiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100);
  camera.position.set( 5, 5, 5 );
  camera.lookAt( 0, 0, 0 );

  scene = new THREE.Scene();
  
  clock = new THREE.Clock();

  const grid = new THREE.GridHelper( 20, 20 );
  scene.add( grid );
  
  scene.add( new THREE.AxesHelper( 3 ) );

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

  controls = new FlyControls(camera, renderer.domElement);
  controls.rollSpeed = Math.PI / 12;
  controls.dragToLook = false;

}

function animate() {

  requestAnimationFrame(animate);
  
  const delta = clock.getDelta();
  
  controls.update( delta );
  
  renderer.render(scene, camera);

}