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

前言

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

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

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

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

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

效果截图

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

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

实现代码

    
    
    
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

    
		body {
		  padding: 0;
		  margin: 0;
		  font: normal 14px/1.42857 Tahoma;
		}
		#renderCanvas { width: 100vw; height: 100vh;}
    
	


    
    

参见：

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

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

Babylon.js工具链