JSFiddle - React, Tailwind, and code Playground

by accima

HTML

<script type="importmap">
  {
		"imports": {
      "three": "https://cdn.skypack.dev/three@0.151.3/build/three.module",
      "three/": "https://cdn.skypack.dev/three@0.151.3/"
		}
	}
</script>

CSS

body {
  overflow: hidden;
  margin: 0px;
}

JavaScript

import * as THREE from 'three'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
let renderer, scene, camera, controls, loader;


window.addEventListener('load', init);

function init() {
    const width = window.innerWidth;
    const height = window.innerHeight;
   
  // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
 		scene.background = new THREE.Color( 0xcccccc );

    camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 10000);
    camera.position.set(0, 2, 3);

    controls = new OrbitControls( camera, renderer.domElement );
    controls.update();
    
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    const ambientLight = new THREE.AmbientLight(0x333333);
    scene.add(ambientLight);

    loader = new GLTFLoader();
    loader.setCrossOrigin('anonymous');

   ...