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

前言

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


场景的构造

使用引入的天空模块

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;

相关推荐
gaosushexiangji5 小时前
基于高速3D-DIC的风力叶片旋转工况下应变测量与振动模态分析
数码相机
用户831348593069817 小时前
Cesium 实现行政区反向遮罩镂空效果(自定义暗色蒙层+矢量/影像底图切换)
vue.js·webgl·cesium
孪生前端1 天前
Three.js 做医疗数字孪生:从空场景到可漫游楼层(附最小骨架)
webgl
格林威2 天前
工业相机Chunk功能全解析:图像嵌入时间戳、编码器元数据(附堡盟C#代码)
开发语言·人工智能·数码相机·计算机视觉·c#·视觉检测·工业相机
点量云实时渲染-小芹2 天前
UE/Unity/Webgl模型在信创服务器上实时渲染推流的可行性分析
unity·webgl·云渲染信创·国产实时渲染·ue信创云推流
孪生前端2 天前
如何用配置驱动一套 Three.js 数字孪生模板
webgl
XMAIPC_Robot2 天前
RK3588四路1080P工业MIPI相机视觉网关,同时支持RK3588+FPGA的24路相机同步方案
人工智能·数码相机
吐了啊取名字太难3 天前
美颜系统AI修图本地跑并支持Mac、win、安卓、iOS不卡顿
android·人工智能·windows·数码相机·mac·ai编程
科技圈快迅3 天前
科美锐(Komery)新手入门数码相机产品梳理:百元到千元,不同价位实际能买到什么
数码相机
OAK中国_官方4 天前
OAK相机 IMU 和外壳标定
数码相机