使用Three.js和Vue创建3D建筑展示项目

本文还有配套的精品资源，点击获取

简介：本项目展示了如何利用Three.js库和Vue前端框架来构建一个3D建筑展示。Three.js提供了丰富的Web3D图形功能，使得创建复杂的3D场景变得简单，而Vue的易用性和灵活性使得构建用户界面更为高效。通过Three.js的renderer、scene和camera，开发者能够实现3D渲染效果，并且可以通过npm工具安装项目依赖和启动开发服务器，使用Vue CLI进行热加载和实时刷新。项目的标签“JavaScript”强调了使用JavaScript编程语言在Web开发中的重要性。

1. Three.js库的使用与3D图形功能

简介Three.js

Three.js是一个开源的JavaScript库，用于在Web浏览器中创建和展示3D图形。它提供了基于WebGL的接口，允许开发者无需深入复杂的图形学细节，就能轻松地构建和操纵3D场景。

Three.js的优势

Three.js的优势在于它的易用性和功能丰富。它抽象了WebGL的复杂性，让开发者可以使用简单的API来处理3D对象、光源、材质等。同时，Three.js还支持各种几何体、动画、后处理效果等高级功能。

开始使用Three.js

开始使用Three.js首先需要在项目中引入库文件，然后创建场景（scene）、相机（camera）和渲染器（renderer）。下面是一个简单的示例代码，演示了如何创建一个基本的3D场景：

// 引入Three.js库
import * as THREE from 'three';

// 创建场景对象
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);

// 将渲染器的dom元素添加到HTML文档中
document.body.appendChild(renderer.domElement);

// 创建一个立方体并添加到场景中
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

// 开始渲染循环
animate();

在上述代码中，我们导入了Three.js，创建了一个场景、一个透视相机和一个WebGL渲染器。接着，我们添加了一个旋转的立方体到场景中，并设置了相机的位置。通过定义了一个 animate 函数，我们创建了渲染循环，使场景持续更新。这就是一个简单的Three.js 3D场景创建过程。

2.1 Vue.js基础与组件化思想

2.1.1 Vue.js核心概念解析

Vue.js 是一个流行的JavaScript框架，它通过其独特的数据绑定和组件系统简化了前端开发流程。Vue的核心思想是通过声明式的数据绑定，将数据与视图紧密联系在一起，同时使用组件化开发，使得开发者可以构建可复用和模块化的代码块。核心特性包括：

• MVVM 架构：Vue实现了一个模型-视图-视图模型的架构，这样数据更新时视图会自动更新，视图的更改也会反映到数据上。
• 双向数据绑定：Vue通过 v-model 指令实现了视图层与数据层的双向绑定。
• 组件系统：Vue允许开发者自定义可复用的组件，提高了代码的模块化和可维护性。

// 示例：简单的Vue组件
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

以上代码展示了Vue实例化的最基本用法，其中 el 属性用于指定挂载点，而 data 对象包含响应式数据。

2.1.2 组件化开发的优势与实践

组件化开发是Vue.js推崇的设计理念之一。组件允许开发者将用户界面分成独立、可复用的部件，每个部件负责一部分功能。这种方式具有诸多优势：

• 可维护性：组件化使得代码结构更清晰，便于管理和维护。
• 可重用性：一个组件可以在多个不同的上下文中重复使用。
• 可测试性：独立的组件易于单元测试。

组件化实践的基本步骤如下：

1. 创建组件：通过 Vue.extend 或者单文件组件（.vue文件）定义组件。
2. 注册组件：可以全局注册或局部注册组件，以便于在Vue实例中使用。
3. 使用组件：在模板中使用注册的组件标签。
4. 组件通信：利用props和自定义事件等机制实现父子组件间的通信。

// 示例：组件定义与注册
***ponent('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#app'
})

通过上述方式，我们可以创建一个简单的全局组件，并在页面上的 #app 容器中使用它。在Vue项目中，通常推荐以单文件组件的形式来组织代码，包括模板、脚本和样式，这样的结构便于理解和维护。

<!-- 示例：单文件组件 (.vue文件结构) -->
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

<style>
/* 样式内容 */
</style>

以上是一个单文件组件的基本结构，其包含了模板、脚本和样式三个部分。在这个结构中，可以清晰地看到组件的注册和使用方法。组件化开发在大型项目中显得尤为重要，因为它使得项目结构层次分明，代码易于管理和扩展。

3. Three.js渲染器的3D场景转换

Three.js是一个基于WebGL的JavaScript库，它极大地简化了Web环境中的3D图形开发。渲染器是Three.js中负责将3D场景转换为用户能够看到的2D图像的关键组件。本章将深入探讨Three.js渲染器的原理、场景构建和渲染流程，以及在3D场景中处理光照和材质的方法。

3.1 Three.js渲染器的原理与作用

Three.js提供了几种渲染器，包括WebGLRenderer、CanvasRenderer和SVGRenderer。每种渲染器都有其适用场景，但WebGLRenderer因其性能优势成为最常用的选择。本小节将详细介绍渲染器的选择与配置方法，以及渲染循环和动画更新机制。

3.1.1 渲染器选择与配置

Three.js默认使用WebGLRenderer，它是基于WebGL的高性能渲染器，适用于大多数3D图形场景。使用WebGLRenderer之前，需要创建一个渲染器实例，并指定渲染的目标画布（canvas）。

// 创建WebGL渲染器实例
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#webgl') });
renderer.setSize(window.innerWidth, window.innerHeight);

在上述代码中，我们创建了一个WebGL渲染器的实例，并通过 canvas 参数将HTML的 <canvas> 元素传递给渲染器。 setSize 方法用于设置渲染器的大小，确保渲染的图像能够填充整个画布。

3.1.2 渲染循环与动画更新机制

Three.js场景的渲染通常是通过一个循环来完成的，循环中会更新场景状态，并调用渲染器的 render 方法来重新绘制。这通常在 requestAnimationFrame 循环中完成，以获得最佳的动画性能。

function animate() {
    requestAnimationFrame(animate);
    // 更新场景中的动画，例如移动一个对象
    scene.rotation.x += 0.01;
    scene.rotation.y += 0.01;
    // 渲染场景
    renderer.render(scene, camera);
}

animate();

在上述代码中，我们定义了一个 animate 函数，它首先调用 requestAnimationFrame 以请求下一帧的绘制。在每一帧中，我们更新场景对象的状态，然后通过渲染器的 render 方法绘制场景。

3.2 Three.js场景的构建与渲染流程

创建3D场景是Three.js渲染流程的第一步，场景对象（Scene）是3D世界中一切物体和光源的容器。场景的构建与渲染流程涉及多个方面，包括场景对象的创建与管理，以及渲染器与场景之间的交互过程。

3.2.1 场景（Scene）对象的创建与管理

在Three.js中，场景对象是一个基本的容器，用于存放所有的3D对象。创建场景对象并将其添加到渲染器中是渲染流程的基础。

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

场景对象创建后，可以向场景中添加各种3D对象，包括几何体、光源和相机等。管理场景的一个重要方面是场景的层级结构和对象的组织，确保渲染器能够高效地渲染场景。

3.2.2 渲染器与场景的交互过程

渲染器与场景的交互过程是Three.js渲染机制的核心。当调用渲染器的 render 方法时，它会根据场景中的所有对象和相机视角来渲染出当前的3D场景。

// 在animate函数中调用渲染器渲染场景
function animate() {
    requestAnimationFrame(animate);
    // 更新渲染
    renderer.render(scene, camera);
}

渲染器将根据当前相机的位置和朝向来决定渲染哪些部分的场景。如果场景中的任何对象发生了变化，例如位置、旋转或缩放，或者场景的灯光发生了变化，这些都需要在下一次渲染中反映出来。

3.3 3D场景中的光照与材质处理

光照和材质是决定3D场景视觉效果的关键因素。Three.js提供了多种光源和材质类型，以创建丰富多样的视觉效果。本小节将介绍光照模型、光源的配置方法，以及材质类型和纹理映射的应用。

3.3.1 光照模型与光源的配置

Three.js支持多种光源，包括环境光（AmbientLight）、点光源（PointLight）、聚光灯（SpotLight）和方向光（DirectionalLight）等。每种光源都有其特定的属性，例如颜色和强度，这些属性定义了光源对场景的影响。

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(50, 50, 50);
scene.add(pointLight);

在上述代码中，我们创建了一个点光源，并设置了它的颜色、强度和距离衰减属性。点光源从一个点向所有方向照射光线，可以模拟现实生活中的灯泡。光源的位置也会影响场景中对象的明暗。

3.3.2 材质类型与纹理映射的应用

材质决定了物体的外观和质感。Three.js提供了多种材质类型，如MeshBasicMaterial、MeshPhongMaterial和MeshStandardMaterial等。材质类型的不同，决定了物体对光照的反应方式。

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

在上述代码中，我们创建了一个基础材质，将颜色设置为绿色，并且设置为双面渲染，意味着可以从两个方向看到这个材质。

纹理映射是将图像应用到3D模型上的过程，可以大幅提高模型的真实感。Three.js支持将图像作为纹理映射到材质上，从而让模型表面展示丰富的视觉效果。

// 创建一个纹理映射材质
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path_to_texture.png');

const material = new THREE.MeshPhongMaterial({
    map: texture,
    side: THREE.DoubleSide,
});

在上述代码中，我们使用 TextureLoader 加载了一个纹理图片，并将其应用到一个Phong材质上。这样，3D模型就可以显示纹理图片的效果了。

通过合理地选择和配置光照和材质，可以极大地提升3D场景的真实感和视觉效果。这些基本概念和方法构成了Three.js渲染3D场景的基础，开发者可以根据这些知识构建出各种各样的3D应用。

4. 创建和管理3D场景（scene）

4.1 3D场景的基本构建方法

4.1.1 场景的创建与基本属性设置

在Three.js中创建一个3D场景是构建任何3D应用程序的第一步。场景（Scene）对象是所有物体、相机和光源的容器，它定义了渲染过程中的可见世界。

// 创建场景对象
var scene = new THREE.Scene();

在创建场景对象后，您可以使用各种属性来调整和优化您的场景。例如，您可以添加雾效来模拟大气效果，或者更改背景颜色以改变场景的整体氛围。

// 添加雾效
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);

// 设置背景颜色
scene.background = new THREE.Color(0xaaaaaa);

4.1.2 场景中的对象组织与管理

场景中的对象可以是几何体、模型、光源、相机等，它们需要被有效地组织起来以便于管理。Three.js通过场景的 add() 方法可以添加对象，而 remove() 方法则用于移除对象。

// 向场景中添加对象
scene.add(geometry, material, mesh);

// 从场景中移除对象
scene.remove(mesh);

对象可以被添加到子场景中，从而实现更复杂的组织结构。子场景可以被用来管理场景中的某些特定区域，例如，将不同房间或区域的对象分别组织在不同的子场景中。

4.2 场景中的对象操作与交互

4.2.1 对象的添加、删除与变换

在3D场景中，对象的操作包括添加、删除、位置变换等。Three.js提供了一系列方法来处理这些操作。

// 添加对象到场景中
scene.add(object);

// 删除场景中的对象
scene.remove(object);

// 对象的变换操作
object.position.set(x, y, z);
object.rotation.set(x, y, z);
object.scale.set(x, y, z);

位置变换允许对象在3D空间中移动，而旋转和缩放则改变对象的方向和大小。这些变换都通过Three.js的向量（Vector）和矩阵（Matrix）系统来实现。

4.2.2 用户交互在场景中的应用

用户交互可以通过监听鼠标或触摸事件来实现，Three.js提供了 OrbitControls 这样的控制器来帮助我们更容易地实现3D场景的交互式控制。

// 引入OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 实例化控制器
var controls = new OrbitControls(camera, renderer.domElement);

// 使用控制器实现交互
controls.update();

OrbitControls 允许用户通过鼠标来旋转、缩放和平移场景，非常适合于第一人称视角的应用场景。这种控制器的实现增加了用户对3D场景的沉浸感。

4.3 3D场景的优化与性能管理

4.3.1 场景优化策略与实践

随着3D场景的复杂度增加，性能可能会受到影响。为了确保良好的用户体验，场景优化变得尤为重要。

// 避免不必要的渲染
scene.overrideMaterial = null;

// 使用LOD（Level of Detail）技术
// 高度详细的模型只在用户接近时显示，而在远处显示低多边形模型

优化策略包括但不限于对象合并（合并多个几何体为一个）、剔除（不渲染不可见的对象）、LOD技术和纹理压缩等。在实践中，开发者需要根据具体的应用场景选择合适的优化策略。

4.3.2 性能监控与资源管理

性能监控和资源管理是确保3D应用流畅运行的关键。Three.js提供了 requestAnimationFrame 方法来控制渲染循环，并可以集成性能分析工具来进行性能监控。

// 渲染循环控制
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

// 使用性能分析工具
// 例如 Chrome 开发者工具中的 Performance 面板

监控和分析工具帮助开发者识别渲染瓶颈，例如卡顿和延迟，这些都需要通过优化代码逻辑、资源使用来解决。有效管理GPU和CPU的资源是确保场景高性能的关键。

| 性能指标 | 描述 | | --- | --- | | FPS | 每秒帧数，衡量渲染性能的关键指标 | | GPU Memory | 渲染过程中消耗的图形处理内存 | | CPU Time | CPU在渲染每一帧时的占用时间 |

通过监控这些指标，开发者可以对场景进行进一步的性能调整和优化。

5. 定义3D视角（camera）

5.1 相机视角的类型与特性

5.1.1 正交相机与透视相机的比较

在Three.js中，定义3D场景的视角主要依赖于两种类型的相机：正交相机（OrthographicCamera）和透视相机（PerspectiveCamera）。每种相机类型提供了不同的视觉效果，并且在实际的3D应用中扮演着不同的角色。

正交相机生成的视图不具有透视效果，这意味着无论物体距离相机有多远，它们都会以相同的大小显示。这种类型的相机通常用于技术绘图和CAD等需要精确尺寸的应用中。正交相机的视口大小是固定的，它不根据物体的远近来放大或缩小视图。

透视相机则模拟了人类的视觉系统，远处的物体看起来更小，近处的物体看起来更大。这是创建3D场景时最常用的相机类型，因为它能够为观察者提供深度和距离的真实感。透视相机的视场（Field of View, FOV）可以调整，FOV越宽，用户能看到的范围就越大，但是物体的大小看起来会更小。

5.1.2 相机的视野（Field of View）设置

在透视相机中，视野（FOV）是定义相机视野范围的关键参数。FOV是以度为单位的，它描述了相机通过镜头能看到的垂直范围，可以类比于人眼视野的概念。设置不同的FOV值，可以产生不同的视觉效果，比如缩小FOV可以产生望远镜的效果，而增大FOV则类似广角镜头，可以展现更宽广的视野。

例如，在大多数3D游戏和模拟中，合适的FOV设置可以显著影响玩家的沉浸感和视觉体验。一个常见的FOV范围在40度到120度之间，具体值依据项目需求和相机的预期用途而定。

5.2 相机的运动与控制机制

5.2.1 相机动画与变换控制

为了在3D场景中创建动态的视觉效果，相机动画是不可或缺的一部分。在Three.js中，可以通过改变相机的位置、方向、旋转和FOV等属性来实现动画效果。

要控制相机的动画，我们通常使用 requestAnimationFrame 方法来创建一个动画循环，然后在该循环中根据需要更新相机的状态。例如，创建一个围绕场景旋转的相机，可以通过更新相机的位置和旋转角度来实现。

function animate() {
    requestAnimationFrame(animate);

    // 更新相机的旋转角度
    camera.rotation.y += 0.005;

    // 更新渲染器渲染的场景
    renderer.render(scene, camera);
}

// 开始动画循环
animate();

5.2.2 第一人称与第三人称视角实现

在游戏和模拟中，相机视角是一个重要元素，它可以显著影响用户的体验。在Three.js中，实现第一人称（FPS）和第三人称（TPS）视角可以通过调整相机的位置来实现。

第一人称视角将相机放置在角色的头部位置，模拟了玩家的视野。这种视角通常要求相机随着角色的移动而移动，相机的向前移动与角色的移动同步。

// 假设camera是第一人称视角下的相机
// characterMesh是角色模型

function updateFirstPersonCamera() {
    // 将相机位置设置为角色的位置加上一定偏移
    camera.position.copy(characterMesh.position);
    // 将相机向前的方向设置为角色的朝向
    camera.lookAt(characterMesh.position.clone().add(characterMesh.rotation.multiplyScalar(10)));
}

// 在动画循环中调用此函数更新视角
function animate() {
    requestAnimationFrame(animate);
    updateFirstPersonCamera();
    renderer.render(scene, camera);
}

第三人称视角则提供了更大的灵活性，相机通常会跟随角色在场景中的移动，并保持一定的距离和角度。通过调整位置和旋转参数，相机可以提供不同的视角，比如从角色的后面、侧边或是上方观看。

5.3 高级相机技术与应用

5.3.1 立体视觉与虚拟现实（VR）相机

在高级应用场景中，Three.js支持立体视觉和虚拟现实相机，这些技术提供了更加沉浸式的视觉体验。立体视觉需要特殊的相机设置，比如使用两个分开的相机来模拟人类的双眼视觉，以此产生深度感。

虚拟现实（VR）相机则允许开发者创建可以在VR头盔中体验的场景。VR相机能够模拟头盔中的左右眼分别看到的图像，产生立体视觉效果，这对于创建沉浸式游戏和模拟体验至关重要。

// 创建VR相机
const effect = new THREE.StereoEffect(renderer);
effect.eyeSeparation = 0.06; // 相机间的距离
effect.far = 10000; // 远裁剪面

// 渲染时使用VR相机
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    effect.render(scene, camera);
}

5.3.2 相机技术在游戏与交互中的应用

在游戏和交互式应用中，相机技术可以用来创造多样的视觉效果和用户体验。例如，玩家在游戏中的移动、视角变换以及相机跟随等，都需要相机技术来实现。

相机可以根据玩家的输入动态调整位置和方向，创建出如快速运动、慢动作、回放和镜头推拉等效果。使用相机的焦点设置，可以突出展示游戏中的某些元素，引导玩家的注意力。相机的动态调整通常与游戏物理引擎和碰撞检测系统结合，为玩家提供一个丰富且真实的游戏世界。

// 监听玩家输入，调整相机视角
window.addEventListener('mousemove', function(event) {
    const movex = event.movementX;
    const movey = event.movementY;

    // 根据鼠标移动来调整相机的旋转
    camera.rotation.y -= movex * 0.005;
    camera.rotation.x -= movey * 0.005;
});

相机技术的灵活运用，可以极大地增强游戏和交互式应用的可玩性和沉浸感，为用户提供难以忘怀的视觉体验。

6. Vue CLI与npm在项目中的应用

6.1 Vue CLI的安装与配置

6.1.1 CLI工具的安装与项目初始化

Vue CLI是一个基于Vue.js进行快速开发的完整系统，它为现代前端项目管理提供了许多功能，包括项目脚手架、热重载、构建优化等。要使用Vue CLI，首先需要确保你的开发环境已经安装了Node.js。接着，在命令行中执行以下命令安装Vue CLI：

npm install -g @vue/cli

安装完成后，你可以通过运行 vue --version 来验证安装是否成功。一旦确认安装无误，就可以开始初始化你的第一个Vue项目了。执行下面的命令来创建一个名为“my-project”的新Vue项目：

vue create my-project

这个过程会引导你选择预设配置或手动选择配置项。建议初次使用者尝试预设配置，以便快速开始。完成设置后，Vue CLI将自动安装依赖并创建项目结构。

6.1.2 项目结构的概览与定制化

初始化项目后，Vue CLI会生成一系列文件和目录，用于组织你的Vue应用程序。一个典型的Vue项目结构如下所示：

my-project/
|-- node_modules/
|-- public/
|-- src/
|   |-- assets/
|   |-- components/
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- ...

• src/ 目录包含你的应用程序源代码。
• public/ 目录用于存放不经Webpack处理的静态资源，如基础HTML文件和图标。
• package.json 文件列出了项目依赖和可用的脚本。

Vue CLI使用webpack作为默认的构建工具，并且它允许开发者通过 .vue 单文件组件的方式组织代码，这样的结构清晰且便于管理。

一旦你熟悉了基础结构，就可以进行定制化。Vue CLI提供了一个插件系统和配置文件 vue.config.js 来帮助你自定义构建设置，比如修改入口文件、输出目录、加载器配置等。要启动项目并预览效果，只需在项目根目录运行以下命令：

npm run serve

6.2 npm包管理器的使用

6.2.1 npm包的安装与依赖管理

npm是Node.js的包管理器，它允许开发者发布和共享代码包，并且能够管理项目依赖。在Vue项目中，所有的第三方库都是通过npm来安装的。要安装一个包，可以在命令行中运行以下命令：

npm install <package-name>

这会将包安装到 node_modules 目录，并将其版本号记录在 package.json 的 dependencies （生产环境依赖）或 devDependencies （开发环境依赖）部分。例如，安装Vue Router可以使用：

npm install vue-router

一旦安装完成，就可以在项目中引入并使用它了。对于JavaScript库，可以直接使用 import 语句在你的 .js 或 .vue 文件中引入：

import VueRouter from 'vue-router';

对于CSS资源，可以按照库的文档说明进行引入。

6.2.2 版本控制与脚本编写

版本控制是软件开发中的重要环节，它可以防止依赖项的冲突和意外的版本不兼容问题。npm使用语义版本控制来管理包的版本。版本号通常遵循 MAJOR.MINOR.PATCH 格式。

在Vue项目中编写npm脚本是非常常见的。这些脚本通常定义在 package.json 的 scripts 对象中，例如：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

你可以直接通过npm运行这些脚本：

npm run build

6.3 项目构建与部署

6.3.1 项目构建的优化与打包

构建过程是将Vue项目编译成静态资源的过程，通常包含代码的压缩、合并、转换等优化措施。Vue CLI使用 vue-cli-service 命令来完成构建工作。你可以通过修改 vue.config.js 文件来调整构建配置，比如设置 publicPath 、 outputDir 等。

构建优化的一个重要方面是代码分割。Vue CLI默认使用了 @vue/cli-plugin-babel 插件，该插件使得现代浏览器能更好地处理JavaScript代码的分割。此外，Vue CLI还支持使用 --report 标志来生成构建报告，这有助于识别潜在的优化点。

6.3.2 部署策略与持续集成的实现

一旦你的应用被打包完成，就需要考虑如何部署到服务器。Vue CLI允许你构建用于不同环境的版本。你可以创建一个 env.js 文件来设置不同环境下的环境变量，并使用 vue-cli-service build --mode production 来构建生产版本。

对于持续集成，你可以将项目与如GitHub Actions、Jenkins等CI/CD工具集成，自动化测试和部署过程。在GitHub Actions中，你可以创建一个工作流文件，该文件定义了一系列任务，如构建、测试和部署：

name: ci-cd

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12'
    - name: Install dependencies
      run: npm ci
    - name: Build project
      run: npm run build
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

上述配置文件包含了检出代码、安装依赖、构建项目和部署到GitHub Pages的步骤。

以上内容为第六章的详细节选，关于Vue CLI与npm在项目中的应用。通过安装配置、依赖管理、构建部署等方面的详细讲解，本章节旨在为读者提供一套完整的Vue项目构建与管理流程。

本文还有配套的精品资源，点击获取

简介：本项目展示了如何利用Three.js库和Vue前端框架来构建一个3D建筑展示。Three.js提供了丰富的Web3D图形功能，使得创建复杂的3D场景变得简单，而Vue的易用性和灵活性使得构建用户界面更为高效。通过Three.js的renderer、scene和camera，开发者能够实现3D渲染效果，并且可以通过npm工具安装项目依赖和启动开发服务器，使用Vue CLI进行热加载和实时刷新。项目的标签“JavaScript”强调了使用JavaScript编程语言在Web开发中的重要性。

本文还有配套的精品资源，点击获取