Vue 构建 3D 模型全新方案，TresJS 火啦？

Hello，大家好，我是 Sunday。m9r28资讯网——每日最新资讯28at.com

说起 3D 模型构建，大家最先想到的应该就是 ThreeJS 了。但是 ThreeJS 本身是基于 WebGL 构建的 3D 模型库，学习曲线较高。特别是和 Vue 这种框架配合使用时，很多同学就需要花费较多的时间才可以掌握使用的方式。m9r28资讯网——每日最新资讯28at.com

那么有没有更加简单、易上手的框架呢？答案肯定是 有的，它就是咱们今天要说的主角 TresJS。m9r28资讯网——每日最新资讯28at.com

图片m9r28资讯网——每日最新资讯28at.com

01：TresJS

1.1 与 vue 深度兼容

TresJS 提供了完善的中文文档，我们可以直接在他的官网查看 TresJS 的使用方式。m9r28资讯网——每日最新资讯28at.com

目前 TresJS 直接兼容 vue3 和 vite，我们可以通过如下方式对 TresJS 进行使用：m9r28资讯网——每日最新资讯28at.com

1. 直接通过 npm 进行安装 pnpm add three @tresjs/core
2. 以插件的形式（use） 进行安装

import { createApp } from 'vue'import Tres from '@tresjs/core'import App from './App.vue'export const app = createApp(App)app.use(Tres)app.mount('#app')

3. 在组件中直接使用

<script setup lang="ts">import { TresCanvas } from '@tresjs/core'</script><template>  <TresCanvas>    <!-- Your scene here -->  </TresCanvas></template>

1.2 完善的中文文档

学习一个库，最好的方式就是通过文档进行学习。TresJS 提供了完善的中文文档，以刚才使用的 TresCanvas 为例：m9r28资讯网——每日最新资讯28at.com

m9r28资讯网——每日最新资讯28at.com

根据文档中的内容，我们可以很轻松的了解 TresCanvas 组件 的使用。m9r28资讯网——每日最新资讯28at.com

那么接下来，就让我们利用 TresJS 来完成一个基本的 3D 模型展示m9r28资讯网——每日最新资讯28at.com

02：TresJS 案例

2.1 3D 场景构建基础

在使用 TresJS 之前，我们先简单了解下 3D 场景构建基础，我们来看下面的图：m9r28资讯网——每日最新资讯28at.com

图片m9r28资讯网——每日最新资讯28at.com

在整个 3D 场景中，包含 4 个关键概念：m9r28资讯网——每日最新资讯28at.com

1. 物体(objects) 可以是球体、平面、灯光、你最喜欢的角色的 3D 模型（幻灯片放映类似于单词的 3D 场景）
2. 然后我们需要一个 相机(camera) 来观察这些物体并捕捉它们。
3. 我们将所有内容包装在一个 场景(scene) 中，然后......
4. 我们告诉 渲染器(render) 将所有内容渲染到 DOM Canvas 元素中。

2.2 创建项目并安装 TresJS

1. 通过 vue create project 与 pnpm add three @tresjs/core 可直接创建项目并安装 TresJS。
2. 参考 1.1 与 vue 深度兼容 中的代码可快速构建 tresjs 基础样式。
3. 接下来，我们可以创建 相机(camera) 即可看到一个基本的效果。

<script setup>import { TresCanvas } from '@tresjs/core'</script><template> <TresCanvas clear-color="#82DBC5">  <TresPerspectiveCamera /> </TresCanvas></template><style>* { margin: 0; padding: 0;}#app { height: 100vh; width: 100vw;}</style>

4. 有了相机之后，我们可以利用 TresMesh 组件创建基本的模型。

<TresCanvas clear-color="#82DBC5">  <!-- 相机 -->  <TresPerspectiveCamera />  <!-- 模型 -->  <TresMesh>    <TresBoxGeometry />    <TresMeshNormalMaterial />  </TresMesh></TresCanvas>

5. 如果想要调整模型的位置，那么我们可以直接利用 TresMesh 组件的 props 进行修改。

<TresMesh :rotation="[Math.PI / 4, Math.PI / 2, 0]">  <TresBoxGeometry />  <TresMeshNormalMaterial /></TresMesh>

此时渲染效果如下：m9r28资讯网——每日最新资讯28at.com

图片m9r28资讯网——每日最新资讯28at.com

今天，咱们通过一个简单的示例了解了 TresJS 的用法。如果感觉 ThreeJS 学习复杂度高的同学，那么可以看下 TresJS ，或许可以为你带来不一样的开发体验呢？m9r28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-93082-0.htmlVue 构建 3D 模型全新方案，TresJS 火啦？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 七种JavaScript 中位运算符的神奇用法

下一篇： 使用 Spring Boot 结合断点续传技术和自动重连机制实现考试系统网络不稳定性的应对策略