用 Lunchbox 在 vue3 中创建一个旋转的 3D 地球竟是如此简单

Posted 2022-08-06 前端修罗场

⭐️ 本文首发自 前端修罗场(点击加入)，是一个由 资深开发者 独立运行 的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。现在加入，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见，交个朋友，少走弯路，少吃亏！

自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。

在本文中，我们将介绍 Three.js 的自定义渲染器—— Lunchbox.js。 我们将介绍在 Vue 中用 Lunchbox.js 构建3D 视觉效果。

什么是 Lunchbox.js

Lunchbox.js 是 Three.js 的 Vue 3 自定义渲染器。 你可以把它想象成 Vue 的 react-three-fiber。

该库通过组件提供对原始 Three.js 对象和类的访问，例如：

• mesh
• lights
• geometries
• group
• materials

这些组件是 Lunchbox.js 的构建块。

例如，在 Three.js 项目中创建标准网格时，我们会使用像 BoxGeometry() 这样的几何类来创建长方体形状，使用像 MeshBasicMaterial() 这样的材质类对其应用颜色，就像在下面的代码中一样：

// 创建边长为 1 的几何图形
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建黄色材质
const material = new THREE.MeshBasicMaterial( color: 0xffff00 )
// 在网格中结合几何图形和材质
const mesh = new THREE.Mesh(geometry, material)
// 将该网格添加到场景中
scene.add(mesh)

为了在 Lunchbox.js 应用程序中创建相同的网格，我们将使用相同的类，除了作为组件，而不是将它们分配给变量并将它们与 Mesh() 类组合，我们将它们嵌套在 <mesh> 中 组件，如下所示：

<Lunchbox>
    <mesh>
        <boxGeometry :args="[1, 1 ,1]" />
        <meshBasicMaterial :color="0xffff00" />
    </mesh>
</Lunchbox>

你会注意到，在上面的示例中，每个 <Lunchbox> 组件都与对应的 Three.js 类和一个 camelCase 名称相匹配。

// three.js
new THREE.Mesh()
<!-- Lunchbox -->
<mesh/>
// three.js
new THREE.BoxGeometry()
<!-- Lunchbox -->
<boxGeometry/>

Lunchbox.js 和 Three.js 的语法非常相似，但有一些不同之处需要注意。 例如，每个 <Lunchbox> 组件都使用 args 属性将参数作为 props。 argsprop 接受一个参数数组并将其传递给组件的类构造函数。

new THREE.BoxGeometry(1, 2, 3)

上面的代码将在 Lunchbox 中转换为以下内容：

<boxGeometry :args="[1, 2, 3]" />

其他 Three.js 对象属性，例如 MeshBasicMaterial 类的 color 属性，可以作为响应式属性添加到 <Lunchbox> 组件上。 这就像我们在前面的例子中看到的一样。

<meshBasicMaterial :color="red" />

但是，使用点符号的属性（例如位置向量）将在 <Lunchbox> 组件中使用破折号 - 进行设置，如下所示：

<mesh :position-x="3" />

Lunchbox为大多数 Three.js 类提供内置支持； 你可以在此处找到组件列表。

可以使用 Lunchbox的 app.extend 方法添加包含的组件中不可用的类。 例如，下面是我们如何将 orbitControl 类添加到 Lunchbox：

import  createApp  from 'lunchboxjs'
import App from 'YourApp.vue'
import  OrbitControls  from 'three/examples/jsm/controls/OrbitControls'

createApp(App)
    .extend( OrbitControls )
    .mount('#app')    

extend() 方法是 Lunchbox 的独特功能之一，使用该方法添加的类继承了 <Lunchbox> 组件的所有功能。

我们已经了解了 Lunchbox.js 的核心概念，接下来我们将了解如何使用 Lunchbox 进行构建。

开始

要设置一个 Lunchbox.js 应用程序，首先使用 Vite 的 CLI 安装 Vue：

npm create vite@latest

运行命令后，从库列表中选择 Vue 并为项目命名。 接下来，cd 进入项目文件夹并运行以下命令：

npm install lunchboxjs three

此命令将安装 Lunchbox.js 和 Three.js 作为 Vue 应用程序的依赖项。 你可以在根目录的 package.json 文件中查看它们。

接下来清理项目中的样板代码，打开 main.js 文件，将内容替换为如下代码：

import  createApp  from 'lunchboxjs'
import App from './App.vue'
createApp(App).mount('#app')

在这里，我们从 lunchboxjs 而不是从 vue 导入 createApp 函数。 这会将 Vue 应用程序转换为 Lunchbox 环境。

现在我们可以开始在我们的应用程序中构建和渲染 3D 对象。

创建场景

场景是允许我们设置要渲染的项目的对象。 它就像一个显示区域，可以将对象放在一起并呈现给浏览器。 以下是 Three.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 );

在Lunchbox.js 中设置场景更直接且不那么神秘。 该库提供了一个 <Lunchbox> 组件，其中包含用于在 Three.js 中创建渲染器和场景的底层代码。

要进行设置，请转到 App.vue 主组件并将 <Lunchbox> 组件放在模板部分中，如下所示：

<template>
  <Lunchbox>
    <!-- ... -->
  </Lunchbox>
</template>

嵌套在 <Lunchbox> 标记中的每个对象都将呈现给浏览器。 如果你保存代码并启动开发服务器，你应该会看到类似于下图的黑屏。

这个黑屏是我们应用的渲染器； 我们添加到场景中的任何内容都将显示在这里。 你可以使用背景道具更改背景颜色，如下所示：

<Lunchbox background="indigo">
            <!-- ... -->
</Lunchbox>

以下是你可以在 <Lunchbox> 组件上使用的一些 props：

• background
• cameraPosition
• camera
• zoom
• shadow

添加网格

几何是用于定义网格形状的 Three.js 类。 在本文前面，我们演示了如何使用 boxGeometry 组件渲染长方体网格。 在这里，我们将看到如何向浏览器渲染更多 3D 形状。

Lunchbox.js 带有几个自动生成的内置几何组件，你可以在此处查看可用组件的列表。

继续并在Lunchbox标签内添加一个 <mesh> 组件，并在其中嵌套你选择的任何几何组件。 不要忘记包含一个带有颜色道具的材质组件。

<Lunchbox>
  <mesh>
     <boxGeometry />
     <MeshBasicMaterial color="red"/> 
  </mesh>
</Lunchbox>


材质组件利用 Three.js Material() 类来定义网格的各种表面属性。

<mesh> 组件只接受一个 Geometry() 和 Material() 组件。 要为场景添加更多形状，我们必须创建更多网格，每个 Geometry() 一个，如下所示。

<Lunchbox>
      <mesh>
         <boxGeometry />
         <MeshBasicMaterial color="red"/> 
      </mesh>
      <mesh>
         <torusKnotBufferGeometry />
         <MeshBasicMaterial color="grey"/> 
      </mesh>
</Lunchbox>

或者，我们可以为每个形状创建单独的组件并将它们导入到主组件中，如下所示：

<script>
      import Sphere from './Sphere.vue'
</script>
<template>
      <Lunchbox>
            <Sphere />
      </Lunchbox>
</template>

每个几何组件都接受独特的参数，这些参数可用于微调和操纵其宽度、高度、平滑度和其他视觉特征。 可以使用 args 属性在 Lunchbox 中设置这些参数。

<torusKnotBufferGeometry :args="[1, 0.4, 240, 20]"/>

组件还接受多个 props。 由于它作为 Geometry() 的容器，它还可以用于操纵位置、旋转等。

<Lunchbox>
  <mesh position-x="4" position-x="4">
      ...
  </mesh>
</Lunchbox>

在上面的代码中，我们添加了一个 positoin 属性，它将球体网格沿 x 轴向右移动 4px。

以下是一些可用于操纵形状的网格 props：

• position (x, y, z)
• rotation (x, y, x)
• scale (x, y)

网格也可以使用 <group> 组件进行分组。 该组件用作几何图形的容器，我们可以在每个 <group> 中添加任意数量的 <mesh>。

<Lunchbox>
     <group>
        <mesh>
           <boxGeometry />
           <MeshBasicMaterial color="red"/> 
        </mesh>
        <mesh>
           <torusKnotGeometry />
           <MeshBasicMaterial color="grey"/> 
        </mesh>
     </group>
</Lunchbox>

添加纹理

目前，我们的网格看起来不是很逼真。 应用的材料使它们看起来有点塑料。 我们可以使用 Lunchbox 中的 <textureLoader> 组件应用纹理，为每个网格赋予更逼真的外观。

<textureLoader> 组件利用 Three.js Texture() 类，它让我们可以将逼真的纹理映射到引擎盖下的网格表面。 为了演示这个过程，我们将创建一个地球的 3D 模型。

要创建地球，请先清除场景，然后使用 <sphereGeometry/> 组件创建具有球面几何形状的新网格。

<Lunchbox>
  <mesh>
     <sphereGeometry />
  </mesh> 
</Lunchbox>

接下来，在网格中添加一个 <meshPhysicalMaterial> 组件并将 <textureLoader> 嵌套在其中，如下所示：

<Lunchbox>
  <mesh>
      <sphereGeometry :args="[1, 32, 32]" />
      <meshPhysicalMaterial>
            <textureLoader />
      </meshPhysicalMaterial>
  </mesh>
</Lunchbox>

组件接受 src 和 attach prop。 src 属性接受纹理材质的相对或绝对路径，而 attach 属性接受映射选项。

我们将在这个例子中使用 map 和 bumpMap 选项。 换句话说，我们必须在网格组件内声明第二个 <textureLoader>。

复制下面的图像并将它们放在项目的 /public 文件夹中：

接下来，将第一个图像的路径添加到第一个 <textureLoader> 组件的 src 属性中，并为附加属性赋予一个 “map” 值。

<meshPhysicalMaterial>
      <textureLoader src="/first-image" attach="map" />
      <textureLoader ... />
</meshPhysicalMaterial>

如果你现在保存项目，浏览器中将出现一个球形轮廓。 这是因为我们的场景没有光源。

要解决此问题，请在 <Lunchbox> 组件中添加 <pointLight /> 和 <directionalLight /> 组件。

<Lunchbox>
  <directionalLight />
  <pointLight />
  <mesh>
      ...
  </mesh>
</Lunchbox>

现在，如果你保存项目并返回浏览器，你应该会看到类似于下图的内容：

为了使图像更有趣和视觉上更令人惊叹，我们将使用第二张图像为地球添加逼真的轮廓。

我们将按照我们处理第一张图像的方式进行处理。 将图像的路径添加到 src 道具，但这次给 attach prop一个 “bumpMap” 值。

添加动画

Lunchbox.js 提供了一个 onBeforeRender 函数，在渲染之前或之后的每一帧都会调用该函数。 使用此函数，我们可以通过在每一帧上为其旋转属性添加一个值来为我们的地球设置动画。

转到 App.vue 组件的脚本部分并从 Vue 导入 ref 和从 Lunchbox 导入 onBeforeRender 函数。

import ref from 'vue'
import onBeforeRender from 'lunchboxjs'

接下来，将 ref 分配给一个 rotation 变量，并将一个具有以下属性的对象传递给它：

const rotation = ref(y: 0);

然后，调用 onBeforeRender 函数并添加以下代码：

onBeforeRender(() =>
   rotation.value.y += 0.02
)

在这里，我们在每一帧上为对象的 y 轴旋转添加 0.02 度。 最后，为地球的网格添加一个 rotation-y 属性，并将 rotation.y 值传递给它，如下所示：

<mesh rotation-y="rotation.y">
        <sphereGeometry />
        <meshPhysicalMaterial>
              <textureLoader ... />
              <textureLoader ... />
        </meshPhysicalMaterial>
</mesh>

现在，如果你保存项目，你的地球应该像下面的例子一样很好地动画。

你可以通过将 x 和 z 属性添加到 ref、onBeforeRender 函数和地球的网格来添加更多旋转动画。

添加事件

我们可以像添加 Vue 中的任何其他元素一样向 <Lunchbox> 组件添加事件监听器。 为了演示，我们将添加一个 click 事件，当它被触发时会暂停我们的地球动画。

继续在地球网格上创建一个 onClick 事件，如下所示：

<mesh rotation-y="rotation.y" @click="">
    ...
</mesh>

接下来，使用 ref 创建一个变量，并将布尔值 true 传递给它。 使用 if 语句将声明包装在 onBeforeRender 函数中：

const active = ref(true)
onBeforeRender(() =>
 if(active)
   rotation.value.y += 0.02
  
)

在这里，我们将活动变量分配为 if 语句的条件。 当该值设置为 false 时，语句中的代码将不会被执行，动画会暂停。

最后，将以下代码添加到 <mesh> 组件的 onClick 事件中：

<mesh rotation-y="rotation.y" @click="active = !active">
    ...
</mesh>

现在地球的动画在点击时会暂停播放，如下图：

现在，我们已经在 Vue 中成功构建了 3D 视觉效果！

结尾

在本文中，我们介绍了 Lunchbox.js 的核心概念，并演示了如何使用该工具在 Vue 中创建 3D 视觉效果。 在本文中，我们创建了一个场景，构建了不同的网格几何体，为网格添加了纹理，为网格添加了动画，并为场景中的对象添加了事件侦听器。

参考

官方文档：https://docs.lunchboxjs.com/installation/