three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.173/build/three.module.js",
      "three/webgpu": "https://unpkg.com/three@0.173/build/three.webgpu.js",
      "three/tsl": "https://unpkg.com/three@0.173/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/three@0.173/examples/jsm/"
		}
	}
</script>
    <canvas id="canvas_1" style="
          pointer-events: auto;
          touch-action: none;
        "></canvas>

CSS

body {
	margin: 0px;
  background-color: blue;
  overflow:hidden;
}

JavaScript

import * as THREE from "three";
import Stats from "three/addons/libs/stats.module.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { RGBELoader } from "three/addons/loaders/RGBELoader.js";

//解决宽高问题
const common = `
uniform vec2 test;
const vec2 pool2 = vec2( 6, 6); 

const vec3 pool3 = vec3( floor( 512.0 / pool2), pool2.x * pool2.y); 


// 将三维坐标转换为二维坐标
vec2 dim2from3( vec3 q){
    float x, y;
    vec3 p;
    // 确保坐标在有效范围内
    p = clamp( q, vec3( 0), pool3);
    // 计算y坐标
    y = floor( p.z / pool2.x);
    // 计算x坐标
    x = floor( p.z) - y * pool2.x;
    // 返回二维坐标
    return vec2( x, y) * vec2( pool3.xy) + p.xy;
}

// 将二维坐标转换为三维坐标
vec3 dim3from2( vec2 w){
    return vec3(
        // 计算x、y坐标
        w - pool3.xy * floor( w / pool3.xy),
        // 计算z坐标
        floor( w.x / pool3.x) + pool2.x * floor( w.y / pool3.y)
    );
}

// 定义粒子结构体
struct Particle{
    // 粒子的质量
    uint m;
    // 粒子的位置
    vec3 pos;
    // 粒子的速度
    vec3 vel;
    // 粒子受到的力
    vec3 force;
    // 粒子的密度
    float density;
};


// 将三维向量打包为一个无符号整数
// 5位用于共享指数，9位用于每个分量
uint pack_vec3( vec3 v){
    // 找到向量分量的最大值
    float maxv = max( abs( v.x), max( abs( v.y), abs( v.z)));
    // 计算指数并限制在-15到15之间
    int exp = clamp( int( ceil( log2( maxv))), -15, 15);
    // 计算缩放因子
    float scale = exp2( -float( exp));
    // 将向量分量缩放并转换为无符号整数
    uvec3 sv = uvec3( round( clamp( v * scale, -1.0, 1.0) * 255.0) + 255.0);
    // 打包指数和向量分量
    return uint( exp + 15) | ( sv.x << 5) | ( sv.y << 14) | ( sv.z << 23);
}

// 将打包的无符号整数解包为三维向量
vec3 unpack_vec3( uint u){
    return ( vec3(
        // 提取x分量
        ( u >> 5) & 0x1ffu,
        // 提取y分量
        ( u >> 14) & 0x1ffu,
        // 提取z分量
        ( u >> 23) & 0x1ffu
    ) - 255.0) / 255.0 * exp2( float( u & 0x1fu) - 15.0);
}


//...