简单的场景组织

时间：2021-07-15 16:08:53

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设置绝对坐标相关的方法

标签：

相关文章