three.js dev template - module

HTML

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

CSS

body {
	margin: 0px;
}

JavaScript

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

let renderer, scene, camera;

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, 0.1, 100 );
    camera.position.set( 4, 4, 4 );
    camera.lookAt( 0, 0, 0 );

    // geometry
    const geometry = new THREE.BoxGeometry();
    
    const loader = new THREE.CubeTextureLoader();
    loader.setPath( 'https://threejs.org/examples/textures/cube/Bridge2/' );
    const envMap = loader.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
    
    // material
    const material = new THREE.MeshBasicNodeMaterial();
    
    const uvNode = vec3( 0.0, 0.0, 0.0 );
    material.colorNode = cubeTexture( envMap, uvNode );
    
    
    // mesh
    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
}

function animate() {

    renderer.render( scene, camera );

}