JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<base href="https://raw.githack.com/Mugen87/three.js/dev11/examples/">

	<script type="module">

			import * as THREE from '../build/three.module.js';

			import Stats from './jsm/libs/stats.module.js';
			import { GUI } from './jsm/libs/dat.gui.module.js';

			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
			import { BokehPass } from './jsm/postprocessing/BokehPass.js';
      import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
			import { LuminosityShader } from './jsm/shaders/LuminosityShader.js';
			import { SobelOperatorShader } from './jsm/shaders/SobelOperatorShader.js';
      
			var container, stats;
			var camera, scene, renderer,
				materials = [], objects = [],
				singleMaterial, zmaterial = [],
				parameters, i, j, k, h, x, y, z, nobjects, cubeMaterial;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var width = window.innerWidth;
			var height = window.innerHeight;

			var postprocessing = {};

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 3000 );
				camera.position.z = 200;

				scene = new THREE.Scene();

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( width, height );
				container.appendChild( renderer.domElement );

				var path = "https://threejs.org/examples/textures/cube/SwedishRoyalCastle/";
				var format = '.jpg';
				var urls = [
					path + 'px' + format, path + 'nx' + format,
					path + 'py' + format, path + 'ny' + format,
					path + 'pz' + format, path + 'nz' + format
				];

				var textureCube = new THREE.CubeTextureLoader().load( urls );

				parameters = { color: 0xff1100, envMap: textureCube };
				cubeMaterial =...

CSS

body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
user-select: none;
}