让你的网站焕然一新！手把手教你用Three.js搭建3D模型展示页面

2023-09-21 10:37:44

Three.js 简介

Three.js是一个用于在网页中创建和渲染3D图形的JavaScript库。它基于WebGL，WebGL是一个允许你直接访问GPU进行3D渲染的JavaScript API。Three.js允许你创建复杂的3D场景，包括几何图形、纹理、灯光和摄像机。你还可以使用Three.js来处理用户输入和动画。

开始 Three.js 项目

首先，在你的HTML页面中引用Three.js库。你可以从Three.js官方网站下载最新版本，也可以通过CDN进行引用。

<script src="three.min.js"></script>

接下来，你需要创建一个承载模型的标签，并设置其宽高。

<div id="model-container" style="width: 800px; height: 600px;"></div>

Three.js 场景

现在，让我们开始构建我们的Three.js场景。首先，你需要创建一个场景对象，它将包含你想要渲染的所有对象。

const scene = new THREE.Scene();

Three.js 相机

接下来，你需要创建一个摄像机对象，它将用于确定场景的视角。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Three.js 渲染器

接下来，你需要创建一个渲染器对象，它将用于将场景渲染到HTML页面中。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Three.js 光照

现在，让我们添加一些光照，这样才能让我们的模型看起来更加逼真。

const light = new THREE.AmbientLight(0x404040);
scene.add(light);

Three.js 模型

现在，让我们加载我们的3D模型。你可以使用Three.js的OBJLoader或FBXLoader来加载模型文件。

const loader = new THREE.OBJLoader();
loader.load('path/to/model.obj', (object) => {
  scene.add(object);
});

Three.js 动画

现在，让我们添加一些动画来让我们的模型动起来。

function animate() {
  requestAnimationFrame(animate);

  // 旋转模型
  object.rotation.x += 0.01;
  object.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();