three.js dev template - module

HTML

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

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import { struct, uniformArray, vec3 } from 'three/tsl';

const Light = struct( { position: 'vec3', color: 'vec3' } );

// storage() accepts a struct type, uniformArray() does not
// throws: elementType.charAt is not a function
const lights = uniformArray( [
	{ position: new THREE.Vector3( 1, 0, 0 ), color: new THREE.Color( 1, 0, 0 ) },
	{ position: new THREE.Vector3( 0, 1, 0 ), color: new THREE.Color( 0, 1, 0 ) }
], Light );

const renderer = new THREE.WebGPURenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
await renderer.init();

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
camera.position.z = 3;

const material = new THREE.MeshBasicNodeMaterial();
material.colorNode = lights.element( 1 ).get( 'color' );

scene.add( new THREE.Mesh( new THREE.BoxGeometry(), material ) );
renderer.render( scene, camera );