如何用Three.js+Blender打造一个web3D展览馆运营活动新玩法层出不穷,web3D炙手可热,本文将

运营活动新玩法层出不穷,web3D炙手可热,本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web3D展览馆。

3D展览馆是什么,先来预览下效果:

看起来像个3D冒险类手游,用户可以操纵屏幕中央的虚拟摇杆,以第一人称视角在房间内自由移动、看展览。

首先介绍一个背景,我们的工作内容是做游戏中心的用户运营活动,会做些好玩的活动让用户参与,并get一些福利。

当时的活动背景是我司一年一度的vivo游戏节,并且元宇宙是大热词。所以做它的原因有几个:

用到的组合方案:Three.js+Blender。

开源的3D框架有很多,但最常用的有两种:Three.js、Babylon.js,我们只需要从中二选一。分析后发现两者各有优势:

考虑到3D展览馆的几个基本特性:

Three.js包体更小、有更多参考案例、上手更快,所以虽然Babylon.js有它的优势,但Three.js更适合这个项目。

Blender是一款轻量的开源3D建模软件,有很多好用的免费插件,而且Blender能导出GLTF/GLB模型(后面会对GLTF/GLB模型做简介),匹配Three.js的使用方式,整体更简单好用一些。

所以,就是它了。

在进入开发之前,先简单了解Blender和GLTF/GLB模型。

首先,Blender大概长这样,图中是设计师交付的3D展览馆稿子。简单理解为,左侧是模型的层次结构,中间是模型的预览效果,右侧是模型的属性面板。

GLTF(GraphicsLanguageTransmissionFormat)是一种标准的3D模型文件格式,它以JSON的形式存储3D模型信息,例如模型的层次结构、材质、动画、纹理等。

模型中依赖的静态资源,比如图片,可以通过外部URI的方式来引入,也可以转成base64直接插入在GLTF文件中。

它包含两种形式的后缀,分别是.gltf(JSON/ASCII)和.glb(Binary)。.gltf是以JSON的形式存储信息。.glb则是.gltf的扩展格式,它以二进制的形式存储信息,因此导出的模型体积也更小一些。如果我们不需要通过JSON对.gltf模型进行直接修改,建议使用.glb模型,它更小、加载更快。

在blender中,可以直接将模型导出为GLTF/GLB格式,三种选项的差别不再赘述,我们先简单选择最高效的.glb格式。

有了模型之后,我们可以开始通过Three.js创建场景,并导入这个模型了。

怎么加载一个模型?

(1)创建一个空场景

首先创建一个空场景scene,后续所有的模型或材质都会被添加到这个场景中。

import*asTHREEfrom'three'//1.创建场景constscene=newTHREE.Scene();//2.创建镜头constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//3.创建Rendererconstrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);(2)导入GLTF/GLB模型

通过GLTFLoader导入.glb模型,并添加到场景中。

importGLTFLoaderfrom'GLTFLoader'constloader=newGLTFLoader()loader.load('path/to/gallery.glb',gltf=>{scene.add(gltf.scene)//添加到场景中}}(3)开始渲染

通过requestAnimationFrame来调用renderer.render方法,开始实时渲染场景。

functionanimate(){requestAnimationFrame(animate);renderer.render(scene,camera);}animate();ok,这样我们就完成了3D模型的导入,但是发现整个场景一片漆黑。

试试加个环境光。

ok,亮起来了,但是效果依然很差,很劣质。

原因是模型中的材质效果、光源、阴影、环境纹理,这些全都丢失了,所以当我们导入模型时,看到的就是一堆简陋的纯色形状。

所以我们要一步步将这些丢失东西找回,还原设计稿。

接下来一步步还原设计稿。

(1)加上光源

查看Blender模型,看到设计稿中添加了一堆点光源、平行光源。

点光源可以理解为房间中的灯泡,光线强弱随着距离衰减;

平行光源可以理解为太阳的直射光,它和点光源不同,光线强弱不随着距离衰减。

于是我们也增加一些光源:

//一些灯光选项//如果是平行光则没有distance、decay选项constlightOptions=[{type:'point',//灯光类型:1.point点光源、2.directional平行光源color:0xfff0bf,//灯光颜色intensity:0.4,//灯光强度distance:30,//光照距离decay:2,//衰减速度position:{//光源位置x:2,y:6,z:0}},...]functioncreateLights(){pointLightOptions.forEach(option=>{constlight=option.type==='point'newTHREE.PointLight(option.color,option.intensity,option.distance,option.decay):newTHREE.DirectionalLight(option.color,option.intensity)constposition=option.positionlight.position.set(position.x,position.y,position.z)scene.add(light)})}createLights()可以看到场景比之前好了一些,有了光源后,模型变得立体和真实了,多了一些反色的光泽。

但是我们注意到,画面中的logo、长椅的两侧都是黑色的,并且旁边的球体、椅子等都显得不够真实。

所以,我们需要进行下一步调整:调整模型材质、增加环境纹理。

(2)调整模型材质,增加环境纹理

先简单了解一下材质和环境纹理。

材质就像物体的皮肤,我们可以调整皮肤的光泽、金属度、粗糙度、透明与否等属性,让物体有不同的视觉效果。

一般从blender导出的模型中,已经包含了一些材质属性,但是Three.js中的材质属性和Blender中的属性并非完全的映射关系,模型在导入到Three.js后,效果和设计稿会有差异。这时候我们需要手动调整材质的属性,来达到和设计稿近似的效果。

环境纹理就是让模型映射周围的环境,让场景或物体更真实。例如我们要渲染一个立方体,把立方体放进一个屋子里,这个屋子的环境就会影响立方体的渲染效果。

比如镜面的物体被贴上环境纹理后,就可以实时反射周围的环境镜像,看起来很real。

设计稿中也是将一个大厅作为了环境纹理,让场景更真实。

环境纹理分为:球形纹理和立方体形纹理。两者都可以,这里我们采用一张大厅的球形纹理作为环境贴图。

以画面中的vivo游戏节logo为例,我们通过调整它的材质和环境纹理,让它变得更真实。

constloader=newGLTFLoader()loader.load('path/to/gallery.glb',gltf=>{//1.根据Blender中物体的名字,找到logo模型gltf.scene.traverse(child=>{if(isLogo(child)){initLogo(child)//2.调整材质setEnvMap(child)//3.设置环境纹理}})scene.add(gltf.scene)}}//判断是否为LogoconstisLogo=object.name==='logo'functioninitLogo(object){object.material.roughness=0//调整表面粗糙度object.material.metalness=1//调整金属度}//加载环境纹理letenvMapconstenvmaploader=newTHREE.PMREMGenerator(renderer)constsetEnvMap=(object)=>{if(envMap){object.material.envMap=envMap.texture}else{textureLoader.load('path/to/envMap.jpg',texture=>{texture.encoding=THREE.sRGBEncodingenvMap=envmaploader.fromCubemap(texture)object.material.envMap=envMap.texture})}}经过上面的处理后,可以看到原先黑色的logo有了金属光泽,并且会反射周围的环境纹理。

其它物体经过类似的处理后,也变得更真实一些。

现在整个场景更接近了设计稿一些,但场景中少了阴影,显得很干瘪。

加上阴影。

(3)增加阴影

增加阴影分四步:

添加阴影后,有质的提升,发现整个场景立体了很多,此时还原度已经很高。

如果不考虑性能损耗,这个场景的样式已经可以投入使用了。(后续会提到性能优化)

小结一下,刚刚做的几件事:

现在3D展览馆场景已经还原的差不多了,接下来要构造一个虚拟移动摇杆,控制第一人称镜头的移动和转向,实现沉浸式逛展的效果。

要实现通过虚拟移动摇杆控制镜头的移动和转向,我们需要三个东西:

有人会问为什么需要一个player,通过摇杆直接控制镜头不就行了吗?其实player的作用是用于做碰撞检测,当player遇到凳子、墙壁等障碍物时,需要停止镜头移动。直接控制镜头,是无法做碰撞检测的。

所以,实际上镜头移动的逻辑是:

用户操纵摇杆→更新player位置和朝向→从而同步更新camera位置和朝向

(1)创建移动摇杆

移动摇杆的实现原理很简单,这里仅做简述。

核心在于创建一个圆盘,监听触摸手势,并根据手势的方向来实时更新move参数,控制镜头的移动和转向。

constspeed=8//移动速度constturnSpeed=3//转向速度//moveoption,用于调整第一人称镜头的移动和转向constmove={turn:0,//旋转角度forward:0//前进距离}//创建一个handler,并监听手势,调整moveoptionconsthandler=newHandler()handler.onTouchMove=()=>{//updatemoveoption}(2)创建player

首先创建一个player对象,它是一个1.2*2*1的透明长方体。

每次渲染(render)时,更新player的位置和朝向,并同步更新镜头的位置和朝向。

完成上述步骤后,我们就可以通过控制虚拟移动摇杆,来让镜头移动和转向了。

接下来加入碰撞检测,对镜头移动加点限制。

碰撞检测的步骤也很简单:

(1)收集障碍物

模型加载完成后,遍历所有的child,如果child是一个物体(mesh),则把它加入到障碍物队列(colliders)中。

constcolliders=[]loader.load('path/to/gallery.glb',gltf=>{gltf.scene.traverse(child=>{//收集障碍物if(isMesh(child)){colliders.push(child)}})}})(2)检测碰撞

调整刚刚的updatePlayer方法,在其中插入检测碰撞的逻辑。

碰撞检测逻辑基于THREE.Raycaster来实现,racaster可以理解为一个射线,当射线穿过了某个物体,我们就认为射线和物体相交了。

当我们移动到椅子、墙壁等障碍物附近时,镜头会停止移动。镜头的移动范围也被我们限制在房间里,不会穿到房间外部。

3D展览馆的基本功能已经完成了,但还没有做任何的性能调优。当我们把项目运行在手机上,会发现设备发热发烫,帧率很低,低端机型甚至无法运行。

经过分析,实时的光影渲染是罪魁祸首。

页面中有10+个光源,每个光源都在实时投射阴影(尤其是点光源十分消耗资源,引起卡顿)。但实际,场景中的光源和物体位置都没有发生改变,这意味着我们不需要计算实时阴影,只需要固定的阴影。

这点可以通过纹理烘焙来实现。并且在移动端,经过纹理烘焙的光影效果实际上要优于设备计算的实时光影效果。

纹理烘焙,是指通过将场景效果预渲染到指定纹理上,生成一个模型贴图。在Blender中,我们可以选中任意对象进行烘焙。

以3D展览馆的地板为例,我们可以通过纹理烘焙,将光影效果直接渲染到贴图上。

左图是原本的棋盘格纹理,右图是结合了光影效果的烘焙贴图。烘焙完成后,地板上的光影效果就被固定下来了,我们也不需要再做实时的光影渲染。

用同样的方式,将地板、墙壁、天花板等物体,一一进行烘焙处理,导出一个新的模型。由于光影效果已经被渲染到贴图上,我们可以将大部分光源去掉,只保留2-3个必要的点、平行光源和全局光。再次运行后,发现卡顿、发烫的问题已经不再明显。并且效果其实比实时渲染更精细一些。

这里没有对烘焙做过多介绍,要生成精致的烘焙结果还需要依赖对UVMap、烘焙参数的了解,虽然这些偏向于设计同学的工作,一般由他们来输出烘焙纹理。但是作为开发者,了解了这些后才能和UI更好地沟通和配合。

模型大小约为23M,首次加载模型需要9s左右。(尤其是在做完纹理烘焙后,由于贴图变得复杂,模型更大了)

以下是几个优化模型大小的建议:

(左图为优化前,右图为优化后)

现在,我们基本完成了整个3D展览馆的开发。虽然有一些细节没有在文中涉及到,但开发过程大致如此。

THE END
1.虚拟交互3d展览展厅为企业节省了各项成本支出虚拟交互3d展览展厅为企业节省了各项成本支出 3d数字化虚拟展厅以360°可交互全景技术,完美复刻线下展厅的真实体验,让您在线上也能感受到身临其境的震撼效果,对于线上展览来说,不仅带来全新的营销体验,更 并且3d数字化虚拟展厅添加了热点、嵌入、虚拟人物等特色功能。您可以在场景编辑中自由添加动态热点,配置模板https://baijiahao.baidu.com/s?id=1818951898258751254&wfr=spider&for=pc
2.vr全景虚拟展厅设计网上虚拟展厅展馆搭建方案3.全景场景设计与实现 全景场景是虚拟展厅的核心部分,通常采用360度全景图像或3D建模来实现,给参观者带来沉浸感。 360度全景图像:可以通过拍摄真实展馆的全景图像来实现虚拟展示,也可以在3D软件中进行全景设计,营造虚拟空间的沉浸感。 虚拟现实(VR)支持:可通过VR设备提供更加身临其境的体验,参观者戴上VR头盔后可以自https://www.cdhannuo.com/news/2184.html
3.企业如何迅速构建3D虚拟展厅?在数字化浪潮的推动下,众多企业纷纷选择线上3D虚拟展厅来展示其产品、环境与实力。视创云展凭借WebGL自主研发的3D引擎,为企业提供了低成本且高效的3D虚拟展厅搭建方案。 丰富的3D展厅模板 汇聚了众多精美的3D展厅模板,覆盖多种场景需求。用户只需简单拖拽与编辑,即可轻松创建出独具特色的3D虚拟展厅。 https://blog.csdn.net/jimumeta/article/details/143512251
4.元宇宙线上展会开启一场沉浸式体验,推动展览持续创新!元宇宙线上展会还提供高度可定制化的服务。无论是展厅的外观设计、展品的呈现方式,还是用户的互动方式,都可以根据具体需求进行个性化定制。这种个性化的定制服务,不仅满足了不同行业、不同主题的展会需求,还使得展会内容更加贴合用户的兴趣和需求。 元宇宙虚拟展会 https://zhuanlan.zhihu.com/p/12278385446
5.基于Unity3D的虚拟展馆的设计与实现虚拟现实 游戏开发 智慧展馆 Unity3Dhttps://cdmd.cnki.com.cn/Article/CDMD-10487-1021907048.htm
6.沉浸式交通安全教育展厅,3D消防虚拟灭火安全展馆设计西安一笔一画科技有限公司将一直秉承“诚信为本、服务至上”的经营理念,立志成为国内展览展示与展厅自动化控制行业的 者,为市场提供产品,为客户提供zui完善的服务,保证每一个细节都令人耳目一新,让我们的产品通过我们的努力带给您非凡的体验。 3d消防虚拟灭火安全展馆设计 沉浸式交通安全教育展厅 展开全文商务https://m.11467.com/product/d8070921.htm
7.云展馆:3D模型展示与虚拟现实技术腾讯云开发者社区云展馆:3D模型展示与虚拟现实技术 云展馆设计如何实现展品的三维模型展示? 随着科技的不断发展,博物馆和展览馆的展示方式也在不断创新。云展馆作为一种新兴的展示方式,为观众提供了更加便捷、高效的参观体验。在云展馆中,展品的三维模型展示是其核心功能之一。那么,云展馆设计如何实现展品的三维模型展示呢?本文将从https://cloud.tencent.com/developer/news/1210991
8.3D虚拟展馆:未来展览的新选择3D虚拟展馆适用于教育培训领域,尤其是科学、艺术等学科。学生在虚拟展馆中可以更直观地理解知识。 文化推广 通过虚拟展馆,文化机构能够更好地展示历史遗产、艺术作品,提高公众对文化的认知和兴趣。 设计与创建3D虚拟展馆的步骤 1. 确定目标和受众 在设计之前,需要明确展馆的目标和面向的受众。这个阶段可以进行市场调研,https://www.bjhuanying.com/new/361.html
9.如何用Three.js+Blender打造一个web3D展览馆运营活动新玩法层出不穷,web 3D炙手可热,本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。 一、前言 3D展览馆是什么,先来预览下效果: 1.gif 看起来像个3D冒险类手游,用户可以操纵屏幕中央的虚拟摇杆,以第一人称视角在房间内自由移动、看展览。 https://www.jianshu.com/p/389fb2fae66a
10.网上虚拟展览馆布展系统3Dshowing3Dshowing是一款用于展览馆仿真设计的CAD软件系统,借助这个软件,展览馆管理人员可以在计算机上设计整个展览馆的布局,以供参观者在虚拟的展馆中漫游。3Dshowing的主要功能包括:平面设计,室内装饰,漫游功能,模型管理等。本虚拟展览馆系统基于一种适于描述虚拟展览馆场景的场景描述语言XVM(XML-based Scene Description Languagehttps://ndsc.nju.edu.cn/86/0f/c39171a493071/page.htm
11.数字展厅(3D展馆)建设实施方案设计.doc./WORD格式下载可编辑XX海关关史馆数字三维虚拟展馆制作方案XXX公司2015年5月目录一、项目背景3二、现状及需求分析3三、制作方案41、场景三维建模设计42、展馆虚拟地图53、展馆工具栏64、展品展示65、场景音频86、虚拟解说员8四、项目管理91、进度保证92、项目控制103、文档管理114、质量保证11五、报价表13项目背景https://www.renrendoc.com/paper/297281290.html
12.vr展厅方案制作线上虚拟展会广州商迪科技有限公司,简称【商迪3D】,3d虚拟现实技术雄厚,多年来致力于为客户提供线上虚拟场景解决方案,为客户制作设计:vr线上展厅、3d展厅、企业虚拟展厅、线上展馆、线上展会平台、全景线上展厅制作等服务,帮助企业以全新视角向客户展现线上虚拟环境,专业值得信赖!http://www.kushixiu.com/
13.知了云展官网虚拟展厅快速交付平台知了云展-致力于打造人人都会用的虚拟展厅交付平台。 我们拥有强大的场景模型二次编辑器,一流的实时三维渲染引擎,为设计师和策展等专业人士提供可视化、无需编程的简单快速交付虚拟展厅平台https://www.chan3d.com/
14.3DMapping秀数字视觉展厅展馆设计公司苏州华恒展览设计营造有限公司是专业文化展厅展馆设计公司,专注企业多媒体展厅设计、数字化展馆设计、主题馆、博物馆、科技馆、展览馆等设计施工一体化!https://hhsjzg.com/picture340/detail357.html
15.VR文旅制作开发VR数字展厅展馆大空间3D虚拟展馆广州奇境科技有限公司专注研发VR智慧党建,VR军事虚拟仿真,VR武警军队仿真实训,数字展厅展馆,VR大空间游戏等虚拟现实产品军队模拟驾驶设备军事CQB训练,网上军史馆设计全沉浸式互动体验、提供VR行业创新应用整体解决方案。http://www.vrtop.net/