用three.js做一个3D汉诺塔游戏（上）-添加桌台

在汉诺塔游戏中，场景里主要的 3D 物体包括桌台、柱杆和盘子，我们先来添加最简单的桌台到场景中。

桌台的形状是一个长方体，我们可以使用 BoxGeometry 来实现它，网格材质则使用 MeshLambertMaterial 模拟木质的非光泽表面。

const tableSize = {
  width: 30,  // 长
  depth: 10,  // 宽
  height: 0.5  // 高
};
const geometry = new THREE.BoxGeometry(  // 立方缓冲几何体
  ...['width', 'height', 'depth'].map(key => tableSize[key])
);
const material = new THREE.MeshLambertMaterial({ color: '#cccca6' });  // 材质
const table = new THREE.Mesh(geometry, material);
scene.add(table);  // 添加到场景

为方便调试，我们添加相机轨道控制器 (OrbitControls) 来控制相机的旋转、缩放和平移，从而可以控制场景的视角和观察点。另外，再添加辅助坐标轴和辅助网格线，方便更加直观地查看物体的位置。

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

/* 相机轨道控制器 */
new OrbitControls(camera, renderer.domElement);

const axesHelper = new THREE.AxesHelper(100);  // 辅助坐标轴
const gridHelper = new THREE.GridHelper(50, 50);  // 辅助网格线
scene.add(axesHelper, gridHelper);