找回密码
 注册
搜索
查看: 48|回复: 0

大家觉得,在前端开发中,最难的技术是哪一个?

[复制链接]
发表于 2025-2-12 18:38:25 | 显示全部楼层 |阅读模式

大家觉得,在前端开发中,最难的技术是哪一个?

    如果你之前完全没有接触过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 都能轻松应对。

<顺便吆喝一句,技术大厂,前后端测试捞人,感兴趣可试,待遇给的还可以,多地有空位>

    下面我们通过一个例子,来看看它是怎么使用的。



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 组件的模板部分即可。

  1. <script lang="ts" setup>
  2. import { TresCanvas } from '@tresjs/core'
  3. </script>

  4. <template>
  5.   <TresCanvas window-size>
  6.     <!-- 这里是您的场景 -->
  7.   </TresCanvas>
  8. </template>
复制代码


这个 TresCanvas 组件会在场景幕后做一些设置的工作:

它创建一个 WebGLRenderer 用于自动更新每一帧。
它根据浏览器刷新率设置要在每一帧上调用的渲染循环。

3、画布尺寸
默认的情况下,TresCanvas 组件会跟随父元素的宽高,如果出现空白页,请确保父元素的大小合适。

  1. <script lang="ts" setup>
  2. import { TresCanvas } from '@tresjs/core'
  3. </script>

  4. <template>
  5.   <TresCanvas>
  6.     <!-- 这里是您的场景 -->
  7.   </TresCanvas>
  8. </template>

  9. <style>
  10. html,
  11. body {
  12.   margin: 0;
  13.   padding: 0;
  14.   height: 100%;
  15.   width: 100%;
  16. }
  17. #app {
  18.   height: 100%;
  19.   width: 100%;
  20. }
  21. </style>
复制代码


如果您的场景不是用户界面的一部分,您也可以通过像这样的使用 window-size prop 来强制画布使用整个窗口的宽度和高度:

  1. <script lang="ts" setup>
  2. import { TresCanvas } from '@tresjs/core'
  3. </script>

  4. <template>
  5.   <TresCanvas window-size>
  6.     <!-- 这里是您的场景 -->
  7.   </TresCanvas>
  8. </template>
复制代码


4、创建一个场景
我们只需要 4 个核心元素来创建 3D 体验:

一个将摄像机和对象固定在一起的场景。
一个用于将场景渲染到 DOM 中的渲染器。
一个相机
一个对象
使用 TresJS 时,您只需将 <TresCanvas /> 组件添加到 Vue 组件的模板中,它就会自动为您创建Renderer(canvas 作为 DOM 元素)和Scene。

  1. <template>
  2.   <TresCanvas window-size>
  3.     <!-- 这里是您的场景 -->
  4.   </TresCanvas>
  5. </template>
复制代码


然后,您可以使用 <TresPerspectiveCamera /> 组件来添加一个 透视相机

  1. <template>
  2.   <TresCanvas window-size>
  3.     <TresPerspectiveCamera />
  4.   </TresCanvas>
  5. </template>
复制代码


5、添加一个🍩
那个场景看起来有点空,让我们添加一个基本对象。如果我们使用普通的 ThreeJS,我们需要创建一个 网格 对象,并在其上附加一个 材质 和一个 几何体,如下所示:

  1. const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
  2. const material = new THREE.MeshBasicMaterial({ color: 'orange' })
  3. const donut = new THREE.Mesh(geometry, material)
  4. scene.add(donut)
复制代码


网格是 three.js 中的基本场景对象,用于保存在 3D 空间中表示形状所需的几何体和材质。

现在让我们看看如何使用 TresJS 轻松实现相同的事情。为此,我们将使用 <TresMesh /> 组件,在默认插槽之间,我们将传递一个 <TresTorusGeometry /> 和一个<TresMeshBasicMaterial />。

  1. <template>
  2.   <TresCanvas window-size>
  3.     <TresPerspectiveCamera />
  4.     <TresMesh>
  5.       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
  6.       <TresMeshBasicMaterial color="orange" />
  7.     </TresMesh>
  8.   </TresCanvas>
  9. </template>
复制代码


注意,我们不需要导入任何东西,这是因为 TresJS 会为您使用的 PascalCase 的带有 Tres 前缀的 Three 对象自动生成一个 Vue 组件。例如,如果要使用 <TresAmbientLight /> 组件。
  1. <script setup lang="ts">
  2. import { TresCanvas } from '@tresjs/core'
  3. </script>

  4. <template>
  5.   <TresCanvas
  6.     clear-color="#82DBC5"
  7.     window-size
  8.   >
  9.     <TresPerspectiveCamera
  10.       :position="[3, 3, 3]"
  11.       :look-at="[0, 0, 0]"
  12.     />
  13.     <TresMesh>
  14.       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
  15.       <TresMeshBasicMaterial color="orange" />
  16.     </TresMesh>
  17.     <TresAmbientLight :intensity="1" />
  18.   </TresCanvas>
  19. </template>
复制代码


从这里开始,您可以开始向场景中添加更多对象,并调整组件的属性来查看它们如何影响场景。



6、思路总结
最后我们用人话总结一下上面的思路:

1、最外层我们定义一个TresCanvas,在里面我们可以添加场景
2、然后定义一个透视相机,用于观察3D场景,position里去定义相机x,y,z轴的位置,look-at里定义相机观察的目标点
3、相机定义完之后,我们开始渲染3d对象,TresTorusGeometry用来定义环面集合体的半径和环向参数。TresMeshBasicMaterial定义几何体的基本材质和颜色。
4、最后用TresAmbientLight设置一下环境光的强度。
结语
以上就是今天与大家分享的全部内容,感谢支持!!!


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?注册

×
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

Archiver|手机版|小黑屋|52RD我爱研发网 ( 沪ICP备2022007804号-2 )

GMT+8, 2025-2-20 06:50 , Processed in 0.049843 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表