用 Three.js 写项目太累？这个框架曾试图帮你把结构“收起来”

// 创建 whs.js 应用实例，传入所需的模块数组
const app = new WHS.App([
  // ElementModule: 负责创建和管理 DOM 容器（canvas 元素）
  new WHS.ElementModule(),
  
  // SceneModule: 创建 Three.js 的 Scene 对象，所有 3D 物体都会添加到这个场景中
  new WHS.SceneModule(),
  
  // CameraModule: 创建相机，定义观察场景的视角
  // position 设置相机位置：x=0, y=10（高度），z=35（距离）
  new WHS.CameraModule({
    position: new THREE.Vector3(0, 10, 35)
  }),
  
  // RenderingModule: 创建 WebGL 渲染器，负责将场景绘制到屏幕
  // bgColor 设置背景色为深蓝灰色 (#162129)
  new WHS.RenderingModule({ bgColor: 0x162129 }),
  
  // ResizeModule: 监听窗口尺寸变化，自动调整渲染器和相机比例
  new WHS.ResizeModule()
]);

const cube = new WHS.Box({
  geometry: { width: 5, height: 5, depth: 5 },
  material: new THREE.MeshBasicMaterial({ color: 0xf2f2f2 }),
  position: [0, 8, 0]
});
 
cube.addTo(app);

new WHS.Plane({
  geometry: { width: 120, height: 120 },
  material: new THREE.MeshBasicMaterial({ color: 0x447f8b }),
  rotation: { x: -Math.PI / 2 },
  position: [0, 0, 0]
}).addTo(app);

new WHS.Loop(() => {
  cube.rotation.y += 0.02;
  cube.rotation.x += 0.01;
}).start(app);

app.start();

 
 
  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>whs.js Demo - Rotating Cube</title>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        overflow: hidden;
        background: #0f1418;
      }
    </style>
    <!-- Three.js r92 (whitestorm.js 2.x 对 three 版本较敏感，使用 r92 更稳) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r92/three.min.js"></script>
    <!-- WhitestormJS / whs.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/whitestorm.js/2.1.4/whs.min.js"></script>
  
  
    <script>
      // 1) 创建应用并装配基础模块
      const app = new WHS.App([
        new WHS.ElementModule(), // 挂载到 DOM（默认挂到 body）
        new WHS.SceneModule(),   // 创建 Scene
        new WHS.CameraModule({   // 创建 Camera
          position: new THREE.Vector3(0, 10, 35)
        }),
        new WHS.RenderingModule({ // 创建 Renderer
          bgColor: 0x162129
        }),
        new WHS.ResizeModule()   // 自动处理窗口尺寸变化
      ]);
      // 2) 立方体
      const cube = new WHS.Box({
        geometry: { width: 5, height: 5, depth: 5 },
        material: new THREE.MeshBasicMaterial({ color: 0xf2f2f2 }),
        position: [0, 8, 0]
      });
      cube.addTo(app);
      // 3) 地面
      new WHS.Plane({
        geometry: { width: 120, height: 120 },
        material: new THREE.MeshBasicMaterial({ color: 0x447f8b }),
        rotation: { x: -Math.PI / 2 },
        position: [0, 0, 0]
      }).addTo(app);
      // 4) 动画循环：让立方体旋转
      new WHS.Loop(() => {
        cube.rotation.y += 0.02;
        cube.rotation.x += 0.01;
      }).start(app);
      // 5) 启动
      app.start();
    </script>
  

// whs.js 的写法
const cube = new WHS.Box({
  geometry: { width: 5, height: 5, depth: 5 },
  material: new THREE.MeshBasicMaterial({ color: 0xf2f2f2 }),
  position: [0, 8, 0]
});
cube.addTo(app);

// React Three Fiber 的写法
<mesh position="{[0," 8,="" 0]}=""><boxgeometry args="{[5," 5,="" 5]}=""><meshbasicmaterial color="#f2f2f2"></meshbasicmaterial></boxgeometry></mesh>

// 不要这样
const geometry = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshBasicMaterial({ color: 0xf2f2f2 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 8, 0);
scene.add(cube);
 
// 可以这样
const cube = new Box({
  geometry: { width: 5, height: 5, depth: 5 },
  material: { color: 0xf2f2f2 },
  position: [0, 8, 0]
});
cube.addTo(scene);

// 不要这样
function animate() {
  cube.rotation.y += 0.02;
  sphere.position.y = Math.sin(Date.now() * 0.001) * 5;
  camera.position.x = mouse.x * 10;
  // ... 越来越长
}
 
// 可以这样
new Loop(() => cube.rotation.y += 0.02).start();
new Loop(() => sphere.position.y = Math.sin(Date.now() * 0.001) * 5).start();
new Loop(() => camera.position.x = mouse.x * 10).start();