前言
该文章主要讲元宇宙虚拟空间的场景构造,基本核心技术点,不多说,直接引入正题。
场景的构造
使用引入的天空模块
this.sky = new Sky(this);
在Sky模块里,有设置对其中的阳光进行不同时间段的光线处理。而天空又是怎么样的呢?人站在一个位置环顾四周,人就是一个球体内的中心点,threejs的摄像机位置就是球体内的中心点,所以Sky模块里面要创建一个球体。
this.skyMesh = new THREE.Mesh(
new THREE.SphereBufferGeometry(1000, 24, 12),
this.skyMaterial
);
当然可以添加天空的材质布置
this.skyMaterial = new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.clone(SkyShader.uniforms), fragmentShader: SkyShader.fragmentShader,
vertexShader: SkyShader.vertexShader,
side: THREE.BackSide
});
在一个场景里要有一个阴影的效果,并且从远处看和近处看都不一样
这里首先要对renderer设置开启阴影,类型设置为软阴影,使用库three-csm,设置相机的远平面(距离相机更远时阴影不可见),设置影子的级联数为3,方向光强度为2.5,阴影贴图的分辨率2048,达到逼真的阴影效果。
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.csm = new CSM({
fov: 80,
far: 250, // maxFar
lightIntensity: 2.5,
cascades: 3,
shadowMapSize: 2048,
camera: world.camera,
parent: world.graphicsWorld,
mode: 'custom',
customSplitsCallback: splitsCallback
});
this.csm.fade = true;
这里可以看到场景中有很多的空对象,我们把字符串data属性为scenario解析后添加到我们的场景里面去,方便后续操作如传送点,复活点等
if (child.userData.data === 'scenario') { this.scenarios.push(new Scenario(child, this));
};
scenario解析,比如判断是否为默认出生点,是否出生点总是为它
if (root.userData.hasOwnProperty('default') &&
root.userData.default === 'true'){
this.default = true;
}
if (root.userData.hasOwnProperty('spawn_always') && root.userData.spawn_always === 'true') {
this.spawnAlways = true;
};