用three.js做一个3D汉诺塔游戏

// 引入必要的Three.js组件
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加鼠标控制
const controls = new OrbitControls(camera, renderer.domElement);
 
// 加载汉诺塔的3D模型
const loader = new GLTFLoader();
loader.load('models/hannota.gltf', function (gltf) {
  hannota = gltf.scene;
  hannota.position.set(0, 0, 0);
  scene.add(hannota);
 
  // 更新场景
  updateScene();
}, undefined, function (error) {
  console.error(error);
});
 
// 更新场景并渲染
function updateScene() {
  requestAnimationFrame(updateScene);
  renderer.render(scene, camera);
  controls.update();
}
 
updateScene();

这段代码设置了Three.js的场景、相机、渲染器和用户控制。然后使用GLTFLoader加载了汉诺塔的3D模型，并在加载完成后将其添加到场景中。最后，通过循环调用requestAnimationFrame来更新场景和渲染器，以便动态显示3D内容。