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/webgpu';
import { positionLocal,Loop, int,float, uniformArray, uniform, mul, texture, vec2, vec3, uv, Fn, } from 'three/tsl';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	
let container;

let camera, scene, renderer, options, material, assetPath;
		

function getRndIntegerArray(v) {
    let rarr = new Array();
    for(var i=0; i<v*v; i++){
        rarr += parseFloat(Math.floor(Math.random() * 10));
    }
	console.log("RAR: ", rarr);
  return rarr
}


init();

function init( ) {

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

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2500 );
	camera.position.set( 0.0, 1, 4 );

	//
	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x444488 );

	//
	renderer = new THREE.WebGPURenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setAnimationLoop( render );
	container.appendChild( renderer.domElement );

	//content
	const ambient = new THREE.HemisphereLight( 0xaaaaaa, 0x333333 );
	const light = new THREE.DirectionalLight( 0xFFFFFF, 3 );
	light.position.set( 3, 3, 1 );
	scene.add( ambient );
	scene.add( light );
	const controls = new OrbitControls( camera, renderer.domElement );
	
	tsl();
	
	window.addEventListener( 'resize', onWindowResize );

}

function tsl(){
	const myArray = getRndIntegerArray(10);
	const myNum = uniform(1.0);
	const uniform_array = uniformArray(myArray);
	const arraySize =  uniform(myArray.length);
  const geometry =  new THREE.PlaneGeometry( 10, 10, 10, 10 );
	  
	var material = new THREE.MeshStandardNodeMaterial( { color: 0xFF0000, side: THREE.DoubleSide } );
				
	material.positionNode = Fn( () => {
	var position = positionLocal.xyz.toVar();

	//retrieve the value within a loop
	Loop( { type: 'int', start: int( 0 ), end: int(101), condition: '<=' }, ( { i...