three.js webgpu

// three.js WebGPU 示例代码

// 首先确保你的环境支持WebGPU
if (!navigator.gpu) {
    console.error('WebGPU is not supported in this environment');
    throw new Error('WebGPU is not supported in this environment');
}

// 引入three.js库
import * as THREE from 'three';
import { WebGPURenderer } from 'three/examples/jsm/renderers/WebGPURenderer';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建WebGPU渲染器
const renderer = new WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个简单的几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

animate();

// 监听窗口大小变化并调整渲染器大小
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

解释说明：

1. 环境检查：首先检查当前环境是否支持WebGPU。如果不支持，则抛出错误。
2. 引入Three.js库：使用import语句引入Three.js库及其WebGPU渲染器。
3. 创建场景、相机和渲染器：分别创建一个场景、一个透视相机和一个WebGPU渲染器，并设置渲染器的尺寸为窗口大小。
4. 创建几何体和材质：创建一个简单的立方体几何体和一个基本材质，并将其添加到场景中。
5. 渲染循环：定义一个animate函数，使用requestAnimationFrame实现动画效果，使立方体不断旋转并渲染场景。
6. 窗口大小调整：监听窗口大小变化事件，调整相机的宽高比和渲染器的尺寸。

这样你就可以在支持WebGPU的环境中运行一个简单的Three.js应用了。