当前位置: 首页 > Web前端 > JavaScript

【Threejs系列】-如何快速上手前言

时间:2023-03-27 00:40:01 JavaScript

Threejs到底是什么?学习Threejs需要提前了解什么?3D知识术语解释见示例代码注意以下内容是笔者在短时间内对所学知识点的总结,如有遗漏(难以理解的地方),指出作者修正及时。(threejs的经验是接手外部项目。。--,)threejs到底是什么?该项目的目标是创建一个易于使用、轻量级、跨浏览器的通用3D库。当前构建仅包含WebGL渲染器,但示例中还提供了WebGPU(实验性)、SVG和CSS3D渲染器。一般来说,它是一个包含WebGL渲染器的3D库。简单做一下我的认知评价(看了一些源码和例子):优点:面向对象编程实现,入门非常简单,也简化和方便了后续的扩展工作(OOP面向对象编程主要是功能是继承,所以如果要扩展,可以直接在基础类的基础上继承扩展。)完整的3D特性:PBR、风格化渲染、动画、粒子……基本支持3D程序常用的特性。底层(源代码)功能扩展非常简单。上面提到了OOP的实现,让底层的扩展不需要了解其细节的实现逻辑。你只需要继承一个基类,然后扩展它。完整的生态、较高的行业认可度、完善的WebGL封装……缺点很多:性能上大部分是因为WebGL性能问题,其次是封装问题。占用资源和性能开销。。。没有什么大的缺点(目前场景我没遇到过,有的可以评论),当然不能说加载很大的模型,或者要求比较资源管理与游戏引擎等功能齐全。学习Threejs需要提前了解什么?如果你是前端er,好像没什么好准备的。因为三本身就很容易上手。何况你是前端工程师~!不要动摇你的智慧。进入正题:Javascript/typescriptWebGL相关概念/简单使用(三编程封装特别好,以至于观感太差,不过最好学习一下)3D相关理论知识学习简单不需要mathematicallinealgebra/matrix对于WebGPUSVG之类的作为兴趣学习的东西复习特别深奥。(也是三中练习)threejs编程中的3D知识和术语解释:场景(Scene):是物体、光源等元素的容器。它可以与chrome插件一起使用。投掷window.scene可以实时调整obj的信息和材质信息。摄像头(Camera):场景中的摄像头,代替人眼观察,只需要一个就可以添加到场景中。一般透视相机为PerspectiveCamera(透视相当于人眼模式)。其他还有正交、阵列等。.物体(Mesh):包括二维物体(点、线、面)、三维物体、模型等Light、pointlight等渲染器(Renderer):场景的渲染方式,如webGL\canvas2D\Css3D。控制器(Control):可以通过键盘和鼠标控制摄像机的移动。其他模块:loader,light,material,mathlibrary...看示例代码了解以上概念,学习threejs官网的示例代码也很简单。按照3D模组来看。Scene======Rendering======Camera=====ObjectObject|Controller|Light|Loader======渲染图片。soeasy~最后可视化相关的架构设计、源码学习、日常开发。我将逐步深入分享。如果对你有帮助,请关注我的后续内容。有需要的同学可以加我的联系方式(在我的主页,拉你进群聊)。