如何从零开始搭建开源智慧城市项目（一）：初始化场景

2023-12-23 23:18:37

前言

本篇文章是从零开始仿写一个智慧城市系列文章的第一篇，这一篇主要实现一下项目的初始化，添加一下Three场景的三大组件：场景（scene）、相机（camera）和渲染器（renderer），加一个自定义的立方体对象到场景中。这篇文章会帮助读者快速上手Three.js，并为后续的文章打下基础。

1. 初始化项目

首先，我们需要创建一个新的Three.js项目。我们可以使用npm脚手架工具来创建一个新的项目：

npm init three-js-project

这将创建一个新的目录，其中包含一个package.json文件和一个src目录。

接下来，我们需要安装Three.js库：

npm install three

这将把Three.js库安装到项目的node_modules目录中。

2. 创建场景

现在，我们可以开始创建我们的场景了。在src目录中，创建一个新的文件，比如main.js，并添加以下代码：

import * as THREE from 'three';

// 创建场景
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();
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器添加到DOM中
document.body.appendChild(renderer.domElement);

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

这将创建一个新的场景，一个透视相机和一个WebGL渲染器。我们把相机放在场景的后面，这样我们就可以看到场景中的物体了。我们把渲染器添加到DOM中，这样我们就可以看到场景了。

3. 添加物体到场景中

现在，我们可以向场景中添加一些物体了。让我们创建一个立方体：

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建一个网格对象
const cube = new THREE.Mesh(geometry, material);

// 将网格对象添加到场景中
scene.add(cube);