大家觉得，在前端开发中，最难的技术是哪一个？
如果你之前完全没有接触过3D 可视化应用开发，那使用Three.js开发应用还是门槛挺高的，比如，加载一个模型，调光，选择模型弹框的功能，就能干出Three.js上百行的代码。同时还有很多复杂的3D概念需要理解。
前言
今天给大家分享一个3D 开发框架：TresJS 。它是一个基于 Vue.js 的声明式 Three.js 框架，将 Vue 的开发便利性与 Three.js 的强大功能完美结合，提供了模板语法和组件化的开发方式，与 Vue 生态无缝结合，无需额外学习复杂的 Three.js API，大大简化了复杂 3D 场景的构建。高扩展性，与 Three.js 的资源和技术完美兼容，并且在内部进行了大量优化，确保在构建复杂 3D 场景时，性能表现依然出色，无论是数据可视化、虚拟现实。还是3D动画效果，TresJS 都能轻松应对。
<顺便吆喝一句，技术大厂，前后端测试捞人，感兴趣可试https://jinshuju.net/f/o38ijj，待遇给的还可以，多地有空位>
下面我们通过一个例子，来看看它是怎么使用的。
1、安装
通过npm的方式，我们可以安装 TresJS：
pnpm add three @tresjs/core
Typescript
TresJS 是用 Typescript 编写的，是完全类型化的。如果您使用的是 Typescript，您就能充分享受类型的好处。 只需要保证你安装了 three 的类型定义。
npm install @types/three -D
2、设置体验画布
在我们创建场景前，我们需要一个什么来展示它。使用原始的 ThreeJS 我们会需要创建一个 canvas HTML 元素来挂载 WebglRenderer 并初始化一个场景。
通过 TresJS 你仅仅需要导入默认组件 并把它添加到你的 Vue 组件的模板部分即可。
<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>
<template>
<TresCanvas window-size>
<!-- 这里是您的场景 -->
</TresCanvas>
</template>
这个 TresCanvas 组件会在场景幕后做一些设置的工作:
它创建一个 WebGLRenderer 用于自动更新每一帧。
它根据浏览器刷新率设置要在每一帧上调用的渲染循环。
3、画布尺寸
默认的情况下，TresCanvas 组件会跟随父元素的宽高，如果出现空白页，请确保父元素的大小合适。
<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>
<template>
<TresCanvas>
<!-- 这里是您的场景 -->
</TresCanvas>
</template>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#app {
height: 100%;
width: 100%;
}
</style>
如果您的场景不是用户界面的一部分，您也可以通过像这样的使用 window-size prop 来强制画布使用整个窗口的宽度和高度:
<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>
<template>
<TresCanvas window-size>
<!-- 这里是您的场景 -->
</TresCanvas>
</template>
4、创建一个场景
我们只需要 4 个核心元素来创建 3D 体验:
一个将摄像机和对象固定在一起的场景。
一个用于将场景渲染到 DOM 中的渲染器。
一个相机
一个对象
使用 TresJS 时，您只需将 <TresCanvas /> 组件添加到 Vue 组件的模板中，它就会自动为您创建Renderer（canvas 作为 DOM 元素）和Scene。
<template>
<TresCanvas window-size>
<!-- 这里是您的场景 -->
</TresCanvas>
</template>
然后，您可以使用 <TresPerspectiveCamera /> 组件来添加一个 透视相机
<template>
<TresCanvas window-size>
<TresPerspectiveCamera />
</TresCanvas>
</template>
5、添加一个 |
楼主
标题置顶
标题高亮
