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

前言

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


场景的构造

使用引入的天空模块

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;

相关推荐
小彭努力中6 小时前
141. Sprite标签(Canvas作为贴图)
前端·深度学习·3d·webgl·three.js
hongel1101 天前
基于机器视觉的表面缺陷检测
数码相机
Ian10251 天前
WebGL进阶(十一)层次模型
webgl
mirrornan2 天前
什么是Web3D?有何优势?有哪些应用场景?
3d·web3·webgl·3d模型
gis分享者3 天前
学习threejs,通过SkinnedMesh来创建骨骼和蒙皮动画
threejs·蒙皮网格·skinnedmesh·骨骼和蒙皮动画
code bean3 天前
【工控】线扫相机小结 第四篇
数码相机·工控·工业相机
那就举个栗子!4 天前
多传感器融合slam过程解析【大白话版】
数码相机
gis分享者4 天前
学习threejs,导入FBX格式骨骼绑定模型
threejs·骨骼动画·fbx
xy189904 天前
相机触发模式
数码相机
小彭努力中4 天前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js