元宇宙虚拟空间的场景构造（二）

前言

该文章主要讲元宇宙虚拟空间的场景构造，基本核心技术点，不多说，直接引入正题。

---

场景的构造

使用引入的天空模块

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;     

};