Three.js —— Texture
P5r 天下第一!学妹真可爱! Mesh 在 Three.js 内是一个重要的概念,它是用于在场景中渲染三维物体的关键组件。Mesh 通过结合 Geometry(几何体) 与 Material (材质)创建出了可以在渲染器内显示的可视化对象。
在 Three.js 中…
React Suspense 源码解析
说明# React 版本 v18.1.0
我们称 React.lazy 引入的组件为 lazyComponent , Suspense 上的 fallback 内的组件为 fallbackComponent
分析基于下述代码
Copy
/**
* src…
罗德里格旋转公式(轴角法)
前言 阅读本文需要一些前置知识,需理解向量点积与叉积的基本知识。以下给出大致定义(因为矩阵在这里用不到,就不写矩阵形式了)以帮助理解
向量点积
\vec {v} \cdot \vec {j} = ||\vec {v}|| ||\vec {j}|| \cos \theta 几何…
三维图形基本几何变换的矩阵推导
前言 此文是 齐次坐标与二维图形基本几何变换的矩阵推导 的衍生。理解二维的变换就能轻松推导三维的。
三维图形基本几何变换
平移
描述从点 (x, y, z) 到 (x + dx, y+ dy, z + dz)
引入齐次坐标,可表述为 (x, y, z, 1) 变形推导为 (x +…
齐次坐标与二维图形基本几何变换的矩阵推导
齐次坐标 “齐次坐标表示是计算机图形学的重要手段之一,它既能够用来明确区分向量和点,同时也更易用于进行仿射(线性)几何变换。”—— F.S. Hill, JR。
正如引用中所说,齐次坐标最大的特点在于它的存在可以区分描述 坐标 与 向量
简单的来说,在普通的直角坐标系…
从傅立叶级数到傅立叶变换
Games101 的第 6 讲内有涉及到傅立叶变换的内容,课后花了点功夫才搞明白这东西(虽然大学学过但也忘得差不多了),于是写下这篇文章用以记录学习心得。 参考资料中我强烈推荐 DR_CAN 老师的《纯干货数学推导》系列!本文大多都是他课程内的笔记。
本文将从以下几个方面…
泰勒展开式(待补全)
泰勒级数是在数学中极其强大的函数近似工具 —— 3Blue1Brown 这两天重新学习了关于泰勒展开式的内容,决定趁热打铁水一篇文章出来作为学习记录。
泰勒定理的大致思想为如果一个函数足够光滑,在已知函数某一点各阶导数的前提下…
记一次升级服务器至 https 的过程
省流:有了证书直接改 nginx 的配置即可。 背景
因为在自己的服务器上利用 Nexus 搭建了一个私有的 docker 镜像库,为了支持 K8s 的默认行为不得不将其升级至 https 。当然也有通过设置 /etc/docker/daemon.json 内的…
React Hooks: useTransition
说明 本文基于 v18.1.0 进行分析。
阅读本文需先阅读 React Hooks: hooks 链表、React Hooks: useState 分析。
调试基于 React Hooks: useState 内关于插队的代码。
TLNR
该 Hook 的返回值…
欧拉角与万向锁
说明 前置阅读:三维图形基本几何变换的矩阵推导
对于在三维空间里的一个参考系,任何坐标系的取向,都可以用三个欧拉角来表现。(三个欧拉角变换可以描述当前物体的姿态)
俯仰(绕 z 轴旋转)、偏航(绕 y 轴旋转)、滚动(绕 x 轴旋转)了解下就行
由于线性变换不符合交换律…
React Hooks: useReducer 分析
说明 本文基于 v18.1.0 进行分析。
阅读本文需先阅读 React Hooks: hooks 链表、React Hooks: useState 分析
与其他 hooks 相同,都会分为 mount 与 update 阶段
与 useState 几乎一致…
React.memo
TLNR# React.memo 通过对传入的组件打上 REACT_MEMO_TYPE 的标签后使得在每一次更新前对传入的 props 进行浅比较(或者通过 compare 函数对新旧 props 进行比较),来决定是否复用原来的 fiber 组件 如果当前组件内存在更新,那么…
React Hooks: useContext & Context
说明 本文重点将会分析 React 内的 Context 机制,分为三个小阶段
createContext
context.Provider
useContext
demo 基于官方例子
Copy
const themes = {
light: {…
React Hooks: useRef & Refs
说明 本文将分析以下两点
useRef 是如何存储数据的
Refs 是如何引用到真实 dom 的
阅读本文需先阅读 React Hooks: hooks 链表
版本基于 v18.1.0
分析基于以下代码
Copy
import { useRef…
React Hooks: useCallback & useMemo
说明# useCallback 与 useMemo 作为优化性的 hooks,可以帮助减少 react 组件内不必要的渲染与计算,但本文只分析指两个 hooks 的实现,不讲解如何使用,版本基于 v18.1.0 阅读本文需先阅读 React Hooks: hooks 链表 和所…
React Scheduler: Scheduler 源码分析
TLNR 全文就是在画下面这个图
说明
Scheduler 作为 react 内任务调度的核心是源码阅读绕不开的点(时间切片这一概念其实就存在于该包内),不过幸运的是,该模块是独立的一个包(可脱离 react 内的一些概念,因此逻辑十分干净),并且在打包后也只有小 700…
React Hooks: useState 分析
说明 本文基于 v18.1.0 进行分析。
在对于 useState 进行调试时会反复出现 interleaved 这一概念,请参考该 链接
文章大致上基于下面的代码进行分析,根据情况不同会有一定的改动。
2022-10-14 补充了关于批处理的源码分析(涉及 任务复用【相关】…
React Hooks: hooks 链表
文章的 React 版本基于 v17.02 的 concurrent 模式 hooks 链表是在讲解所有 hook 前绕不开的话题,此文将以调试的角度出发分析 hooks 链表的结构与作用。
组件挂载时的链表逻辑
首先我们试着对这段代码进行录制。
Copy
import…