用简单方法搭建Three.js 3D汽车展示厅

2023-11-28 23:18:26







在上一篇文章中，笔者简单粗略地了开发3D汽车展厅的过程。在这篇文章中，笔者将提供一个更详细的教程。

## Three.js 简介

Three.js是一个流行的JavaScript库，用于创建和渲染3D图形。它可以在浏览器中运行，也可以在其他环境中运行，如Node.js和Electron。Three.js的主要优点是它简单易学，并且具有强大的功能。

## Three.js汽车展示厅教程

### 1. 创建场景

首先，我们需要创建一个场景。场景是3D世界中的容器，它包含了相机、光照、模型和其他对象。

```javascript
const scene = new THREE.Scene();

2. 创建相机

接下来，我们需要创建一个相机。相机是3D世界中的视角，它决定了我们如何看待场景。

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

3. 创建光照

光照对于3D世界来说非常重要，它可以使场景中的对象更加真实。

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

4. 创建模型

现在，我们可以开始创建模型了。模型是3D世界中的对象，它可以是任何东西，如汽车、房屋、树木等。

const loader = new THREE.GLTFLoader();
loader.load('car.gltf', (gltf) => {
  const car = gltf.scene;
  scene.add(car);
});

5. 创建材质

材质决定了模型的外观。

const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // red material

6. 创建交互

交互允许我们与3D世界中的对象进行交互，如旋转、缩放和移动。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

7. 渲染场景

最后，我们需要渲染场景。

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

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

animate();