使用Three.js构建3D模型展示器：缩放、旋转、居中显示

使用Three.js构建交互式3D模型展示器

本教程将指导您使用Three.js库创建一个简单的3D模型展示器，您可以使用鼠标放大、缩小和旋转模型，并在页面上居中显示。

1. 设置HTML结构

首先，创建一个HTML文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>3D模型展示器</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/orbit-controls-es6/1.0.0/OrbitControls.min.js'></script>
    <script src='main.js'></script>
</body>
</html>

这段代码引入了Three.js库和OrbitControls.js库，并创建了一个空的<script>标签，用于编写JavaScript代码。

2. 编写JavaScript代码

创建一个名为main.js的文件，并添加以下代码：

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

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

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor('#ffffff');
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 加载模型
const loader = new THREE.GLTFLoader();
loader.load('model.gltf', (gltf) => {
    const model = gltf.scene;
    scene.add(model);
});

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

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

// 页面居中
function center() {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const left = (window.innerWidth - width) / 2;
    const top = (window.innerHeight - height) / 2;
    canvas.style.left = left + 'px';
    canvas.style.top = top + 'px';
}
center();
window.addEventListener('resize', center);

这段代码完成了以下工作：

创建场景、相机和渲染器。
使用OrbitControls库添加鼠标控制。
使用GLTFLoader加载一个名为model.gltf的3D模型。
设置动画循环以渲染场景。
监听窗口大小变化以调整渲染器和相机的大小。
定义center()函数以使渲染器在页面上居中，并在页面加载和窗口大小变化时调用该函数。

3. 运行代码

将model.gltf文件替换为您自己的3D模型文件，并在浏览器中打开HTML文件，您将看到一个可以旋转、缩放和平移的3D模型展示器。

总结

本教程介绍了如何使用Three.js创建一个简单的3D模型展示器。您可以根据自己的需要修改代码，例如添加灯光、材质和动画等功能，以创建更复杂的3D场景。