Online

docs/.vitepress/config.ts

@@ -25,6 +25,18 @@ export default defineConfig({
       gtag('js', new Date());
       gtag('config', 'G-MB7XVBG1TQ');`,
 		],
+		// 百度统计平台
+		[
+			"script",
+			{},
+			`var _hmt = _hmt || [];
+			(function() {
+				var hm = document.createElement("script");
+				hm.src = "https://hm.baidu.com/hm.js?ea8a4869f485978692f89cd908f6906a";
+				var s = document.getElementsByTagName("script")[0]; 
+				s.parentNode.insertBefore(hm, s);
+			})();`,
+		],
 		// 广告
 		[
 			"script",

docs/.vitepress/utils/createSidebar.ts

@@ -219,6 +219,25 @@ export function createSidebar() {
 			},
 		].map((item, i) => (!i ? item : { ...item, collapsed: true })),
 		"/笔记/": [
+			{
+				text: "threejs入门",
+				link: "/笔记/threejs入门/",
+				collapsed: false,
+				items: [
+					{ text: "01起步", link: "/笔记/threejs入门/01起步" },
+					{ text: "02一个基本的threejs应用", link: "/笔记/threejs入门/02一个基本的threejs应用" },
+					{ text: "03基于物理的渲染和照明", link: "/笔记/threejs入门/03基于物理的渲染和照明" },
+					{ text: "04变换、坐标系和场景图", link: "/笔记/threejs入门/04变换、坐标系和场景图" },
+					{ text: "05动画循环", link: "/笔记/threejs入门/05动画循环" },
+					{ text: "06纹理映射", link: "/笔记/threejs入门/06纹理映射" },
+					{ text: "07插件", link: "/笔记/threejs入门/07插件" },
+					{ text: "08环境光", link: "/笔记/threejs入门/08环境光" },
+					{ text: "09组织你的场景", link: "/笔记/threejs入门/09组织你的场景" },
+					{ text: "10内置几何体", link: "/笔记/threejs入门/10内置几何体" },
+					{ text: "11以gLTF格式加载3D模型", link: "/笔记/threejs入门/11以gLTF格式加载3D模型" },
+					{ text: "12threejs动画系统", link: "/笔记/threejs入门/12threejs动画系统" },
+				],
+			},
 			{
 				text: "Rust基础学习",
 				link: "/笔记/Rust基础学习/",

docs/笔记/threejs入门/01起步.md

@@ -0,0 +1,64 @@
+# 起步
+
+> 此笔记记录于[DISCOVER three.js](https://discoverthreejs.com/)，大多数为其中的摘要，少数为笔者自己的理解
+## 笛卡尔坐标系（3维）
+
+可以看看[这个链接](https://zh.wikipedia.org/wiki/%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB)
+
+采用右手法则，如下图：
+
+![](https://oss.justin3go.com/blogs/Pasted%20image%2020231215105010.png)
+
+## GitHub上的three.js
+
+[**build**文件夹](https://github.com/mrdoob/three.js/tree/dev/build)是 repo 中最重要的文件夹，因为它包含最重要的 three.js 文件（库的核心 ）：
+
+- _**build/three.module.js**_
+
+**这是运行基本的 three.js 应用程序所需的唯一文件。**
+
+文件名中的\*\* .module\*\*告诉我们这是一个 [JavaScript 模块](https://discoverthreejs.com/zh/book/appendix/javascript-modules/ "JavaScript 模块")。在此文件夹中，如果您想支持无法使用模块的过时浏览器，还可以使用两个旧版本的 three.js 核心：
+
+- _**build/three.js**_
+- _**build/three.min.js**_
+
+[_**examples/**_](https://github.com/mrdoob/three.js/tree/dev/examples)文件夹包含许多好东西，包括：
+
+- 所有 [官方示例](https://threejs.org/examples/)的 [源代码](https://github.com/mrdoob/three.js/tree/master/examples/)，您应该将其作为主要学习资源之一进行学习。
+- [_**examples/jsm**_](https://github.com/mrdoob/three.js/tree/master/examples/jsm/)文件夹中的插件 ，例如相机控件和模型加载器，我们在整本书中都会用到它们。您也应该在这里学习代码，尽管它往往更高级，所以您可能要等到您先了解更多其他基础内容。
+- [_**examples/js**_](https://github.com/mrdoob/three.js/tree/master/examples/js/)文件夹中的旧插件 。这些与您在 examples/jsm 中找到的插件集相同，但是，它们将适用于过时的浏览器。就像核心的遗留版本一样，遗留插件将很快被删除，我们将在本书中忽略它们。
+- [3D 字体](https://github.com/mrdoob/three.js/tree/master/examples/fonts/)。
+- 许多不同格式的 [3D 模型](https://github.com/mrdoob/three.js/tree/master/examples/models/)。
+- [音效](https://github.com/mrdoob/three.js/tree/master/examples/sounds/)。
+- [纹理](https://github.com/mrdoob/three.js/tree/master/examples/textures/)。
+- … 还有很多。
+
+你需要学习 three.js 的一切都在那里——除了这本书！更重要的是，该文件夹中的几乎所有内容都包含在 [MIT license](https://github.com/mrdoob/three.js/blob/dev/LICENSE)中，这意味着您可以以任何您喜欢的方式自由使用项目中的任何内容。
+
+## 安装导入
+
+[官网入口](https://threejs.org/docs/#manual/zh/introduction/Installation)
+
+```shell
+// 初始化 NPM 项目
+npm init
+
+// 一旦初始化了 NPM 项目，就可以安装 three 的 npm 包了
+npm install --save three
+```
+
+导入类
+
+```js
+import {
+Camera,
+Material,
+Texture,
+} from 'three';
+```
+
+导入插件不是很方便，因为一个 NPM 包只能有一个主文件。要导入 OrbitControls，我们需要直接引用包含模块：
+
+```js
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+```