元宇宙虚拟空间的场景构造(二)

前言

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


场景的构造

使用引入的天空模块

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;

相关推荐

  1. 宇宙虚拟空间加载管理(三)

    2024-04-03 05:08:02       14 阅读
  2. 竹纤维家装宇宙虚拟空间与绿色生活融合

    2024-04-03 05:08:02       9 阅读
  3. 虚拟空间

    2024-04-03 05:08:02       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-03 05:08:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-03 05:08:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-03 05:08:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-03 05:08:02       18 阅读

热门阅读

  1. .vimrc文件的语句语法

    2024-04-03 05:08:02       10 阅读
  2. 2024Mathorcup数学建模竞赛A题B题C题D题

    2024-04-03 05:08:02       15 阅读
  3. 服务器是争做时代先锋

    2024-04-03 05:08:02       11 阅读
  4. 【LeetCode热题100】【链表】K 个一组翻转链表

    2024-04-03 05:08:02       13 阅读
  5. LeetCode 20.有效的括号

    2024-04-03 05:08:02       14 阅读
  6. MyBatis数据库逆向生成工具

    2024-04-03 05:08:02       10 阅读
  7. 20款高级 Python 装饰器

    2024-04-03 05:08:02       10 阅读
  8. es6中的Object.assign

    2024-04-03 05:08:02       15 阅读
  9. 黑客攻击自己上班的公司会怎样?

    2024-04-03 05:08:02       12 阅读
  10. vue3的ref和reactive对比

    2024-04-03 05:08:02       16 阅读
  11. Android compose 使用指纹验证

    2024-04-03 05:08:02       15 阅读