分享babylon.js实现Web三维场景

作者 : admin 本文共911个字,预计阅读时间需要3分钟 发布时间: 2024-06-10 共2人阅读

前言

Web页面中创建一个虚拟的三维世界,需要一个场景Scene,并在场景中添加模型Model,模型有可能是一个简单的立方体,也可能是一个复杂的角色,无论是简单的模型,还是复杂的模型,大都是由网格Mesh组成。除此之外,还需要一个相机Camera去观察虚拟世界,一个灯光Light去照亮场景等等,拥有了上述内容后,才能够在Web页面观察到一个虚拟的三维世界。

Web应用相较于基于C/S架构的独立的应用,有其不可替代的优势:用户无须额外下载独立应用,使用浏览器即可完成体验,也存在目前难以消除的短板:大量的3D资源下载需要用户等待。

JavaScript游戏引擎或3D图形框架Babylon.js实现Web端展示3D模型。

场景Scene表示一个虚拟的场地,一般由环境、房间、道具、角色等共同组成一个虚拟的场景,在有些游戏引擎或3D框架中也叫着舞台Stage。从3D的角度来说,场景是将一些网格Mesh放在一起供用户观看,并且会在其中加入相机Camera和灯光Light让用户能够看见,就像摄影棚那样的场景一样。

分享babylon.js实现Web三维场景插图

场景可能还会包含一些别的元素,例如GUI用户界面,让用户能够与场景产生交互。

效果截图

使用三维软件Blender构建海鱼的三维模型,并增加材质贴图和模型动画。

分享babylon.js实现Web三维场景插图(1)

信息监视Inspector面板可以看到场景的节点Nodes信息、材质Materials信息、纹理Textures、动画Animation信息等,可以在鼠标、键盘、手柄、触摸屏、眼球跟踪、收拾识别、动作识别中关联三维场景的交互。

分享babylon.js实现Web三维场景插图(2)

分享babylon.js实现Web三维场景插图(3)

分享babylon.js实现Web三维场景插图(4)

分享babylon.js实现Web三维场景插图(5)

分享babylon.js实现Web三维场景插图(6)

分享babylon.js实现Web三维场景插图(7)

分享babylon.js实现Web三维场景插图(8)

分享babylon.js实现Web三维场景插图(9)

分享babylon.js实现Web三维场景插图(10)

分享babylon.js实现Web三维场景插图(11)

分享babylon.js实现Web三维场景插图(12)

实现代码




    
    
    
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

    
		body {
		  padding: 0;
		  margin: 0;
		  font: normal 14px/1.42857 Tahoma;
		}
		#renderCanvas { width: 100vw; height: 100vh;}
    
	Babylon.js viewer (v7.3.1) - WebGL2 - Parallel shader compilation


    
    

分享babylon.js实现Web三维场景插图(13)

参见:

Babylon.js 简介和 WebXR 教程 – Mixed Reality | Microsoft Learn

与 3D 对象交互的 Babylon.js 教程 – Mixed Reality | Microsoft Learn

Babylon.js工具链

本站无任何商业行为
个人在线分享-虚灵IT资料分享 » 分享babylon.js实现Web三维场景
E-->