three.js dev template - module

HTML

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

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { If, Fn, Discard, positionLocal, vec4, viewportCoordinate } from 'three/tsl';

let mesh, renderer, scene, camera, controls;

init();

function init() {

    // renderer
    renderer = new THREE.WebGPURenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setAnimationLoop( animate );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 0, 20 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    // geometry
    const geometry = new THREE.PlaneGeometry(5, 5);
    
    // material
    const materials = [];
    for (let i = 0; i <= 5; i++) {
      const material = new THREE.MeshBasicNodeMaterial();
      material.fragmentNode = Fn(() => {
      	If(viewportCoordinate.y.lessThan(115 * devicePixelRatio), () => {
        	Discard();
        })
      	return vec4(1, 0, 0, 1 - 0.2 * i);
      })();
      materials.push(material);
    }
    
    // mesh
    const offset = 6;
    const meshes = [];
    for (let i = 0; i <= 5; i++) {
      mesh = new THREE.Mesh( geometry, materials[i] );
      mesh.position.x = (-2.5 + i) * offset;
      scene.add( mesh );
    }
    
}

function animate() {

    renderer.render( scene, camera );

}