在这个数字化的时代，3D人物模型的应用越来越广泛，无论是游戏开发、虚拟现实还是动画制作，都需要高质量的3D模型。three.js，作为一个流行的WebGL库，让开发者能够轻松地创建和显示3D模型。本文将带您一步步了解如何使用three.js来打造3D人物模型。

一、three.js简介

three.js是一个基于WebGL的JavaScript库，它提供了丰富的API，帮助开发者简化3D图形的创建和显示。通过three.js，我们可以轻松地在网页上实现3D场景的搭建，包括模型的加载、光照、阴影、动画等。

二、准备工具

在开始之前，请确保您的电脑上已经安装了以下工具：

  • Node.js和npm：用于管理JavaScript包。
  • 代码编辑器：如Visual Studio Code、Sublime Text等。

三、创建基本场景

  1. 初始化HTML结构：
<!DOCTYPE html>
<html>
<head>
    <title>3D人物模型</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
  1. 初始化JavaScript：
// app.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);

// 设置相机位置
camera.position.z = 5;

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

四、加载人物模型

  1. 获取模型文件：从网络上下载一个人物模型的.obj或.glb文件。
  2. 加载模型：
// 加载模型
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
    scene.add(gltf.scene);
    animate();
});

五、添加光照

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

六、添加阴影

// 开启阴影映射
renderer.shadowMap.enabled = true;
camera.shadowMapEnabled = true;

// 添加地面
const geometry = new THREE.BoxGeometry(10, 0.1, 10);
const material = new THREE.MeshBasicMaterial({ color: 0x000000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, -0.05, 0);
mesh.receiveShadow = true;
scene.add(mesh);

// 开启模型阴影
gltf.scene.traverse((object) => {
    if (object.isMesh) {
        object.castShadow = true;
    }
});

七、调整模型大小和位置

// 调整模型大小
gltf.scene.scale.set(0.1, 0.1, 0.1);

// 调整模型位置
gltf.scene.position.set(0, 0, 0);

八、添加动画

// 添加旋转动画
function animate() {
    requestAnimationFrame(animate);
    gltf.scene.rotation.y += 0.01;
    renderer.render(scene, camera);
}

九、总结

通过以上步骤，您已经可以使用three.js创建一个基本的3D人物模型。当然，这只是一个入门级别的教程，您可以根据自己的需求对模型进行更多定制和优化。希望这篇文章能帮助您轻松上手three.js，在3D图形领域探索更多可能性。