紫微前端
打造前端的百科全书
展开
-
Three.js 基础入门--第01课:入门前准备
WebGL(Web 图形库)是一种 JavaScript API,用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API,可以在 HTML5元素中使用(简介引自 MDN)。以我的理解,WebGL 给我们提供了一系列的图形接口,能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。Three.js 是一款 webGL 框架,由于其易用性被广泛应用。原创 2023-04-11 08:59:07 · 144 阅读 · 0 评论 -
Three.js 基础入门--第02课:初识 Three.js
上一篇最后,我分享了一个简单案例,供大家查看 Three.js 的 “Hello World”。案例没有什么复杂的东西,也就是一个旋转的立方体。接下来,我将为大家讲解如何实现这个最简单的案例,以及 Three.js 的一些最基本的构件。原创 2023-04-11 09:00:51 · 131 阅读 · 0 评论 -
Three.js 基础入门--第03课:基础功能之 Scene 场景
场景是我们每个 Three.js 项目里面放置内容的容器,我们也可以拥有多个场景进行切换展示,你可以在场景内放置你的模型、灯光和照相机。还可以通过调整场景的位置,让场景内的所有内容都一起跟着调整位置。原创 2023-04-11 09:02:00 · 298 阅读 · 0 评论 -
Three.js 基础入门--第04课:基础功能之 Geometry 几何体
前一篇,我们讲解了场景的结构和基类,对 Three.js 的结构有了一个大概的了解,我们的代码案例还是停留在显示一个立方体的状态。本文,我们将制作更多的几何体形状。一个模型是由几何体 Geometry 和材质 Material 组成。Three.js 内置了很多的几何体种类,如立方体、三棱锥、球、八面体、十二面体、二十面体等等,本文我们将介绍这些几何体的模型创建和几何体的通用方法。原创 2023-04-11 09:01:24 · 280 阅读 · 0 评论 -
Three.js 基础入门--第05课:基础功能之 Material 材质
上一篇我们讲解了模型的形状,本文我们讲解下模型的表现,也就是我们看到的的模型外观——材质。简单的说,就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在渲染程序中,它是表面各种可视属性的结合,这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。Three.js 给我们封装好了大部分的材质效果,避免我们使用复杂的 Shader 语言自己去实现。接下来我们先介绍下 Material 常用的一些属性和方法。原创 2023-04-11 09:28:30 · 229 阅读 · 0 评论 -
Three.js 基础入门--第06课:基础功能之 Light 光照
通过之前的内容,我们已经了解了模型创建的整个过程。接下来,我们将学习如果实现在场景中添加光效和阴影效果。首先我们先介绍一下光照的创建。原创 2023-04-11 09:27:37 · 171 阅读 · 0 评论 -
Three.js 基础入门--第07课:基础功能之 Camera 相机
相机是 Three.js 抽象出来的一个对象,使用此对象,我们可以定义显示的内容,并且可以通过移动相机位置来显示不同的内容。下面讲解一下 Three.js 中相机的通用属性和常用的相机对象。原创 2023-04-11 09:29:05 · 573 阅读 · 0 评论 -
Three.js 基础入门--第08课:基础功能之 Points 粒子
这是基础的最后一节,通过前面的课程,基础的相关内容大家应该有了一个大概的认识,我们也能够实现一些简单的场景显示。在这一节,我们将学习到 Sprite 精灵和 Points 粒子,这两种对象共同点就是我们通过相机查看它们时,始终看到的是它们的正面,它们总朝向相机。通过它们的这种特性,我们可以实现广告牌的效果,或实现更多的比如雨雪、烟雾等更加绚丽的特效。原创 2023-04-11 09:30:16 · 111 阅读 · 0 评论 -
Three.js 基础入门--第09课:进阶篇之 Controls 相机控制器
我们在第07课中讲解过相机的相关内容,也制作了一个简易的相机控制器。正常的项目中,大家的需求都是不一样的,又通常会碰上需求中途改变的情况,我们之前做的简易版相机控制器很难满足此类项目对相机的操作需求。而且,造轮子的前提是当前的框架以及插件已经无法满足自身的需求时,才会考虑造轮子。要不然,项目的进度会被拖得很慢,甚至有可能因此而错过红利期。好在 Three.js 官方和同道中的朋友们给我们提供了很多相关的插件,我们可以根据需求引入相关的插件来实现需求,本文我们就来看一下官方案例中提供的相机控制器。原创 2023-04-11 09:35:52 · 731 阅读 · 0 评论 -
Three.js 基础入门--第10课:进阶篇之使用 Loaders 加载模型到 Three.js
现在市面上的 3D 模型有上百种,每一种格式都有不同的用途,不同的功能和复杂程度。尽管 Three.js 提供了很多的加载器,但选择正确的格式和工作流程将为以后的工作节省大量时间和成本。而且某些格式难以使用,效率低下,甚至有些目前还未完全被支持。原创 2023-04-11 09:35:24 · 338 阅读 · 0 评论 -
Three.js 基础入门--第11课:进阶篇之 Three.js 动画
我们可以根据项目的需求来设置不同的动画,就比如一个人物模型,说话我们使用变形动画去实现,而肢体动作使用骨骼动画去实现。原创 2023-04-11 09:39:59 · 176 阅读 · 0 评论 -
Three.js 基础入门--第12课:进阶篇之使用 Tween.js 创建补间动画
在 Three.js 中使用 Tween.js,能够很方便地改变模型的位置,不需要手动计算,便能获取到具体的位置数据,以实现我们的需求。原创 2023-04-11 09:39:32 · 314 阅读 · 0 评论 -
Three.js 基础入门--第13课:进阶篇之 Three.js 场景交互
浏览器是一个 2D 视口,而 Three.js 展示的是 3D 场景。场景交互时,需要在二维平面中控制三维场景的模型,那如何将 2D 视口的 x 和 y 坐标转换成 Three.js 场景中的 3D 坐标呢?好在 Three.js 已经有了解决相关问题的方案,那就是射线,用于鼠标拾取(计算出鼠标移过的三维空间中的对象)等。我们看下面这张图片:我们一般都会设置三维场景的显示区域,如果指明当前显示的 2D 坐标给,它将生成一条从显示起点到终点的射线,也就是射线与近视面交点和射线与远视面交点连成的这一条直线。原创 2023-04-11 09:43:49 · 344 阅读 · 0 评论 -
Three.js 基础入门--第14课:进阶篇之 Three.js 性能优化
在接触 Three.js 一段时间后,或多或少都会遇到性能问题。此类问题将直接导致页面帧率过低,严重时会导致页面崩溃。导致性能问题的原因有很多,比如模型文件太大或顶点数太多导致加载时间过长,甚至失败,又或者代码书写逻辑有问题导致场景帧数太低。面对不同原因,我们需采取不同的应对方案,比如面对模型问题可对模型进行减面、减体积等处理;针对代码问题,则需尽量减少代码的运算。在平时的开发中,我们还要尽可能避免导致这些性能问题的根由。下面,我将分享几种简单的有助于提升性能的方法。原创 2023-04-11 09:44:55 · 717 阅读 · 0 评论 -
Three.js 基础入门--第15课:进阶篇之 Three.js 核心对象
Three.js 知识讲解部分,到这里基本就结束了。我第一次写正式的教程,难免有一些瑕疵,有不足的地方欢迎在读者圈给我留言。同时,希望该教程能带给大家一些感悟。下一篇,也就是课程最后一篇,我将会编写一个简单的小案例。大家经常玩王者荣耀,那 Three.js 能否实现王者荣耀那种人物操作呢?答案是肯定的。我将通过实现逻辑分析加案例解析,带大家完成这个案例。原创 2023-04-11 09:43:36 · 205 阅读 · 0 评论 -
Three.js 基础入门--第16课:实战篇之人物操作案例
下图是本文所分享实例最后的展示效果。本案例实现了人物跟随操作杆移动并跑步的动作,右边按钮可以实现攻击,短时间内连按可以实现不同的攻击动作。接下来我将带大家一步步实现这个案例。原创 2023-04-11 09:45:40 · 407 阅读 · 0 评论