❌

阅读视图

发现新文章，点击刷新页面。

Three.js Journey Notes 5 - Advanced Techniques Part3

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

课程链接：three.js journey

其他几篇：

Realistic Render

Tone Mapping

intends to convert High Dynamic Range (HDR) values to Low Dynamic Range (LDR) values. Tone mapping in Three.js will actually fake the process of converting LDR to HDR even if the colors aren’t HDR resulting in a very realistic render.

// Tone mapping
renderer.toneMapping = THREE.ACESFilmicToneMapping
// adjust exposure, influencing the amount of light allowed into the scene
// higher make the scene more bright
renderer.toneMappingExposure = 2

There are multiple possible values:

Three.js Journey Notes 4 - Advanced Techniques Part2

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

课程链接：three.js journey

其他几篇：

Raycaster and Mouse Events

Raycaster is used to detect if there is a wall in front of the player, or test if the laser gun hit something, test if something is currently under the mouse to simulate mouse events, etc.

/**
 * Raycaster
 */
const raycaster = new THREE.Raycaster()
const rayOrigin = new THREE.Vector3(- 3, 0, 0)
const rayDirection = new THREE.Vector3(10, 0, 0)
rayDirection.normalize() // make sure vector is 1 unit long

raycaster.set(rayOrigin, rayDirection)

// get objects intersect
const intersect = raycaster.intersectObject(object2)
console.log(intersect) // result is also array with only 1 object

const intersects = raycaster.intersectObjects([object1, object2, object3])
console.log(intersects)

If we need to test on each frame, we need to test in tick function like:

Three.js Journey Notes 3 - Advanced Techniques Part1

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

课程链接：three.js journey

其他几篇：

Physics

We need to add physics library. The idea is that we add a physics world which is purely theoretical. We cannot see it. So when we create a Three.js mesh, we also create a version of that mesh inside physics world, like projected one in physics world. So on each frame, physics world update itself, we take the coordinates of the projected physics object and then apply them to the corresponding Three.js mesh.

Three.js Journey Notes 2 - Classic Techniques

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

课程链接：three.js journey

其他几篇：

Lights

basically walk through all lights types to demonstrate them one by one and feel what they can do.

  • AmbientLight
    • applies omnidirectional(全方向的) lighting on all geometries of the scene.
    • good to simulate light bouncing around the scene
    • cannot be used to cast shadows as it does not have a direction
  • DirectionalLight
    • coming from same direction, parallel, like the Sun
    • can cast shadows
  • HemisphereLight
    • similar to the AmbientLight but with a different color fading from the sky to the color coming from the ground.
    • Faces facing the sky will be lit by one color while another color will lit faces facing the ground.
    • cannot be used to cast shadows
  • PointLight
    • almost like a lighter, light source is infinitely small, and the light spreads uniformly in every direction
    • can cast shadows
  • RectAreaLight
    • like a big rectangle lights you can see on the photoshoot set, big plane lighting
    • can be used to simulate light sources such as bright windows or strip lighting
    • only works with MeshStandardMaterial and MeshPhysicalMaterial
    • cannot be used to cast shadows
  • SpotLight
    • like flashlight, 手电筒🔦聚光灯效果
    • gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets
    • can cast shadows

Performance

Add as few lights as possible and try to use the lights that cost less

Three.js Journey Notes 1 - Basics

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

课程链接：three.js journey

前年买了一门课，去年断断续续学了一两个月，搁置了5个月，今年继续学。 先复习之前的课记个笔记。

没有追求写得很通顺，中英胡乱混合ing

其他几篇：

why use Three.js

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

WebGL 是用的 GPU 来绘制的，GPU 有很多 parallel workers，所以很快。 怎么放置 points 每个 pixel 如何画都是在 shaders 里定义的。(shader 是个挺重要的概念，之后再好好了解)

❤️

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

之前在一个外国开发者 benji 的博客里发现文章末有个❤️，随手点了下就 Like 上了，感觉很简洁很可爱，遂打开 devtools 看了下， 发现了这个 <open-heart> 元素，具体搜索了一下之后，就想着给自己博客也安上了。 记录一下大概过程，给有想要给自己博客或者其他任何地方用上玩玩的人参考。

NeoDB shortcode 更新

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

突然的，更新了一下本地的 hugo，从 0.12x 一下子更新到了 0.140。 然后本地启动博客 hugo server 出现了一堆报错。

Don’t Panic❗️

按照报错一条一条解决一下就好啦。主要就是一些 function deprecated，一般会提示用什么替代。 然后发现最大需要改动的是 NeoDB shortcode。

2024 总结

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

这次没什么主题，想到什么写什么。

2024年只上了4个月班，然后经历了第二次裁员，有种果不其然的感觉，小外包也没得做了😅 反正过了很久了，直接说了，做外包的公司就是字节，我在飞书的一个小部门打杂。

时隔5年的霓虹旅行（四）别府

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

11.14 阿苏男孩+别府

也是很早就起床了，而且带上了一个晚上的行李，这天会去别府住一晚，福冈的床位最初是直接订了4个晚上。 出发大概10天前和酒店和Booking 沟通能否只取消第三个晚上。 得到的回复是不行，要么就更改订单只订前两个晚上，再另外订最后一个晚上，但因为看起来福冈的住宿很紧张，最后那天的住宿也很担心订不订得到， 最终就没有改这个订单，也因为沟通的时候被告知虽然是连续订了4个晚上，但其实每个晚上的价钱不一样，这天的价钱大概是300多rmb，最贵的是最后一个晚上。 想了想，300多块就当是给自己买个方便吧，行李箱至少可以放在这里了，我去别府玩可以很轻松。

时隔5年的霓虹旅行（二）札幌（下）

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

11.10 小樽+北海道神宫+Parco+AOAO水族馆

这天算比较悠闲了，虽然一天下来还是走了2.5w步。

前一晚的民宿只拼了一个晚上，所以早上起来又是收拾行李退房然后步行去另一个酒店，这次比较近，可以步行。 其实本来做行程的时候，发现民宿离二条市场很近，本来安排去二条市场吃个海鲜丼当早饭，不过前一晚的泡面吃得太晚，感觉完全没消化，不太有胃口。 而且我搜索二条市场的店，评价比较好的都还挺贵的，也正常，于是就直接放弃了二条市场。

时隔5年的霓虹旅行（一）札幌（上）

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

上一次去霓虹是 2019 年 12 月，正好在疫情前。其实去年开放签证之后也想去来着，但是种种原因没有能去，今年因为一些契机去了，是时隔 5 年的霓虹旅游。 具体来说，直到 9 月中旬也没有特别想去的，9 月下旬人生第一次演唱会抽票抽中，是札幌蛋的首日，11 月 9 日。 当时和几位追星认识的朋友报告了一下这个结果，不过当时想的并不是一定要去，毕竟订机票酒店办签证等一系列流程都很费劲。 也想过直接卖掉票，也许还能赚到点差价（。）

记录一下整理订阅记录 Notion 表格的过程

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

如标题，在 Notion 里整理了大致的订阅记录数据。

  1. 搜索了一下，搜出 Notion 的一篇模版介绍：Top 10 Free Subscription Tracker Templates
  2. 这 10 个模板里面大致了解或者简单试用了一下之后，比较喜欢第 6 个模板，所以 Duplicate 了它
  3. 本以为就继续直接填订阅的服务/内容和价格数字就可以了，结果发现如下问题：
  • 老外做的模板，首先 Currency 显示的都默认是 USD。
    • 这个不是大事，就是得所有和数字相关的地方都得手动修改一下 format 为 yuan。
    • 不过，其实有的服务我支付的其实也是 USD，但全都换算成了 CNY，是为了方便统计。汇率会尽量使用支付的时间点的汇率。
  • 几乎所有的模板都有个通病，默认每年都是一样的价钱。实际上，每年的价钱都可能不一样，遇到优惠活动是会不一样的。
  • 默认一年就是标准的 365 天，今年是 10 月 26 日开始，那么服务截止就是明年的 10 月 26 日。实际上不是每家公司都是这样，有的认为一年是 372 天，有的认为一年是 366 天。还有些会因为优惠活动额外 bonus 一天一周或一月，这些全都会导致服务到期的时间并不是可以简单 formula 计算的。
  • 没考虑过买断制的情况。
  1. 爆改模板，主要是改数据库结构
  2. 在各个地方找回/搜集订阅的服务的相关数据，填入表格

总的来说，我的思路是，基础的 Database 应该有 4 张表：

粗糙的整理收纳心得

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

昨天跟一位朋友说（第二次）失业后的上个月，主要在整理新房子里的东西，更准确说是书房。对方的反应是“整理这么久啊”。虽然我也不是说花了百分百的时间（可能也就一半时间吧）， 但就想反驳他似乎觉得整理收纳不花时间的想法，当场大致总结了下整理的步骤回复给他。 我的意思是想证明这是需要花时间和精力的，家庭主妇也是有技术含量的，遂坐在地铁上激情输出如下步骤，仅供参考。

也白嫖 Cloudflare R2 当图床了

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

换成 Hugo 后一直很头疼博客的部署耗时，基本上的用时是 5-6 分钟：

build 和 upload 是最耗时间的。

build 这一步在我本地其实只需要 1-2s，在 GitHub Actions 中跑 workflow 因为没有 cache 所以 build 和 upload 都很慢。 所以很早就萌生还是需要图床的想法了。

Now

✇Bambooom
zhuzi.mn#gmail.com (bambooom)
  • 裁员失业8个月，靠点兼职零工收入过活，打算过完年开始揾份正式工
    • 大龄菜鸡求各位神仙上帝保佑，不要太为难我，给口饭吃
  • 虽然穷但不会放弃看 live
    • Monkey Majik ⭐️⭐️⭐️⭐️⭐️
    • Cody Lee
    • I don’t like Mondays.
  • 最近一个月开始喜欢上出门逛公园或者徒步，可能因为搬到了郊区，有很多公园可以去。爬山也尝试过，不过不太利索，主要是下山感觉对膝盖确实不太好。可能多练练就好了吧。
    • 开始喜欢徒步是不是每个中年人必经之路🤣
    • 也主要是因为我没事做的话实在不会出门，出门逛公园散步感觉很轻松很自在，是我能出门的理由

2025 Goal

Focus

  • 过完年找份 fulltime 工

Habit

  • 坚持读书习惯，每天10-30分钟就好，
    • 有好多书以前买的，放得快发黄了都没看，继续清扫纸质书库存
    • 看过觉得没必要留着的可以捐去附近的图书馆，捐了书还可以换别的书回来
  • 坚持运动习惯
    • 2024 已经减下 10 斤，今年如果可以想继续减 5-10 斤，以及需要增肌塑形
  • 想每个月都去公园散步/徒步 2-3 次，夏天太热就一个月 1 次就好😂
  • 坚持记账，现在是在用 iCost
  • 多做饭，少叫外卖
  • 规划好做家务周期

Learn

都是 2024 没学（完）的东西 🤦🏻‍♀️

换成用 Hugo 构建博客了

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

为什么换 Hugo 了

1 月底又开始折腾，换成 Hugo 来构建博客了，原因是觉得之前用的 astro build 不够快，本地也慢。 以前给前司搞公司博客的时候，用 Hugo 处理起来速度飞快，体验极好。 就也想给自己的博客换成 Hugo 了。

2023 总结

✇Bambooom
zhuzi.mn#gmail.com (bambooom)

2023 终于来到了最后一天。

今年的主题大概是恢复正常。

如 10 月的更新写过的，1 月上半个月也有些面试啥的在进行，不过最终都没有结果。 于是放弃了，打算过完年再说。

❌