
## 前文
- [用 Babylon.js 画火箭 - 1：使用 Mesh](build-rocket-with-babylon-js)

## 正文
前文提到了用 Babylon.js 里的 Mesh 画了一个火箭模型。

使用的是最原始的方法：把火箭拆成几个部分，每个部分是一个基础的几何形状，最终通过设置各部分的位置，使其看起来像一个整体。

但是如果我们想让这个火箭动起来，那么很自然地就会想到把它作为一个整体来操作，而不是对它地每个零部件单独操作。

于是搜索了一下，找到了官方文档里对组合部件的介绍——[《https://doc.babylonjs.com/divingDeeper/mesh/mergeMeshes》](https://doc.babylonjs.com/divingDeeper/mesh/mergeMeshes)。里面提到了官方提供的两种方式（两个 API），一种是使用 `Mesh.MergeMeshes` 把一组 Mesh 合成一个 Mesh；另一种是使用 CSG（Constructive Solid Geometry），把每个 Mesh 转成 CSG 再合并，然后再把合并得到的 CSG 转回 Mesh。

[CSG](https://doc.babylonjs.com/typedoc/classes/babylon.csg) 可以用来实现更复杂的组合方式，支持 subtract, inverse, union, and intersect 等等多种组合方式。例如用 `substract` 可以从一个几何体里面“掏空”另一个几何体的空间，得到一个“镂空”的几何体。可以看到文档里的[例子](https://playground.babylonjs.com/#L5T0DK)，用 `substract` 实现了一个中空的管子。

## 使用 `Mesh.MergeMeshes`

回到画火箭的场景，我们用 `MergeMeshes` 来实现的逻辑大概是这样：

```typescript
// 只展示相关逻辑代码，省略其他代码

class App {
  constructor() {
    // ...

    // 主火箭
    const rocketMain = this._createRocket('main', 10, 2, 0, 0, 0, scene)
    // 辅助推进器——体积较小的火箭
    const rocket1 = this._createRocket('r1', 4, 1, 1.5, -3, 0, scene)
    // 一边一个
    const rocket2 = this._createRocket('r2', 4, 1, -1.5, -3, 0, scene)

    // 每个火箭都是一个 Mesh，把它们组装成一个整体（也是 Mesh），可以直接改变整体的位置
    const rocketWhole = Mesh.MergeMeshes([rocketMain, rocket1, rocket2])
    // 将火箭中心点（origin）的 y 坐标设为 5，即整个火箭上移 5
    rocketWhole.position.y = 5

    // ...
  }

  /**
   * 封装了一个绘制火箭的方法。
   * 火箭由三个部分组成：箭头、箭体、箭尾（就是底部喷火的地方，不知道术语叫什么，暂时先叫它箭尾吧）
   */
  private _createRocket(
    // 实体名称
    name: string,
    // 箭体高度
    height: number,
    // 箭体直径
    diameter: number,
    // 箭体的坐标
    x: number,
    y: number,
    z: number,
  ) {
    // ...
    // 创建三个部件的逻辑与之前相同

    // 把三个部分组装成一个整体，返回合并后的 Mesh 实例
    const rocketMesh = Mesh.MergeMeshes([coneHead, cylinder, coneTail])
    return rocketMesh
  }
}

```

效果如下：
![合并Mesh](https://ddr8pbswx1255.cloudfront.net/rocket-model-2.png)

放大图片，从左边的 Nodes 里可以看到，整个火箭是一个 Mesh，并且空间位置比之前整体上移了 5。

MergeMeshes 的文档里有一个纯手写的合并函数，[演示了 MergeMeshes 的内部逻辑](https://doc.babylonjs.com/divingDeeper/mesh/mergeMeshes#use-your-own-merge-function)，。还没仔细看。改天看一下，搞清楚合并原理。

## 使用 `CSG`
如果使用 `CSG` 来合并，代码大致如下：

```typescript
class App {

  // ...

  private _createRocket() {
    // ...

    // 把三个部分都转成 CSG
    const headCSG = CSG.FromMesh(coneHead)
    const bodyCSG = CSG.FromMesh(cylinder)
    const tailCSG = CSG.FromMesh(coneTail)
    // 使用 CSG 的 union 方法来合并，因为其返回值是合并后的新 CSG，所以可以链式调用
    const rocketCSG = headCSG.union(bodyCSG).union(tailCSG)
    // 把合并生成的 CSG 转回 Mesh
    const rocket = rocketCSG.toMesh('rocket', null, scene)
    // 销毁之前创建的 Mesh。可以把它们理解为创建 CSG 的原材料，现在不需要了。
    coneHead.dispose()
    cylinder.dispose()
    coneTail.dispose()
    // 从场景里删除废弃的 Mesh
    scene.removeMesh(coneHead)
    scene.removeMesh(cylinder)
    scene.removeMesh(coneTail)

    return rocket
  }
}
```

可以实现同样的效果。

对于 `CSG` 的各种合并方法的具体行为，还没有仔细看，也需要看一下。

## ToDo
1. [ ] 搞清楚 `Mesh.MergeMeshes` 的实现原理。
2. [ ] 搞清楚 `CSG` 各种合并方法的具体行为。

用 Babylon.js 画火箭 - 2：合并 Mesh


今天初步学了一下 [Babylon.js](https://www.babylonjs.com/)，参考[新手教程](https://doc.babylonjs.com/guidedLearning/createAGame/gettingSetUp)把项目架子搭了起来。

随后在文档里寻找了一番，找到了可以画圆柱体的 API（[MeshBuilder.CreateCylinder](https://doc.babylonjs.com/divingDeeper/mesh/creation/set/cylinder)）。厉害的是，它不光可以画圆柱体，还能画圆锥体。这俩一组装，不就是火箭吗？于是就试着捣鼓了一下，算是把一个简单的火箭画了出来。

效果如下：

<figure>
  <video controls="true" allowfullscreen="true">
    <source src="https://ddr8pbswx1255.cloudfront.net/rocket-model-1.min.mp4" type="video/mp4">
  </video>
  <figcaption>简单的火箭模型</figcaption>
</figure>

下次试试画一个喷射的火焰效果，加在火箭底部，就更有感觉了😁。

完整代码如下：

```typescript

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, Mesh, MeshBuilder } from "@babylonjs/core";

class App {
  constructor() {
    // create the canvas html element and attach it to the webpage
    var canvas = document.createElement("canvas");
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.id = "gameCanvas";
    document.body.appendChild(canvas);

    // initialize babylon scene and engine
    var engine = new Engine(canvas, true);
    var scene = new Scene(engine);

    // 镜头
    var camera: ArcRotateCamera = new ArcRotateCamera(
      "Camera",
      Math.PI / 2,
      Math.PI / 2,
      20,
      Vector3.Zero(),
      scene
    );
    camera.attachControl(canvas, true);

    // 光源
    var light1: HemisphericLight = new HemisphericLight(
      "light1",
      new Vector3(10, 5, 5),
      scene
    );

    // 主火箭
    this._createRocket('main', 10, 2, 0, 0, 0)
    // 辅助推进器——体积较小的火箭
    this._createRocket('r1', 4, 1, 1.5, -3, 0)
    // 一边一个
    this._createRocket('r2', 4, 1, -1.5, -3, 0)

    // hide/show the Inspector
    // 快捷键唤起 Babylon.js 的调试工具，非常有用，可以让你看到每个实体占据的立体空间，便于计算和调整坐标。
    window.addEventListener("keydown", (ev) => {
      // Shift+Ctrl+Alt+I
      if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
        if (scene.debugLayer.isVisible()) {
          scene.debugLayer.hide();
        } else {
          scene.debugLayer.show();
        }
      }
    });

    // run the main render loop
    engine.runRenderLoop(() => {
      scene.render();
    });
  }

  /**
   * 封装了一个绘制火箭的方法。
   * 火箭由三个部分组成：箭头、箭体、箭尾（就是底部喷火的地方，不知道术语叫什么，暂时先叫它箭尾吧）
   */
  private _createRocket(
    // 实体名称
    name: string,
    // 箭体高度
    height: number,
    // 箭体直径
    diameter: number,
    // 箭体的坐标
    x: number,
    y: number,
    z: number,
  ) {
    // 箭体是一个圆柱体
    const cylinder = MeshBuilder.CreateCylinder(name + "Cylinder", {
      height,
      diameter,
    });
    cylinder.position.x = x
    cylinder.position.y = y
    cylinder.position.z = z

    // 箭头是一个圆锥体，直径与箭体相同，高度是箭体的 1/5
    const headHeight = height / 5
    const coneHead = MeshBuilder.CreateCylinder(name + 'ConeHead', {
      height: headHeight,
      diameterTop: 0,
      diameterBottom: diameter,
    })
    coneHead.position.x = x
    // 箭头与箭体刚好衔接在一起
    coneHead.position.y = y + (headHeight + height) / 2
    coneHead.position.z = z

    // 箭尾是一个顶面较小，底面较大的圆柱体（还算是圆柱体吗？），有点像烟囱
    const tailHeight = height / 10
    const coneTail = MeshBuilder.CreateCylinder(name + 'ConeTail', {
      height: tailHeight,
      diameterTop: diameter * 0.5,
      diameterBottom: diameter * 0.8,
    })
    coneTail.position.x = x
    // 箭尾一半嵌在箭体里，一半在箭体外面
    coneTail.position.y = y - height / 2
    coneTail.position.z = z
  }
}
new App();
```

调试工具的效果如下：
![调试工具](https://ddr8pbswx1255.cloudfront.net/rocket-model-1.png)

调试过程中遇到的一个问题是，有时候从其他页面或者从编辑器切换到调试页面，电脑显示器会黑屏几秒再恢复。

## Next
- [用 Babylon.js 画火箭 - 2：合并 Mesh](babylon-js-part-2-merging-meshes)

用 Babylon.js 画火箭 - 1：使用 Mesh


今天在腾讯视频上看完了动画电影[《天气之子》](https://movie.douban.com/subject/30402296/)。

凭着有限的记忆写一下故事梗概，因为是断断续续在几天内看完的，所以必然有不准确的地方。

少女阳菜在东京的医院里陪护母亲。窗外大雨连连，阳菜希望天气可以放晴，阳光可以照进病房。于是她跑到了一座废弃的楼房的楼顶，那里有一个像神坛一样的地方。在阳菜对着天空虔诚许愿之后，仿佛有神明显灵一般，她所在的那片区域奇迹般地放晴了，阳光穿破积雨云照射下来，而周围的其他地方仍然下着瓢泼大雨。

从那一刻起，阳菜成为了一名“晴女”——可以凭借主观意志在有限的时空范围内影响天气的女孩。

帆高是一名离家出走到东京的男孩。因为未成年，所以难以找到工作养活自己。在阳菜打工的麦当劳，帆高和阳菜初次相遇，但没有过多交流。一次帆高在街上偶遇中年男子带着阳菜，出于警觉和保护的心理，帆高从男子手里解救出了阳菜。从此二人成为朋友。

阳菜和弟弟二人生活在一间公寓里，他们的母亲没有撑过一年前那个多雨的夏天。阳菜承担着照顾弟弟的责任，但同样年少的她，也很难找到一份可靠的工作。帆高在见识到阳菜拥有的晴女的神奇能力后，提议阳菜出租自己的能力，为需要的人带去阳光，并且获得金钱的回报。他们三人一起做着这份工作，为他人带去阳光，自己也收获着快乐。同时，也吸引了一些人的注意。

一天，调查离家出走少年和枪支事件的警察，打乱了他们快乐的生活，三人开始了躲避警察的逃跑之路。艰难的逃跑经历，让阳菜的心情非常阴郁，而天气也从大雨转为下雪。此时，帆高明白了，阳菜真的和东京的天空已经联结在一起，她的状态会直接影响天气。而更加让他无法接受的是，每当阳菜使用一次晴女的能力，她的身体就会有一部分变成透明，直到最终消失。她以牺牲自己为代价，来创造晴天。

逃跑路上的一天早晨，被噩梦惊醒的帆高发现阳菜不见了，而窗外的东京艳阳高照。他知道这是阳菜为了结束东京的连绵大雨，而选择彻底献身。

帆高不顾一切地躲避警察的追赶，来到阳菜成为晴女的那个楼顶，从那座神坛上一跃而起，追随阳菜进入了另一个空间——一个属于云和雨的世界。在那里，他找到了阳菜。他紧握阳菜的手，说出了发自内心的告白——只要能和你在一起，没有晴天也无所谓。两人在下落的空中许愿，最后一起回到了地面。

三年后，帆高从家乡的高中毕业。而远在东京，连下三年的雨已经把大半个城市淹没。毕业后的帆高立刻来到东京再次寻找阳菜，两人最终在一片阳光下重逢。

## 观后感
我很少看日本的电影和动画，但是前几天腾讯视频给我推荐的这部动画电影，我还是点了进来，并且看完了。我想了一下大概有这么几个原因：
- 电影本身的名字比较新奇，有神秘感。
- 电影的简介里描述的故事背景——东京下起连日大雨，这个设定也比较新奇。这样独特的环境设定，让人好奇会发生怎样奇妙的故事。
- 这部电影的编剧和导演新海诚，还有一个更著名的作品[《你的名字》](https://movie.douban.com/subject/26683290/)。

“晴女”最核心的特征是：个体与天气联结成为一个整体，互相同步，互相影响。但是，究竟是个体选择了成为“晴女”，还是天气选择了个体？影片中有一个镜头，阳菜在医院陪护母亲时，窗外雨水飞溅起来，空中有几个水珠穿透关着的窗户，像鱼儿一样游向阳菜的方向。这看起来更像是天气选择了她。这一幕没有明确展示雨水和阳菜融为一体，但是可以看出此时阳菜和天气已经产生联系了。随后阳菜在楼顶的神坛上的祈愿，则是她对天气的一个回应，一个许诺，她愿意为了晴天而付出自己，尽管她此时可能并不知道需要付出什么。

阳菜的特别之处，不仅仅在于她是晴女，更特别的是她发自内心地愿意付出自己，照亮他人。15 岁的她并没有过多地计较得失，她喜欢这种帮助别人、成全别人的感觉，喜欢被别人认可和感激的感觉。她唯一计较的，也就只有弟弟和帆高了。我猜测作者并没有打算在三个未成年的少年身上寄托太多“伟大”的东西，至少不是主观选择的“伟大”，因为这是不合年龄的。他们所具备的是纯真、善良、对幸福的追求，这样的人掌握了控制晴雨的能力，做了很多了不起的“小事”。他们成全了一场跑步比赛、一场婚礼、一场cosplay表演等等，没有做什么惊天动地的大事，都是一些寻常百姓的喜怒哀乐。阳菜愿意为了别人再寻常不过的小幸福、小快乐而奉献自己，这可能就是这部电影里出现的最伟大的东西。

《天气之子》


引入了 [Prism.js](https://prismjs.com/) 来实现代码高亮。

Prism 只能对已经渲染出来的 DOM 做高亮处理，因此在 React 页面里，需要在 DOM 渲染出来之后，再执行 Prism.js 的代码。

把 Prism.js 的代码包在一个函数里，在指定的时机执行它。
```javascript
// execPrism.js

export default function execPrism() {

  // ... Prism.js 的代码 ...

}
```

在页面 DOM 渲染完成后，再执行 Prism.js 的代码。对于函数组件可以使用 `useEffect()`，对于 class 组件可以使用 `componentDidMount()`。
```jsx
// page.js 页面组件

import { useEffect } from 'react';
import execPrism from './execPrism';

export default function Page() {

  useEffect(() => {
    execPrism();
  }, []);

  return (
    // 文章内容，由 markdown 转为 HTML，其中包含了代码块
    <div dangerouslySetInnerHTML={{ __html: content }} />
  )

}
```

代码高亮

![](https://ddr8pbswx1255.cloudfront.net/rain-min.jpg)

7 月份去武汉出差，回来的路上外面一直在下雨，那段时间的降水太多，沿途的很多地方都已经被水淹了。

<figure>
  <video controls="true" allowfullscreen="true">
    <source src="https://ddr8pbswx1255.cloudfront.net/rain.mp4" type="video/mp4">
  </video>
  <figcaption>山下的村庄被水淹没😢</figcaption>
</figure>

希望 2020 年的最后四个月一切安好🙏。

车窗外的雨


## This is day 2

引入了 [Typography.js](https://github.com/KyleAMathews/typography.js) 来提供基本的字体样式。