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

前言

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


场景的构造

使用引入的天空模块

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;

相关推荐
放逐者-保持本心,方可放逐13 小时前
webgl(three.js 与 cesium 等实例应用)之浏览器渲染应用及内存释放的关联与应用
开发语言·javascript·webgl·顶点着色器·three.js 释放·cesium 释放·片元着色器
橙色小博13 小时前
摄影入门:相机基本参数解析
数码相机·相机·摄影
AllBlue21 小时前
fbx导入blender结构错乱,但在threejs中加载正常
blender·threejs
想躺在地上晒成地瓜干1 天前
树莓派超全系列教程文档--(64)rpicam-apps可用选项介绍之相机控制选项
数码相机·树莓派·摄像头·raspberrypi·树莓派教程
lingling0092 天前
迁移科技3D视觉系统:开启袋子拆垛场景的智能革命新纪元
数码相机
WDeLiang2 天前
Flutter - 原生交互 - 相机Camera - 02
数码相机·flutter·交互
gis分享者2 天前
学习threejs,使用TSL计算粒子鼠标特效
threejs·鼠标·粒子·tsl·raycaster
新中地GIS开发老师2 天前
三维GIS开发cesium智慧地铁教程(4)城市白模加载与样式控制
学习·arcgis·智慧城市·webgl·gis开发·webgis·地理信息科学
ak啊3 天前
WebGL入门教程:实现场景中相机的视角与位置移动
前端·webgl
zhongqu_3dnest4 天前
什么是VR全景展示?VR全景展示的用途
vr·元宇宙·vr全景·虚拟展厅·vr看房·虚拟展览·三维实景建模