JSFiddle - React, Tailwind, and code Playground

by Alexandra Clarke

HTML

<script src="https://threejs.org/build/three.module.js"></script>
<script src="https://threejs.org/examples/jsm/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/jsm/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/jsm/loaders/DRACOLoader.js"></script>
<script src="https://threejs.org/examples/jsm/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/jsm/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/jsm/postprocessing/OutlinePass.js"></script>
<script src="https://github.com/BeardyScientist/g3o/blob/0269b24e9dd766f4f823f8637255a95f8fb6b1b7/Stair_hole.glb"></script>
<script src="https://github.com/BeardyScientist/g3o/blob/main/Stair_hole.glb?raw=true"></script>
<script src="https://github.com/BeardyScientist/g3o/raw/main/Stair_hole.glb"></script>
<!DOCTYPE html>

<html>

<head>

    <link rel="shortcut icon" href="#">

</head>

<body>

    <script src="js/main.js"></script>

</body>

</html>

JavaScript

/* IMPORTS
--------------------------------------------------------------------------------------------------- */

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://threejs.org/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from 'https://threejs.org/examples/jsm/loaders/DRACOLoader.js';
import { EffectComposer } from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'https://threejs.org/examples/jsm/postprocessing/OutlinePass.js';

/* GLOBALS
--------------------------------------------------------------------------------------------------- */

var canvas, scene, camera, renderer, controls,


/* SCENE
--------------------------------------------------------------------------------------------------- */

scene = new THREE.Scene();

scene = new THREE.Scene();

/* CAMERA
--------------------------------------------------------------------------------------------------- */

var cameraPosition = [0,40,40];

var roll = THREE.MathUtils.degToRad(0);
var pitch = THREE.MathUtils.degToRad(-45);
var yaw = THREE.MathUtils.degToRad(0);

var cameraRotation = [pitch, yaw, roll];

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = cameraPosition[0];
camera.position.y = cameraPosition[1];
camera.position.z = cameraPosition[2];
camera.rotation.x = cameraRotation[0];
camera.rotation.y = cameraRotation[1];
camera.rotation.z = cameraRotation[2];


/* RENDERER & COMPOSER
--------------------------------------------------------------------------------------------------- */

/* Renderer
------------ */

renderer = new THREE.WebGLRenderer(  { antialias: true } );
renderer.setSize( window.innerWidth,...