Stage

Add this script to the <head> of the page

<script async src="<https://unpkg.com/[email protected]/dist/es-module-shims.js>"></script>

<script type="importmap">
  {
    "imports": {
      "three": "<https://unpkg.com/three@latest/build/three.module.js>"
    }
  }
</script>

Use this script snippet to add before the </body> tag

<script type="module" src="[YOUR SCRIPT ON CODESANDBOX OR ANYWHERE ELSE]"></script>

To start using, add these line in the script

import * as THREE from "three"; //Main Modules
import { GLTFLoader } from "<https://unpkg.com/three@latest/examples/jsm/loaders/GLTFLoader.js>"; //Load GLTF Modules
import { OrbitControls } from "<https://unpkg.com/three@latest/examples/jsm/controls/OrbitControls.js>"; //Orbit Control Modules
import { EXRLoader } from "<https://unpkg.com/three@latest/examples/jsm/loaders/EXRLoader.js>"; //Load ENV map Modules

Setup a 3D environment with a simple cube and lighting with ENV map

const canvas = document.querySelector('[sayu-three="canvas"]');
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  preserveDrawingBuffer: true,
  antialias: true,
});
const camera = new THREE.PerspectiveCamera(
  75,
  canvas.clientWidth / canvas.clientHeight,
  0.1,
  1000
);
const controls = new OrbitControls(camera, renderer.domElement);

renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.physicallyCorrectLights = true;
renderer.toneMappingExposure = 1;
renderer.setClearColor(0x000000, 0); // the default

canvas.appendChild(renderer.domElement);

let directionalLight = new THREE.DirectionalLight(0xffffff, 2);
scene.add(directionalLight);
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
camera.position.z = 1;
camera.position.y = 1;

//Add ENV Map
THREE.DefaultLoadingManager.onLoad = function () {
  pmremGenerator.dispose();
};

const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

new EXRLoader().load(
  "<https://threejs.org/examples/textures/piz_compressed.exr>",
  function (texture) {
    exrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
    newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
    texture.dispose();
  }

function animate() {
  requestAnimationFrame(animate);
  controls.update();
	resizeCanvasToDisplaySize();
  renderer.render(scene, camera);
}

function resizeCanvasToDisplaySize() {
	const canvas = renderer.domElement;
	const width = canvas.clientWidth;
	const height = canvas.clientHeight;
	if (canvas.width !== width || canvas.height !== height) {
		// you must pass false here or three.js sadly fights the browser
		renderer.setSize(width, height, false);
		camera.aspect = width / height;
		camera.updateProjectionMatrix();
	}
}

animate();