JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
 <script type="importmap">
   {
      "imports": {
        "three": "https://unpkg.com/[email protected]/build/three.module.js",
        "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
      }
    }
  </script>

JavaScript

import * as THREE from 'three';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader';
// import { OrbitControls } from "./examples/jsm/controls/OrbitControls";

let container, renderer, scene, camera;

init();
animate();

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);
  
	camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(50,50,300);
  
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x999999);
  loadmodel("https://raw.githubusercontent.com/alikim-com/jsfiddle/main/", "monkey", {
    x: 0,
    y: 0,
    z: 0
  });
  render();
  envLight();
  
  scene.add(new THREE.AxesHelper(100));
}

function loadmodel(folder, name, position) {
  const loader = new GLTFLoader();
  loader.setPath(folder);
  loader.load(name + ".glb", function(object) {
  	const mesh = object.scene.children[0]; 
    mesh.position.set(position.x, position.y, position.z);
    mesh.scale.set(50, 50, 50);
    mesh.rotation.set(-0.4, 0.5, 0.3);
    scene.add(mesh); 
    rend();
  });
}

function envLight() {
  const light = new THREE.AmbientLight(0x0000ff, 1);
  scene.add(light);
  
  const dir = new THREE.DirectionalLight(0xff00ff, 1);
  scene.add(dir);
}

function render() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;

  container.appendChild(renderer.domElement);
}

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

function animate() {

  //requestAnimationFrame(animate);

  rend();
}

rend();