JSFiddle - React, Tailwind, and code Playground

by gree303

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>threejs webgl - materials - hdr environment mapping</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>



		
	</head>
	<body>

		<div id="slider" style="width:50%;margin:auto;left:0;right:0;">
			<input type="range" name="ex-range" class="ex-range"  id="range"  value="1" min="0" max="2" step="0.1"  onchange="this.setAttribute('value', this.value);" /> 
		
		</div>

		<div id="container"></div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - High dynamic range (RGBE) Image-based Lighting (IBL)<br />using run-time generated pre-filtered roughness mipmaps (PMREM)<br/>
			Created by Prashant Sharma and <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.
		</div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "https://threejs.org/build/three.module.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';

			import { GUI } from 'https://threejs.org/examples/jsm/libs/lil-gui.module.min.js';
			import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
			import { HDRCubeTextureLoader } from 'https://threejs.org/examples/jsm/loaders/HDRCubeTextureLoader.js';
			import { RGBMLoader } from 'https://threejs.org/examples/jsm/loaders/RGBMLoader.js';
			import { DebugEnvironment } from 'https://threejs.org/examples/jsm/environments/DebugEnvironment.js';

			const params = {
				envMap: 'Generated',
				roughness:...

CSS

<!-- The blue range-slider controls the exposure input field. But three.js does not update the canvas. -->

JavaScript

var $j = jQuery.noConflict();
		$j(document).ready(function(){
			$j('.ex-range').click(function(){
			var range = $j('.ex-range'),
				//range2 = $j( "input[aria-labelledby='lil-gui-name-4']" ).val(),
				sliderthreejs = $j( "input[aria-labelledby='lil-gui-name-4']" ),
				value = range.attr('value');
			sliderthreejs.html(range.attr('value'));
			$j( "#lil-gui-name-4 ~ .widget input" ).change().val( value );
			});
		});