three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.webgpu.js",
      "three/webgpu": "https://unpkg.com/[email protected]/build/three.webgpu.js",
      "three/tsl": "https://unpkg.com/[email protected]/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
  background-color: blue;
}

JavaScript

import * as THREE from 'three';
import { pass, mrt, output, float, uniform } from "three/tsl";
import { bloom } from "three/addons/tsl/display/BloomNode.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
let camera, scene, renderer, viewHelper, controls;
let postProcessing;

init();

async function init() {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    200
  );
  camera.position.z = 20;

  scene = new THREE.Scene();

  //

  const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8d8d8d);
  hemiLight.position.set(0, 1000, 0);
  scene.add(hemiLight);

  const dirLight = new THREE.DirectionalLight(0xffffff, 3);
  dirLight.position.set(-3000, 1000, -1000);
  scene.add(dirLight);

  //
  const geometry = new THREE.IcosahedronGeometry(1, 15);

  for (let i = 0; i < 50; i++) {
    const color = new THREE.Color();
    color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);

    const bloomIntensity = Math.random() > 0.5 ? 1 : 0;

    const material = new THREE.MeshBasicNodeMaterial({ color: color });
    material.mrtNode = mrt({
      bloomIntensity: uniform(bloomIntensity),
    });

    const sphere = new THREE.Mesh(geometry, material);
    sphere.position.x = Math.random() * 10 - 5;
    sphere.position.y = Math.random() * 10 - 5;
    sphere.position.z = Math.random() * 10 - 5;
    sphere.position.normalize().multiplyScalar(Math.random() * 4.0 + 2.0);
    sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
    scene.add(sphere);
  }

  renderer = new THREE.WebGPURenderer({ forceWebGL: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setAnimationLoop(animate);
  document.body.appendChild(renderer.domElement);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.maxPolarAngle = Math.PI * 0.5;
  controls.minDistance = 1;
  controls.maxDistance = 100;


  // post processing
 ...