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);
 
// 添加OrbitControls，允许用户通过鼠标或触摸旋转查看3D场景
const controls = new OrbitControls(camera, renderer.domElement);
 
// 加载GLTF模型
const loader = new GLTFLoader();
loader.load(
    'models/machine_room.gltf', // 模型路径
    function (gltf) {
        scene.add(gltf.scene);
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
        console.error(error);
    }
);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update(); // 更新OrbitControls以反映新的旋转和缩放
}
 
animate(); // 开始渲染循环

这段代码演示了如何使用Three.js创建一个简单的3D场景，并加载一个GLTF格式的机房模型。通过OrbitControls，用户可以通过鼠标或触摸进行场景的旋转和缩放查看。这是实现机房3D可视化的一个基础示例。