普通视图

发现新文章,点击刷新页面。
昨天以前Bambooom

Three.js Journey Notes 5 - Advanced Techniques Part3

2025年3月17日 08:00

课程链接: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

2025年3月16日 08:00

课程链接: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

2025年3月11日 08:00

课程链接: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

2025年3月10日 08:00

课程链接: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

2025年2月26日 08:00

课程链接: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 是个挺重要的概念,之后再好好了解)

❤️

2025年1月12日 08:00

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

NeoDB shortcode 更新

2025年1月8日 08:00

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

Don’t Panic❗️

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

2024 总结

2025年1月2日 08:00

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

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

时隔5年的霓虹旅行(五)由布院+回到福冈

2024年11月23日 08:00

11.15 由布院+由布院之森+大濠公园

去由布院

我唯一提前买了指定席的是今天中午从由布院出发的由布院之森。 其实本来是想买这天下午从别府出发的由布院之森,结果没票了。。。只有从由布院出发的有座位。 但是我就得自己找方法先去到由布院。

时隔5年的霓虹旅行(四)别府

2024年11月23日 08:00

11.14 阿苏男孩+别府

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

时隔5年的霓虹旅行(二)札幌(下)

2024年11月21日 08:00

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

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

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

时隔5年的霓虹旅行(一)札幌(上)

2024年11月20日 08:00

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

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

2024年6月28日 08:00

如标题,在 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 张表:

粗糙的整理收纳心得

2024年6月7日 08:00

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

也白嫖 Cloudflare R2 当图床了

2024年5月24日 08:00

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

build 和 upload 是最耗时间的。

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

Now

2025年1月14日 08:00
  • 裁员失业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 构建博客了

2024年3月6日 08:00

为什么换 Hugo 了

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

2023 总结

2023年12月31日 08:00

2023 终于来到了最后一天。

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

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

Real 打工故事

2023年12月30日 08:00

在这个时间点更新,以为是年终总结么?不好意思并不是😬,但今年真的会更新的(nbcs

起因是半个月前在草莓显有象友在公共留言板发了一条

年末了想问问已经有工作或者曾经有工作的象友,你们的第一份工作给你们什么样的感受?它有在你们的人生中帮助到你们吗(物质/对个人的成长/对世界的了解)很想听听象友们的故事。这个问题来自一个不敢去找工作的成年人成年人😢

久违的更新

2023年10月6日 08:00

国庆长假的最后一天,久违地更新一下博客吧。

长假开始的时候曾经写过一个小计划,因为不打算出门,所以这个长假里想做的事,大致上是这么一个list:

  • 学习相关:
    • ✅ cs50x 把视频看完,计划 final project
    • ✅ 某个鸡肋的在线课程上完拉倒
    • ✅ 每天 Leetcode 还是坚持 1-2 题吧
    • ✅ 读完 Hello 算法
      • 最后几章看得很迷糊,可能还得多看几遍
    • ❎ Leetcode DOM Testing
      • 题目太多了,规定时间没做完,蒜了
  • 娱乐相关:
    • ✅ 奥本海默
    • ✅ 冰海战记 第二季
    • ✅ 曼达洛人 第三季
    • ✅ 时光代理人 第二季
    • ✅ 乐夏 第三季最近两周的更新
  • ✅ Linear issue migrated to Height
    • Linear 免费版有 250 issue 的限制,Height 的限制是 1000 个
  • ✅ New Blog by astro,现在看到的这个就是最新的皮肤,还有些细节功能会晚点加上,比如评论
  • ❓ 更新一篇全网最晚的 2022 总结的博客

计划基本都完成了,其他时间经常是在看杰尼斯的八卦新闻或者随意刷刷b站和油管视频。

2021 平淡

2022年1月3日 08:00

老实说,2021 真的过得很平淡了,我翻手机相册翻了好久,然后真的觉得好像今年没发生什么特别的事。

出远门

上半年回过两次武汉,一次是表哥结婚(当迎娘),一次是表妹结婚(当伴娘)。 表哥和表妹的对象,似乎都挺好的。然后,还好他们都不会来干涉我自己的事,当然也因为就我一个人不在武汉。 一直以来,我都觉得自己算很幸运的人,亲戚们从来都不是 SNS 上看到的那些很可怕的例子的样子, 大家都是有心的,我从没有反感或者惧怕过年回家见亲戚这回事儿,不知道是不是少数派。

map of 13.67

2021年10月23日 08:00

幾年前就知道這本小說,陳浩基的《13.67》,聽說作者就是中大畢業的,然後就一早列入了想看的列表。 但我已經很多年沒認真看書了(說真的,不管紙質還是電子書,都看不進去,連毫無負擔的網文甚至小基文我都很久沒看過了), 所以也一直沒有真正行動過。

毫无感情的南京流水账

2021年10月5日 08:00

https://www.douban.com/note/814012678/ (豆瓣发不出来,留个 link)

被叔叔婶婶安排的吃住,蹭了整整 4 天 😂 ,纯粹留个记录。

9 月 30 号

早上飞机去南京,中午被接到钟山风景区里面的一个私房菜+民宿的小院子,这里住了 4 晚。环境相当不错,挺推荐的,叫未见山东郊书房。 位置就在明孝陵 4 号门旁边,早上 6 点半之前可以免票(正常一张票价 70)蹭进明孝陵里去转转,当做是普通公园的话也不错,里面也挺多早锻炼的中老年人。我妈特别喜欢这个住宿。

Paradox Live 听碟记录

2021年5月23日 08:00
original link: https://www.douban.com/note/803479251/ Paradox Live 是在ヒプノシスマイク 听碟记录 里提到过的另一个类似的声优 Rap 计划,角色、声优、歌都是完全不一样的。本来只听了歌觉得没有那么喜欢,无意认

让人生气

2021年3月12日 08:00
公司 office 所在园区通知说下周开始要用门禁进入了,这个门禁说只支持人脸识别。。。。。 我拒绝,为啥上个班还得提供人脸信息????? 不提供比如门禁卡之

2020 恍惚

2021年1月1日 08:00
如题,2020 年过得感觉很恍惚,一部分可能是年纪渐长就一定会产生的幻觉,一部分也可能是今年过于魔幻。 前两天看到一位推友开玩笑说自己有个刻板印

2009 年的湖北省博

2020年12月12日 08:00
original link: https://www.douban.com/note/787704919/ 意外发现 google photos 里存了 2009 年初去湖北省博时的照片,虽然不记得什么时候上传的,那就放出来康康 🌚 青花四爱图梅瓶(元) 真的,当年见过这只。。。 这个

GitHub Package Registry 简单试用记录

2020年5月26日 08:00

简单记录下 GitHub Package Registry 怎么用

Example Repo: gh-pkg-demo

How to use GitHub Package Registry

1. Generate Personal Access Token

  • To download and install packages from GitHub Package Registry, you need a token with read:packages and repo scopes.
  • To upload and publish packages, you need a token with write:packages and repo scopes.
  • To delete a package with specified version, you need a token with delete:packages and repo scopes

Generate the token according to your need.

2. Local config TOKEN

Add the generated token to the local file ~/.npmrc like:

//npm.pkg.github.com/:_authToken=TOKEN

Create the file ~/.npmrc if it doesn't exist. This is the global user config file for npm.

If you don't want to set TOKEN locally, then one should log in by npm login command and input the info of your GitHub account with prompt like:

$ npm login --registry=https://npm.pkg.github.com
> Username: USERNAME
> Password: TOKEN
> Email: PUBLIC-EMAIL-ADDRESS

3. Project Config to publish to GitHub

Edit the package.json file to specify the registry as GitHub. And also the package name must be scoped with the onwer, @OWNER/PKG-NAME.

--- "name": "gh-pkg-demo",
+++ "name": "@bambooom/gh-pkg-demo",
+++ "publishConfig": {
+++   "registry": "https://npm.pkg.github.com/"
+++ },

Alternative way to config the project is using local .npmrc file. That is adding a local .npmrc under project root, and adding this to the file:

registry=https://npm.pkg.github.com/OWNER

4. Publish packages

To publish the package to GitHub, just use the command:

$ npm publish

You can see the package on GitHub:

5. Install packages

To install packages from GitHub package registry, need a local .npmrc file to set the registry.

registry=https://npm.pkg.github.com/OWNER

But if only using this setting, all package requests will go through GitHub Packages.

You also need to add the .npmrc file to your project so all requests to install packages will go through GitHub Packages. When you route all package requests through GitHub Packages, you can use both scoped and unscoped packages from npmjs.com.

So, the github package requests will do the check whether the package can be found on github. If not, it will go to npmjs.com to search for the packages.

However, I found that the check request will time out randomly (may be due to GFW). I'd like to skip the check for those packages I want to download from npmjs.com.

I try to change the setting in .npmrc like this to achive this goal:

registry=https://registry.npmjs.org/
@OWNER:registry=https://npm.pkg.github.com

With this setting, default registry is npmjs.com. Only @OWNER's packages use the GitHub registry.

Then use the command to install:

npm install @bambooom/gh-pkg-demo

Look inside package-lock.json, the package is resolved by GitHub registry like:

"@bambooom/gh-pkg-demo": {
  "version": "1.0.0",
  "resolved": "https://npm.pkg.github.com/download/@bambooom/gh-pkg-demo/0.0/0ec13dcce4a2f9510111a8b88957c3436a0e04633d0208aa71dfa5f7804b67ff",
  "integrity": "...."
},

Refs

❌
❌