跳到主要内容

场景图

Three.js 的核心是场景图(Scene Graph)。

场景图是由多个节点组成的层次结构,类似于 DOM。每一个节点都代表一个本地空间(Local space)。

The Tree of Scene Graph

例子 1——太阳系

The Solar System

示例代码:https://github.com/wukaipeng-dev/threejs-demo/tree/main/04-fundamental/solar-system

他们的组成为:

The Tree of Scene Graph

为什么这里 Earth 不能在 Sun 的子节点?

这是因为如果 Earth 作为 Sun 的子节点的话,Sun 放大 5 倍,Earth 也会跟着放大 5 倍。

这显然不是我们想要的效果,所以用 SolarSystem 作为 Sun 和 Earth 两者的父节点。

例子 2——坦克

The Tank

示例代码:https://github.com/wukaipeng-dev/threejs-demo/tree/main/04-fundamental/tank