From 53a7a813fc5cc2ea0e270d57cdcb2e30477ec95a Mon Sep 17 00:00:00 2001 From: xsstomy <674371968@qq.com> Date: Wed, 15 Feb 2023 16:25:17 +0800 Subject: [PATCH 1/5] =?UTF-8?q?Update=2004=20=E6=B7=BB=E5=8A=A0=E4=B8=80?= =?UTF-8?q?=E4=BA=9B=E8=87=AA=E9=80=82=E5=BA=94.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 拼写错误 --- ...344\272\233\350\207\252\351\200\202\345\272\224.md" | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git "a/04 \346\267\273\345\212\240\344\270\200\344\272\233\350\207\252\351\200\202\345\272\224.md" "b/04 \346\267\273\345\212\240\344\270\200\344\272\233\350\207\252\351\200\202\345\272\224.md" index 9038822..7c768eb 100644 --- "a/04 \346\267\273\345\212\240\344\270\200\344\272\233\350\207\252\351\200\202\345\272\224.md" +++ "b/04 \346\267\273\345\212\240\344\270\200\344\272\233\350\207\252\351\200\202\345\272\224.md" @@ -95,7 +95,7 @@ const HelloThreejs: React.FC = () => { #### 目前存在的问题： -可以观察到 canvase 是被硬生生由原本的 高150、像素 宽 300 像素给硬生生拉伸成 100%。 +可以观察到 canvas 是被硬生生由原本的 高150、像素 宽 300 像素给硬生生拉伸成 100%。 所以立方体出现了 扭曲、模糊、锯齿。 @@ -107,14 +107,14 @@ const HelloThreejs: React.FC = () => { #### 第4处修改： -修改 src/components/hello-threejs/index.stx 中 render 函数的代码，让镜头宽高比跟随着 canvase 宽高比，确保立方体不变形。 +修改 src/components/hello-threejs/index.stx 中 render 函数的代码，让镜头宽高比跟随着 canvas 宽高比，确保立方体不变形。 ```diff ... const render = (time: number) => { time = time * 0.001 -+ const canvas = renderer.domElement //获取 canvase ++ const canvas = renderer.domElement //获取 canvas + camera.aspect = canvas.clientWidth / canvas.clientHeight //设置镜头宽高比 + camera.updateProjectionMatrix() //通知镜头更新视椎(视野) @@ -138,7 +138,7 @@ const HelloThreejs: React.FC = () => { const render = (time: number) => { time = time * 0.001 - const canvas = renderer.domElement //获取 canvase + const canvas = renderer.domElement //获取 canvas camera.aspect = canvas.clientWidth / canvas.clientHeight //设置镜头宽高比 camera.updateProjectionMatrix() //通知镜头更新视椎(视野) @@ -531,4 +531,4 @@ https://github.com/mdn/translated-content/pull/817 那么接下来，会系统学习一下 Three.js 的一些基础理论。 -**大楼究竟能改多高，取决于地基有多深，加油！** \ No newline at end of file +**大楼究竟能改多高，取决于地基有多深，加油！** From 6cdca5fb8c31133ec1a72b553f6afddf25281aea Mon Sep 17 00:00:00 2001 From: xsstomy <674371968@qq.com> Date: Thu, 23 Feb 2023 10:47:11 +0800 Subject: [PATCH 2/5] =?UTF-8?q?Update=2012=20Three.js=E5=9F=BA=E7=A1=80?= =?UTF-8?q?=E4=B9=8B=E9=95=9C=E5=A4=B4.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\237\272\347\241\200\344\271\213\351\225\234\345\244\264.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/12 Three.js\345\237\272\347\241\200\344\271\213\351\225\234\345\244\264.md" "b/12 Three.js\345\237\272\347\241\200\344\271\213\351\225\234\345\244\264.md" index 4f625df..2c94190 100644 --- "a/12 Three.js\345\237\272\347\241\200\344\271\213\351\225\234\345\244\264.md" +++ "b/12 Three.js\345\237\272\347\241\200\344\271\213\351\225\234\345\244\264.md" @@ -534,7 +534,7 @@ OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number -### 假设我们在 HelloCamer 示例中使用 OrthographicCamera +### 假设我们在 HelloCamera 示例中使用 OrthographicCamera **需要修改的地方为：** From 4e8c6f56806cad27d91cfeabab5c6af242fc0679 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=A0=E9=85=B8?= Date: Wed, 13 Dec 2023 16:25:20 +0800 Subject: [PATCH 3/5] =?UTF-8?q?Update=2006=20=E5=9B=BE=E5=85=83=E7=BB=83?= =?UTF-8?q?=E4=B9=A0=E7=A4=BA=E4=BE=8B.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\205\203\347\273\203\344\271\240\347\244\272\344\276\213.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/06 \345\233\276\345\205\203\347\273\203\344\271\240\347\244\272\344\276\213.md" "b/06 \345\233\276\345\205\203\347\273\203\344\271\240\347\244\272\344\276\213.md" index 5f29df9..a9bc94a 100644 --- "a/06 \345\233\276\345\205\203\347\273\203\344\271\240\347\244\272\344\276\213.md" +++ "b/06 \345\233\276\345\205\203\347\273\203\344\271\240\347\244\272\344\276\213.md" @@ -112,7 +112,7 @@ const HelloPrimitives = () => { scene.add(light0) const light1 = new Three.DirectionalLight(0xFFFFFF, 1) - light0.position.set(1, -2, -4) + light1.position.set(1, -2, -4) scene.add(light1) //获得各个 solid 类型的图元实例，并添加到 solidPrimitivesArr 中 From b74c77c3e9e86bc53bb6f1b49819e7a2db2e67a9 Mon Sep 17 00:00:00 2001 From: puxiao Date: Fri, 9 Feb 2024 18:47:36 +0800 Subject: [PATCH 4/5] Update README.md --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3aeafc1..39ed2db 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,13 @@ 从今天 2020年11月27日 开始学习和探索 Three.js 。 + +
+

+wechat.jpg +

+ +
> 以下内容更新于 2021.04.16 @@ -417,4 +424,3 @@ https://www.bilibili.com/video/BV1X7411F744
**大家都是 Three.js 小白新手，一起加油！** - From 6d89d9ce43db564046af487485121b9dce3919ba Mon Sep 17 00:00:00 2001 From: puxiao Date: Tue, 5 Mar 2024 01:09:58 +0800 Subject: [PATCH 5/5] =?UTF-8?q?Update=2003=20=E7=BC=96=E5=86=99HelloThreej?= =?UTF-8?q?s.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "03 \347\274\226\345\206\231HelloThreejs.md" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/03 \347\274\226\345\206\231HelloThreejs.md" "b/03 \347\274\226\345\206\231HelloThreejs.md" index 9992898..3a5fd8d 100644 --- "a/03 \347\274\226\345\206\231HelloThreejs.md" +++ "b/03 \347\274\226\345\206\231HelloThreejs.md" @@ -65,7 +65,7 @@ const scene = new Scene() 1. 渲染器 > 本文示例采用的渲染器是 WebGLRenderer 2. 透视镜头 > 本文示例采用的是 PerspectiveCamera -3. 场景 > Scen +3. 场景 > Scene **场景可见元素：** @@ -76,7 +76,7 @@ const scene = new Scene() **补充说明：** -你应该发现，除了 场景(Scen)、网格(Mesh) 之外，其他的元素我都注明 “本文示例采用的是...”。 +你应该发现，除了 场景(Scene)、网格(Mesh) 之外，其他的元素我都注明 “本文示例采用的是...”。 因为无论渲染器，还是几何体，以及其他元素，Three.js 都内置了非常多不同种类的元素构造函数，这个会在以后学习中逐渐详细说明举例。