头图

【Threejs系列】-如何快速入门前置介绍

wlove
English

image.png

  1. Threejs到底是什么?
  2. 学习Threejs需要提前了解什么?
  3. 3D方面知识以及术语解释
  4. 看段示例代码
注意下述内容是作为笔者的视角下很短时间内所学到知识点的总结,如有遗漏(不解处)及时指出 笔者做修复。(Threejs使用经验是接过外边的项目.. - -,)

threejs 到底是什么?

The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.

通俗介绍来说就是包含WebGL 渲染器的3D库。简单进行一个我的认知评价(我看了部分源代码和示例):

优点:

  1. 面向对象编程实现,这样来说对于入门来说非常简单 以及后续拓展工作的简化,便捷化(OOP面向对象编程主要功能就是继承,这样想拓展直接基于基础类进行一个继承然后拓展就好了。)
  2. 完整三维特性:PBR、风格化渲染、动画、粒子... 基本上上三维程序常用的功能特性都有支持。
  3. 底层(源码)功能拓展非常简单, 上面提到了OOP的实现, 以至于底层的拓展不需要去了解它细节部分的实现逻辑。只需要继承一个基础类然后拓展就好啦。
  4. 生态全,行业认可度高 WebGL封装完善.... 挺多的

缺点:

  1. 性能 大部分原因还是WebGL性能方面问题,其次还有就是封装问题 threejs目的是作为渲染器 那么在你特殊场景的无用模块的占用资源性能开销...
  2. 没啥大的缺点(我现在的场景没遇到..有的可以评论), 当然你不能说加载非常大的模型, 或者说要求和游戏引擎去比资源管理啊 这些完备功能。

学习Threejs需要提前了解什么?

如果你是一个前端er, 好像没什么需要准备的。因为three本身上手就蛮简单的。况且你可是一个前端工程师~!
不抖机灵了。进入正题:
  1. Javascript/typescript
  2. WebGL相关概念/简单使用(在three编程中这方面封装特别好,以至于感知太差 不过最好还是了解学习一下)
  3. 3D相关理论知识学习
  4. 数学 简单线代/矩阵的知识 不需要特别深奥回顾一下
  5. 至于WebGPU SVG什么的作为兴趣去学。(在three中还属于实践)

3D方面知识以及术语解释

在threejs编程中含有的内容:

  1. 场景(Scene):是物体、光源等元素的容器,可以配合 chrome 插件使用,抛出 window.scene即可实时调整 obj 的信息和材质信息。
  2. 相机(Camera):场景中的相机,代替人眼去观察,场景中只能添加一个,一般常用的是透视相机PerspectiveCamera(透视相当于人眼模式) 其他还包含正交,阵列等等。。
  3. 物体对象(Mesh):包括二维物体(点、线、面)、三维物体,模型等等
  4. 光源(Light):场景中的光照,如果不添加光照场景将会是一片漆黑,包括全局光、平行光、点光源等
  5. 渲染器(Renderer):场景的渲染方式,如webGL\canvas2D\Css3D。
  6. 控制器(Control): 可通过键盘、鼠标控制相机的移动
  7. 其他模块:

加载器 灯光 材质 数学库....

看段示例代码

了解了上面的概念,学习threejs官网的示例代码就很简单了。按着3D模块去看。场景======渲染======相机===== 物体对象 | 控制器 | 灯光 | 加载器====== 效果图。 so easy~

image.png

最后

可视化相关的架构设计,源码学习,日常开发。我会逐步进行深入分享。如果对你有帮助请关注我后续的内容。有需要的同学可以加一下我的联系方式(在我的主页,拉你进群聊)。

阅读 1k

前端读书会
真的真的要学习一直学习。 相信付出一定会有回报的那天。

wx:wywin2022

6.9k 声望
1.8k 粉丝
0 条评论

wx:wywin2022

6.9k 声望
1.8k 粉丝
文章目录
宣传栏