JSFiddle - React, Tailwind, and code Playground

by kevinshane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/RGBELoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/EquirectangularToCubeGenerator.js"></script>
<script src="https://threejs.org/examples/js/pmrem/PMREMGenerator.js"></script>
<script src="https://threejs.org/examples/js/pmrem/PMREMCubeUVPacker.js"></script>

CSS

canvas {
  display: block;
}

body {
  margin: 0;
  padding: 0;
  color: white;
  font-size: 12px;
  letter-spacing: 0.5px;
}

JavaScript

var container;
var camera, scene, renderer;
var loader, modelObj;
var envRef, refractionCube;
var lm = new THREE.TextureLoader().load("https://rawcdn.githack.com/kevinshane/gltf/110edeb1c25187f626ac02a01c825ed094867ed6/teapot/LM.png");
var cubeCamera, cubemap;

init();
animate();

function init() {
	container = document.createElement("div");
	document.body.appendChild(container);
	camera = new THREE.PerspectiveCamera(
		45,
		window.innerWidth / window.innerHeight,
		0.01,
		1000
	);
	camera.position.set(0, 0.3, 0.3);
	scene = new THREE.Scene();

	//renderer
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.gammaFactor = 2.2;
	container.appendChild(renderer.domElement);

	//controls
	var controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.target.set(0, 0, 0);
	controls.update();

	// cubeCamera
	cubeCamera = new THREE.CubeCamera(0.01, 1000, 512, {
		magFilter: THREE.LinearFilter
	});
	cubeCamera.position.set(0, 0, 0);
	cubemap = cubeCamera.renderTarget.texture;

	// Load a glTF resource
	loader = new THREE.GLTFLoader();
	loader.load("https://rawcdn.githack.com/kevinshane/gltf/110edeb1c25187f626ac02a01c825ed094867ed6/teapot/tea.gltf", function(gltf) {
		modelObj = gltf.scene;
		modelObj.traverse(function(node) {
			if (node.isMesh) {
      	console.log(modelObj);
				node.material.envMap = cubemap;
				node.material.envMapIntensity = 1;
				node.material.roughness = 0;
				node.material.metalness = 0;
				node.material.lightMap = lm;
				node.material.lightMapIntensity = 1;
			}
		});
		scene.add(modelObj);
	});
	// End load GLTF
}

window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth,...