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

前言

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


场景的构造

使用引入的天空模块

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;

相关推荐
丫丫7237342 天前
Three.js 模型树结构与节点查询学习笔记
javascript·webgl
youngong2 天前
强迫症之用相机快门数批量重命名文件
数码相机·文件管理
allenjiao4 天前
WebGPU vs WebGL:WebGPU什么时候能完全替代WebGL?Web 图形渲染的迭代与未来
前端·图形渲染·webgl·threejs·cesium·webgpu·babylonjs
二川bro4 天前
第59节:常见问题汇编 - 60个典型问题解答
javascript·3d·threejs
mapvthree5 天前
mapvthree Engine 设计分析——二三维一体化的架构设计
webgl·数字孪生·mapvthree·jsapi2d·jsapigl·引擎对比
weixin_466485115 天前
halcon标定助手的使用
数码相机
GISer_Jing6 天前
3D Cesium渲染架剖析
javascript·3d·webgl
Swift社区6 天前
用 Chrome DevTools 深度分析 Vue WebGL 内存泄漏(进阶篇)
vue.js·webgl·chrome devtools
诸葛务农7 天前
ToF(飞行时间)相机在人形机器人非接触式传感领域内的应用
数码相机·机器人
塞北山巅7 天前
相机自动曝光(AE)核心算法——从参数调节到亮度标定
数码相机·算法