JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

CSS

body, html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';

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

const relative = new THREE.Vector3();

init();
animate();

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

	camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 1000);
	camera.position.z = 1;

	controls = new OrbitControls(camera, renderer.domElement);
  controls.enablePan = false;
  controls.enableZoom = false;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
	material = new THREE.MeshNormalMaterial();
	mesh = new THREE.Mesh(geometry, material);
  mesh.position.y = -0.5;
  
  scene.add(mesh);
  
  controls.target = mesh.position;
}

function animate() {
	requestAnimationFrame(animate);

  relative.subVectors(camera.position, mesh.position);

  mesh.translateZ(-0.01);
  camera.position.copy(mesh.position).add(relative);

	controls.update();

	renderer.render(scene, camera);
}