three.js dev template - module

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.156/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.156/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

// Simple three.js example

import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';

import WebGPU from 'three/addons/capabilities/WebGPU.js';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

let camera, scene, renderer, stats;

init();

function init() {

    if (WebGPU.isAvailable() === false) {
        document.body.appendChild(WebGPU.getErrorMessage());
        throw new Error('No WebGPU support');
    }

    const container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 2000);
    camera.position.set(0, 0, 20);

    scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial()
    material.color = new THREE.Color(0xff00ff)

    for (let i=0;i<5000;i++)
    {
        const mesh = new THREE.Mesh(geometry, material)
        mesh.position.x += 0.001*i;
        mesh.position.y += 0.001*i;
        scene.add(mesh)
    }

    renderer = new WebGPURenderer();
    // renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(render);
    container.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize);

    document.onclick = () => console.log(renderer.isWebGPURenderer ? renderer : renderer.info);
    
    stats = new Stats();
				document.body.appendChild( stats.dom );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function render() {
    renderer.render(scene, camera);
    stats.update();
}