threejs-earth-render

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Three.js Earth Render

Three.js 地球渲染

Workflow

工作流程

Use
```
scripts/render_threejs_earth.py
```
from this skill.
Pass
```
--workspace
```
when the user specifies where the source checkout should live; otherwise use the current directory.
Pass
```
--output
```
when the user specifies a GIF/MP4 path; otherwise use
```
out/threejs-earth.gif
```
.
For customized routes, edit
```
threejs-earth/src/routeConfig.js
```
first and render with
```
--skip-update
```
so local edits are preserved.
Run the script and wait for completion.
Return the final absolute output path printed by the script.

使用本技能中的
```
scripts/render_threejs_earth.py
```
脚本。
若用户指定了源码存放路径，需传入
```
--workspace
```
参数；否则使用当前目录。
若用户指定了GIF/MP4输出路径，需传入
```
--output
```
参数；否则默认输出到
```
out/threejs-earth.gif
```
。
如需自定义航线，请先编辑
```
threejs-earth/src/routeConfig.js
```
，并添加
```
--skip-update
```
参数执行渲染，以保留本地修改。
运行脚本并等待完成。
返回脚本输出的最终绝对路径。

Command

命令

bash

/usr/local/bin/python3 scripts/render_threejs_earth.py \
  --workspace "$(pwd)" \
  --output "$(pwd)/out/threejs-earth.gif"

bash

/usr/local/bin/python3 scripts/render_threejs_earth.py \
  --workspace "$(pwd)" \
  --output "$(pwd)/out/threejs-earth.gif"

Installed Skill Resolution

已安装技能调用方式

Use the installed skill copy, not the source repo checkout:

bash

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/threejs-earth-render" ]; then
    skill_dir="$base/skills/threejs-earth-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "threejs-earth-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

/usr/local/bin/python3 "$skill_dir/scripts/render_threejs_earth.py" \
  --workspace "$(pwd)" \
  --output "$(pwd)/out/threejs-earth.gif"

使用已安装的技能副本，而非源码仓库克隆版本：

bash

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/threejs-earth-render" ]; then
    skill_dir="$base/skills/threejs-earth-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "threejs-earth-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

/usr/local/bin/python3 "$skill_dir/scripts/render_threejs_earth.py" \
  --workspace "$(pwd)" \
  --output "$(pwd)/out/threejs-earth.gif"

Behavior

行为说明

Repository source is fixed to

https://github.com/vibe-motion/threejs-earth.git

by default.

Reuse
```
workspace/threejs-earth
```
if it exists; otherwise clone it.
If the repo already exists, fetch and fast-forward the target branch unless
```
--skip-update
```
is passed.
Serve the Three.js app through a local HTTP server; do not open it with
```
file://
```
.
Use Puppeteer, not Remotion, because this is a browser-based 3D scene.
Seek each frame through
```
window.__SCENE_3D_EXPORT__.setFrame(frame)
```
so frames are independently reproducible.
Capture a PNG frame sequence, then encode
```
.gif
```
or
```
.mp4
```
with
```
ffmpeg
```
.
Default render is a 30 fps GIF at 448 px wide. Use
```
--output-width 0
```
to keep the native 2048 x 1152 capture.

默认仓库源为

https://github.com/vibe-motion/threejs-earth.git

。

若
```
workspace/threejs-earth
```
已存在则复用，否则进行克隆。
若仓库已存在，会拉取并快进目标分支，除非传入
```
--skip-update
```
参数。
通过本地HTTP服务器运行Three.js应用；请勿使用
```
file://
```
协议打开。
使用Puppeteer而非Remotion，因为这是基于浏览器的3D场景。
通过
```
window.__SCENE_3D_EXPORT__.setFrame(frame)
```
定位每一帧，确保帧可独立重现。
先捕获PNG帧序列，再使用
```
ffmpeg
```
编码为
```
.gif
```
或
```
.mp4
```
格式。
默认渲染为30帧/秒、宽度448像素的GIF。使用
```
--output-width 0
```
可保留原生2048 x 1152的捕获分辨率。

Project Notes

项目说明

Default route is Hangzhou to Paris in
```
src/routeConfig.js
```
.
The app exports a 16:9 scene at 2048 x 1152 for
```
--render-scale 1
```
and 4096 x 2304 for
```
--render-scale 2
```
.
The scene uses CDN imports for Three.js and local high-resolution Earth texture assets, so network access is required on first load.

默认航线为
```
src/routeConfig.js
```
中定义的杭州至巴黎路线。
当
```
--render-scale 1
```
时，应用导出16:9比例、2048 x 1152分辨率的场景；
```
--render-scale 2
```
时导出4096 x 2304分辨率的场景。
场景使用CDN引入Three.js，并使用本地高分辨率地球纹理资源，因此首次加载需要网络访问。

Requirements

环境要求

```
git
```
```
node
```
```
npm
```
```
ffmpeg
```
network access for clone/update, CDN imports, and Puppeteer installation

```
git
```
```
node
```
```
npm
```
```
ffmpeg
```
网络访问权限（用于克隆/更新仓库、CDN资源引入及Puppeteer安装）