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

前言

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


场景的构造

使用引入的天空模块

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;

相关推荐
总要学点什么5 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
GoldenSpider.AI19 小时前
一张户型图做成浏览器 3D 漫游:house.json 统一模型、1.2 m 剖切图纸与分阶段验收
ai编程·webgl·three.js·3d漫游·claude code
FLJwu2 天前
《运动相机硬件防护选型实战》专栏|第二篇(PPTC 自恢复保险丝)
android·经验分享·数码相机·1024程序员节·运动相机
江苏久众新视2 天前
SOP流程AI视觉检测实战案例:基于安防相机与本地AI的产线防错防漏方案落地分享
人工智能·数码相机·视觉检测
高升说3 天前
无人机吊舱相机选型:稳定、变焦与画质的工程权衡
数码相机·无人机
QYRese3 天前
CAGR3.1%!抗辐射相机市场迎替换潮,核设施数字化、水下场景带来增量
大数据·数码相机
Jmyd01233 天前
WebGL 三维党史馆怎么扛住 720 度全景与移动端弱网?
webgl·三维数字化
unicrom_深圳市由你创科技4 天前
多相机GigE Vision:触发与图像网段怎么分?
数码相机
FLJwu4 天前
运动相机采购实战|第四篇(终章):一张清单走完选型全流程,把风险拦在源头
c语言·开发语言·数码相机·运动相机·oem 量产
光电的一只菜鸡4 天前
鱼眼镜头需要考虑color shading吗
数码相机