专业名词

• Geometry：几何体，描述物体的形状

• Material：材质，描述物体的外观

• Mesh：网格，几何体和材质的组合

• Scene：场景，包含所有要渲染的物体

• Camera：相机，用于观察场景

• Renderer：渲染器，将场景渲染到屏幕上

• Light：光源，用于照亮场景

• Animation：动画，用于给物体添加动画

• Group：组，用于将多个物体组合在一起，可以设置组的整体属性

• Texture：纹理，用于给物体添加纹理

• Shader：着色器，用于给物体添加着色

• uv: 纹理坐标，用于描述纹理在物体上的位置

步骤

1. 创建 Geometry 和 Material，加入到 Mesh 中
2. 创建 Light 光源
3. 创建 Scene 场景，将 Mesh 和 Light 加入到 Scene 中
4. 创建 Camera 相机
5. 创建 Renderer 渲染器，将 Scene 和 Camera 渲染到屏幕上
6. 创建 OrbitControls 控制相机（传入 Camera 和 Renderer），用于控制相机的位置和角度

JavaScript module 技巧

• import link 导入
• importmap 导入 importmap - MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- 通过链接导入 -->
<script type="module">
import * as THREE from "https://esm.sh/[email protected]/build/three.module.js";
</script>

<!-- 通过 importmap 导入 -->
<script type="importmap">
  {
      "imports": {
          "three": "https://esm.sh/[email protected]/build/three.module.js"
      }   
  }
</script>
<script type="module">
    import * as THREE from "three";

    console.log(THREE);
</script>

可视化控制

可以通过 dat-gui / lil-gui 来可视化控制参数，从而实现交互式效果。

dat-gui 已经不再维护了， star 7.6k
lil-gui 内置在 three.js 中, star 1.3k

lil-gui doc
lil-gui github
dat-gui github

视锥体和相机

通过创建 CameraHelper 来实现模拟相机视锥体，可视化相机角度，并通过 GUI 来实时控制 PerspectiveCamera 的 fov、 aspect 、near、far 参数。

fov: 可视角度，离物体的远近，默认 50
aspect: 宽高比，通常是浏览器窗口的宽高比 window.innerWidth / window.innerHeight，默认 1
near: 近截面，通常是 0.1，默认 0.1
far: 远截面，通常是 1000，默认 1000

几何体

3D 物体都是有顶点构成的三角形网格模型，所有几何体都是由一堆三角形构成的。

如我们正常看到的三角形，是会有 3 个顶点；正方形则是由两个三角形构成的，有 6 个顶点。

可以通过 BufferGeometry 创建自定义集合体；

比如这里我们创建一个正方形，有 6 个顶点，每个顶点有 3 个坐标，所以需要 18 个数字。

1
2
3
4
5
6
7
8
9
10
11
12

const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,

    0, 100, 0,
    100, 0, 0,
    100, 100, 0
]);

const attributes = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attributes;

有可以看出其实有一些数据是重复的 Three.js 提供了优化顶点存储的方案：存储一份不重复的顶点数据，然后存储一份顶点索引就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,

    // 0, 100, 0,
    // 100, 0, 0,
    100, 100, 0
]);

const attributes = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attributes;
const indices = new Uint16Array([0, 1, 2, 2, 1, 3]);
geometry.index = new THREE.BufferAttribute(indices, 1);

噪声

噪声函数可以生成随机值，用于生成随机形状。

SimplexNoise 是 three.js 中的一种噪声函数，用于生成随机值。

uv

UV 坐标是纹理坐标，用于描述纹理在物体上的位置。

texture.offset 可以让纹理贴图偏移一段距离，相当于改变了 uv 坐标，所以修改 texture.offset 的动画也叫做 uv 动画。

还可以结合 texture.wrapT、textrue.wrapS 来实现纹理的重复。

1
2
3
4
5
6
7
8

const loader = new THREE.TextureLoader();
const texture = loader.load('./texture.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.offset.x = 0.5; // 水平偏移
texture.offset.y = 0.5; // 垂直偏移
texture.repeat.x = 2; // 水平重复
texture.repeat.y = 2; // 垂直重复

关键词： AOP, DI, IoC

ahrefs 的 SEO 系列文章讲的挺好，推荐

英文：https://ahrefs.com/blog/how-do-search-engines-work/

中文：https://ahrefs.com/blog/zh/how-do-search-engines-work/

google 文档：https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn

原文：How to Do Great Work

这篇文章探讨了当我们在学习、工作或创作中遇到瓶颈时，如何快速摆脱困境。作者分享了一种心理学驱动的策略，帮助人们在思维受阻时找到突破口。

核心思想

当我们感到“卡住”时，通常是因为思维陷入了死胡同，不断在同一个方向上寻找答案，却没有跳出当前的思维模式。文章提出了一种打破思维僵局的方法，核心是用不同的方式表达问题，或者换一种角度思考。

具体方法

1. 重新表述问题（Reframe the Problem）

   • 有时候，我们的问题本身限制了我们的思维。例如：
     • ❌ “为什么我不能解决这个问题？”
     • ✅ “如果换一个人来解决，他们会怎么做？”
   • 通过改变提问方式，我们的大脑会自动寻找新的路径，而不是在旧的模式里循环。

2. 用不同的媒介表达（Use Different Mediums）

   • 如果文字思考卡住了，可以尝试画图、列清单、口述。
   • 例如：写不出文章时，可以用语音记录自己的想法，然后再整理成文字。
   • 视觉化思考（如画思维导图）能帮助我们跳脱线性思维模式，看到新的可能性。

3. 切换环境（Change Your Environment）

   • 在同一个地方久了，思维容易陷入固定模式。
   • 解决方案：换个地方思考，比如去咖啡馆、公园，甚至只是换个房间。
   • 研究表明，环境变化会刺激大脑的创造力，有助于找到新的思路。

4. 降低思维负担（Reduce Cognitive Load）

   • “卡住”有时候是因为大脑处理的信息过多，导致超载。
   • 解决方案：先休息一下，做点简单的事情（如散步、冥想、洗澡），让大脑自动整理信息。
   • 许多灵感都在“放空”时冒出来，而不是在拼命思考时。

5. 借助外部视角（Seek External Input）

   • 有时候，我们需要别人给一个不同的观点，哪怕是一个简单的问题。
   • 例如：向朋友描述问题，或者假设自己是导师，向学生解释问题。
   • 这个过程会暴露盲点，并促使大脑重组信息。

实际应用

文章举了一些实际案例，比如：

• 作家写作卡壳 → 录音口述自己的想法，再转成文字。
• 程序员调试代码 → 向同事描述问题，甚至是对着橡皮鸭解释（橡皮鸭调试法）。
• 创业者陷入决策困境 → 换个视角，比如问：“如果我是竞争对手，我会怎么看这个问题？”

总结

如果你在学习、工作、创作中遇到瓶颈，可以尝试：

1. 换个方式描述问题，找到新的思考角度。
2. 用不同的表达媒介（画图、口述、列表），打破固定思维模式。
3. 改变环境，让大脑获得新的刺激。
4. 降低思维负担，先做点简单的事，让潜意识自动整理信息。
5. 寻求外部视角，让他人的反馈帮助自己发现盲点。

这篇文章的核心观点是：思维卡住时，最好的办法不是硬想，而是换个方式思考。

2025 年读书笔记

增长黑客

认知觉醒

GTD方法

转载自 丘成桐：我的几何人生

原文：How to Do Great Work

Paul Graham 在《How to Do Great Work》这篇文章中探讨了如何创造出卓越的工作。他提出了一些关键理念，旨在帮助读者理解成就伟大工作的核心因素。以下是文章中的主要观点及其分析：

1. 好奇心是成功的动力

Graham 强调了好奇心在创造伟大作品中的重要性。他认为，好奇心驱动我们去探索未知、发掘新思路。它不仅是创意的源泉，也是持续创新的内在动力。通过培养好奇心，我们可以发现更多的机会，甚至打破常规思维的限制。

2. 勇于创造，数量有时决定质量

Graham 鼓励人们不应过于追求完美，而是应当专注于大量的创造工作。虽然其中的作品不必每一件都达到完美，但通过大量创作，最终会积累出更多有价值的成果。许多伟大的创作往往源自反复实践和不断尝试。

3. 做自己感兴趣的事

Graham 认为，伟大的作品往往来自于我们对某个事物的真正兴趣。只有当我们全身心投入自己感兴趣的工作时，才能体现出真正的热情和专注力。兴趣是驱动力，也是保证创造力持续输出的基础。

4. 敢于冒险，不惧失败

伟大的工作往往伴随着风险与挑战。很多时候，追随自己的兴趣会让我们走上一条布满障碍的路，但正是这些挑战塑造了最终的成果。Graham 提出，要勇敢面对拒绝和失败，迎难而上，因为这些经历会促使我们成长。

5. 寻找优秀的同伴

Graham 强调，和优秀的人合作能够显著提升自己的工作水平。周围的人对你的影响是巨大的，他们能为你提供灵感和支持，帮助你在创造过程中走得更远。因此，寻找并与优秀的同伴合作，是成功的重要因素。

6. 想得大，但从小做起

Graham 提到，虽然要有宏伟的目标，但更重要的是从小处着手。很多伟大的想法和项目，往往是从简单、实际的小目标开始的。逐步积累经验并且在过程中发现新的机会，最终才能实现更大的突破。

7. 坚持和耐心是成功的关键

最后，Graham 强调，伟大的作品不会一蹴而就。成功需要时间和耐心。在遇到挫折时，我们需要保持坚持不懈的态度，并从失败中吸取教训。只有通过不断努力，才能迎来成功的曙光。

总结

Graham 的文章提供了一种如何做伟大工作的框架，强调好奇心、热情、冒险精神、同伴合作等多个因素的综合作用。他的观点适用于各个领域，尤其是在面对创作或创新任务时，能够为我们提供有价值的指导。这些思想不仅帮助我们理解成就伟大作品的路径，也启发我们在日常工作中如何提高自己的效率和成果。

蛤蟆先生去看心理医生-豆瓣

《蛤蟆先生去看心理医生》的作者 罗伯特·戴博德 核心观点是：

心理治疗是帮助自我觉察的过程：心理治疗可以帮助我们深入探索自己，理解深藏在内心的痛苦、焦虑、愤怒等情绪，并从根源上找到它们的来源。自我觉察是心理成长的第一步，它有助于找到并释放内心的负担，获得内在的自由。

每个人的问题源自早期经验和内在冲突：每个人的情绪问题通常与早期生活经历及个人性格密切相关。蛤蟆先生的问题正是来源于过去的创伤和性格中未被解决的矛盾，书中的心理咨询过程揭示了如何识别和化解这些根源性冲突。

自我接纳和宽容至关重要：心理健康的重要标志是接纳不完美的自己，并在宽容自己的基础上逐步改善。当我们不再批判自己，能温柔对待自己的情绪时，才真正具备改变的能力。

改变需要时间和耐心：心理成长是一个循序渐进的过程，不能急于求成。蛤蟆先生通过多次的咨询和反复的探索，才逐渐理解了自己并产生了改变。心理疗愈和成长往往需要长时间的努力和陪伴。

勇敢面对自己是迈向内心平和的关键：蛤蟆先生在治疗中面对内心的阴影、恐惧和过往的痛苦，这一过程中充满挑战，但它让他重获平和和力量。书强调，只有当人敢于直视内心的真实情绪时，才能获得真正的解脱。

总结
罗伯特·戴博德通过这本书强调，自我觉察、接纳自己、勇敢面对内心世界 是获得心理健康和成长的核心。在心理治疗的帮助下，人们可以找到化解内心冲突的方法，并学会与自己和解。这种心理转变不仅帮助个人成长，还能带来更为平和和丰富的生活。

原文：https://www.computerhope.com/jargon/w/wildcard.htm

文章讲解了通配符（wildcard）的概念及其在计算机和搜索中的应用。通配符是一种特殊字符，用于替代一个或多个字符，使用户能够进行模糊搜索或匹配多个文件。常见的通配符包括星号（*）和问号（?），分别表示任意数量的字符和单个字符。文章还讨论了不同环境中通配符的具体使用方法和场景。

原文：how-to-learn-stuff-quickly

总结文章《How to Learn Stuff Quickly》（如何快速学习）

这篇文章由 Josh W. Comeau 撰写，探讨了如何高效学习新知识，尤其是技术类内容。作者分享了自己的学习方法，并提供了一些实用技巧，帮助读者更快掌握复杂概念。

文章主要内容梳理

1. 传统学习 vs. 高效学习

作者认为，传统的学习方法（如阅读文档、看教程）效率不高，容易导致被动学习。他提倡主动学习，即通过实际应用和刻意练习来加深理解。

2. 关键学习方法

Josh 介绍了几个核心的学习策略，以提高学习速度和效果：

（1）基于项目的学习（Project-Based Learning）

• 直接动手做项目，逼迫自己在实践中学习。
• 通过解决实际问题，更快掌握知识点，而不是仅仅阅读或观看教程。
• 举例：如果学习 React，应该尝试自己构建一个小型应用，而不是只看官方文档。

（2）自我解释（The Feynman Technique）

• 费曼学习法：用自己的话解释概念，直到能够清晰、简洁地表述。
• 通过写博客、录制视频或教别人来巩固知识。
• 避免“假性学习”（看似懂了但无法真正应用）。

（3）学习的分层结构（Layered Learning）

• 先掌握基础概念，不追求一开始就精通所有细节。
• 例如，在学习新技术时，先了解核心功能，然后再深入学习优化和高级用法。
• 逐步建立知识体系，避免信息过载。

3. 避免常见的学习陷阱

（1）过度依赖教程（Tutorial Hell）

• 一直跟着教程走，导致无法独立解决问题。
• 解决方案：尝试摆脱教程，自行实现功能，即使遇到困难也不要立刻依赖外部答案。

（2）害怕犯错（Fear of Failure）

• 过于害怕犯错会阻碍学习。错误本身是学习的一部分，遇到问题时，应该主动调试、查找解决方案。

（3）过度优化（Premature Optimization）

• 一开始不必追求完美，先把基本功能实现，再逐步优化。

4. 具体应用举例

Josh 用自己的经验说明这些方法的有效性，例如：

• 他在学习新技术时，通常会在几小时内搭建一个小项目，而不是先读完所有文档。
• 他发现用博客文章记录自己的学习过程，对理解和记忆帮助很大。

总结

Josh W. Comeau 提倡主动、实践导向的学习方法，而不是被动吸收知识。他的核心建议包括：

1. 动手做项目，从实践中学习，而不是单纯看教程。
2. 费曼学习法，通过教别人或自我解释来加深理解。
3. 分层学习，先掌握核心概念，再逐步深入。
4. 避免依赖教程，尽早独立尝试解决问题。
5. 允许自己犯错，通过错误学习，而不是追求完美。

如果想快速学习新技术或概念，最好的方法是尽快开始动手做项目，并在过程中不断调整和优化自己的理解。