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 Stats from 'three/addons/libs/stats.module.js';
import * as THREE from 'three';

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight
);
camera.position.z = 3;

const scene = new THREE.Scene();

//

const cube = new THREE.BoxGeometry( 1, 1, 1 );
const cubeMat = new THREE.MeshNormalMaterial();

const cubes = [];
const MESHES_COUNT = 20000;

for ( let i = 0; i < MESHES_COUNT; i ++ ) {

  const cubeMesh = new THREE.Mesh( cube, cubeMat );
  cubes.push( cubeMesh );

}

scene.add( ...cubes );

const base = new THREE.PlaneGeometry( 5, 5 );
const baseMat = new THREE.MeshStandardMaterial( { color: 0xffffff } );
baseMat.roughness = 0.4;
const baseMesh = new THREE.Mesh( base, baseMat );
baseMesh.translateY( - 1.0 );
baseMesh.rotateX( - Math.PI / 2 );

scene.add( baseMesh );

const light1 = new THREE.PointLight( { color: 'white' }, 1 );
light1.position.set( 0, 3, 2 );
scene.add( light1 );

//

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

const stats = Stats();
document.body.appendChild( stats.dom );

//

function updateRendererDomEl( renderer ) {

  const canvas = renderer.domElement;
  renderer.setSize( canvas.clientWidth, canvas.clientHeight );

}

function updateCamera( camera ) {

  const canvas = renderer.domElement;
  camera.aspect = canvas.clientWidth / canvas.clientHeight;
  camera.updateProjectionMatrix();

}

window.addEventListener( 'resize', () => {

  updateRendererDomEl( renderer );
  updateCamera( camera );

} );

//

function animate() {

  cubes.forEach( ( cubeMesh ) => {

    cubeMesh.rotateX( 0.01 );
    cubeMesh.rotateY( 0.03 );

  } );

  renderer.render( scene, camera );

  stats.update();

}