耗时3小时,实现一个3D的小骰子(Three.js)

2,110 阅读4分钟

耗时3小时,实现一个3D的小骰子

bfjacky.github.io/dice-toller… Github 展示链接,如果访问比较慢,建议科学上网

屏幕录制2022-07-30 上午10.15.45_.gif

前言

不知不觉已经在前端岗位上工作几年了,刚开始工作的时候承接后台项目的开发,后来进行了一段时间C端H5页面、小程序的开发,再后来参与了比较复杂的前端项目的开发,常见的前端技术也都有过应用和了解了,相信很多前端同学在这个时候和我一样对职业发展感到迷茫,如果一个职业的发展在短短的三年之后就处于一个很难继续进步的状态了,那么这前端这个职业的天花板就真的很低了.

大概每一个在这个阶段的前端工程师都会有这样的一个焦虑,这个时候会尝试通过不同的途径来突破自己.

  1. 阅读各种框架、开源库的源码,学习更好的项目构建方式,摸透框架的运行机制.
  2. 学习跨端技术,学习并应用 Flutter、Electron 等前端跨端实现方案,学习 Android、iOS 开发,使自己从Web前端工程师的身份转变为大前端工程师.
  3. 学习后端技术,由 Node.JS 入手,逐渐向 Java/Go 等后端开发语言转进.

以上三种都是很好的可以提升自己技术实力的手段,如果你对这些都不感兴趣,那么 WebGL 也许是一个不错的精研方向. WebGL 是通过 JavaScript 调用原始的图形渲染能力来进行图像绘制的一种技术.这种渲染方式和 Html/Svg/Canvas2D 在屏幕上进行的渲染是不同的.

我们可以通过 WebGL 进行 2D 渲染和 3D 渲染,学习 WebGL 是一件比较困难的事情,因为其本质是对计算机图形学的学习.不过我们可以先从简单的入手~

Three.js

这个小骰子是通过 Three.js / Cannon 实现的,Three.js 是一个 3D 渲染引擎,可以方便的在 Canvas 中渲染 3D 场景.Cannon 是一个物理引擎,实现在浏览器中模拟物体的物理现象,通过受力分析和计算,得到物理的速度与角速度.

在本个 Demo 中主要涉及到 Three.js 中场景、摄像机、光照、网格、材质、纹理、模型、射线交互这些概念,下面通过代码来一点点解释每个概念(代码模块)所起到的作用.

  1. renderer/index.ts 入口文件,创建了 Three 中的主场景,实现了渲染器的初始化,并将相机、光照、地面、骰子加入到场景中.
  2. meshes/plane.ts 创建一个地面的网格用于渲染,并加载相应的纹理来创建其材质.
  3. targets/dice.ts 实现骰子模型文件的加载,并实现骰子类,支持投掷骰子的方法.
  4. lights/* lights 下的文件为场景中需要的光照,分别创建了一个点光源和一个半球光源. 点光源常用来模拟有灯泡、发光二极管等由点向四周发散的光源,可以用来投射阴影. 半球光源由天空垂直照向大地的平行光源,用来为整个场景提供基础光源,无法投射阴影.
  5. interaction/interaction.ts 注册了对「按下」事件的交互回调,通过 RayCaster 实现了3D物体的点击检测.
  6. cameras/customCamera.ts 创建一个透视投影相机,并实现交互控制相机位置
  7. physical-engine/index.ts 初始化物理引擎中的世界,在这里可以在物理引擎世界中创建元素,控制元素在物理引擎世界中的位置
  8. physical-engine/synchronizer.ts 同步物理引擎和渲染引擎中元素的信息(坐标和自转角度)
  9. clock/clock.ts 自建一个时钟模块,用来同步推进渲染引擎和物理引擎的行为.

在 9 个模块的配合下,不过3、4百行代码就能够实现这样一个具有一定交互能力的小游戏.如果感兴趣可以看一下其中的代码,github.com/BFjacky/dic….

前端开发

不管是用什么语言、做什么平台的开发,业务往往是第一重要的,在我看来,程序员就是将每一个专业领域的业务在各个平台(Web\Android\Linux 等等)实现一番.

Web 前端开发恰好利用了浏览器这个通用性非常好的平台来满足用户的业务需求,得益于用户终端设备的性能越来越强,Web 页面也不再仅仅满足于信息展示和简单交互,下面是一些并不常见的比较复杂的前端项目:

稿定在线PS

腾讯扣叮实验室

Wokwi 硬件仿真平台

要想实现复杂的前端应用,除了专业的业务逻辑要清楚,还需要对浏览器所提供的各项能力(如 WebAssembly/Web Worker 等),来保证复杂前端应用能够在浏览器上流畅、稳定的运行.可以预见的未来,随着浏览器能力的提升、用户终端设备的升级和开发者能力的提升,在浏览器上运行的应用会越来越强大🚀🚀🚀🚀