簡單的場景組織

three.js官方例子裏有個看起來效果不錯，其實非常簡單的例子場景層次。
名字意思是場景層級，也就是場景結構。

一般三維場景都是樹形結構組織起來的。
一個父節點可以有多個子節點，這樣遞歸起來自然就有了一顆場景樹。

官方的例子裏用隨機數在一個正方體空間裏生成了許多小正方體，它們有不同的位置和旋轉角，最後加上一個根據鼠標x,y位置改變相機參數的事件響應，就有了不錯的效果。

我就仿照其寫了一個類似龍捲風的效果。

代碼

根據之前我自己寫好的HelloWorld，把場景先清空，再在場景中加入

// light
{
    let light = new THREE.HemisphereLight();
    light.intensity = 0.2;
    this.scene.add(light);
}
{
    let light = new THREE.SpotLight();
    light.position.y = 100;
    this.scene.add(light);
}
// group
{
    let geom = new THREE.CubeGeometry(1, 1, 1);
    let mat = new THREE.MeshPhongMaterial({
        color: 0xffff00
    });
    let widthMin = 30, widthMax = 100;
    let h = 100;
    let num = 100;
    let scaleMin = 1, scaleMax = 6;
    this.group = new THREE.Group;
    this.scene.add(this.group);
    for (let i = 0; i < num; ++i) {
let sph = new THREE.Mesh(geom, mat);
        let rdH = Math.random();
        let r = widthMin + (widthMax - widthMin) * rdH;
        sph.position.set(r * (Math.random() - 0.5), h * (rdH - 0.5), r * (Math.random() - 0.5));
        let s = scaleMin + (scaleMax - scaleMin) * rdH;
        sph.scale.set(s, s, s);
        this.group.add(sph);
    }
}

再在渲染回調里加入旋轉

this.group.rotateY(Math.PI * 2 / 60);

效果

解釋

代碼裏的先加入了2個光線，一個是天空光，一個是點光放在高處（並沒有添加環境光，因爲我想讓明暗對比度更高）
然後在一個錐形空間裏隨機生成了許多cube，將它們加入同一個組
最後在回調裏把組延Y軸旋轉
（我重新擺放了相機，你可能也需要這麼做）

對這些cube的父節點group應用旋轉，整個組都被旋轉了
所以要計算一個物體在場景樹中世界座標，會延樹根節點，層層旋轉移動縮放，一直到這個物體這一層計算完畢
所以某個物體的位置旋轉伸放只是相對於父節點的，如果你要設定它的世界座標，你需要three.js設置絕對座標相關的方法