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

前言

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


场景的构造

使用引入的天空模块

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;

相关推荐
枫叶林FYL13 小时前
【强化学习】4 视觉引导的时序奖励塑形:多视角视频驱动的强化学习状态对齐框架
数码相机·音视频
cd_9492172115 小时前
鸿蒙系统给抖音开启相机权限的操作指南(2026)
数码相机·华为·harmonyos
2601_9574188016 小时前
深入解析Android相机有线连接:PTP与MTP协议栈实现原理与实践
android·数码相机·智能手机
贵州数擎科技有限公司1 天前
曼德勃罗集的 Three.js 实现
webgl·three.js
大松鼠君2 天前
GLSL 动画动作万能规律表
webgl·three.js
小飞侠是个胖子2 天前
底层博弈:在高阶 WebGL 开发中平衡视觉极限与渲染性能
webgl
qq_526099132 天前
工业视觉核心硬件:图像采集卡性能体系与选型逻辑解析
数码相机
贵州数擎科技有限公司2 天前
分形金字塔的 Ray Marching 实现
webgl·three.js
kyle~3 天前
机器人感知 --- 多相机传感时间误差分析
linux·c++·数码相机·机器人·ros2·传感器
ZPC82103 天前
moveit2_servo 怎么接收相机调节指令(视觉伺服)
人工智能·数码相机·算法·计算机视觉·机器人