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, uniform, vec3 } from 'three/tsl';

// user struct that happens to be named "object"
const Obj = struct( { color: 'vec3' }, 'object' );

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 = Obj( vec3( 0.0, 1.0, 0.0 ) ).get( 'color' ).mul( uniform( 1.0 ) );

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

renderer.render( scene, camera );