当视频游戏遇到Web 2.0时会发生什么？当虚拟世界符合地球地理空间图时，当模拟变得现实时，生命和业务变成虚拟的？所有这些发生的都是元宇宙。
元素宇宙想象着一个未来的未来，该未来被虚拟世界和3D技术广泛使用。Webxr，三。js已成为一种可用于创建身临其境体验的主流工具。同时，浏览器对3D渲染的支持和WebXR设备API也得到了改进，使Web成为越来越有吸引力的3D内容平台。
Trix.js是Ricardo Cabello（@MRDOOB）在2010年开发的JavaScript库（现在它在GitHub上有许多贡献者）。这种令人难以置信的工具使用户可以在浏览器上处理3D图形，并使用WebGL技术来实现非常简单和直觉的技术Way.webgl技术非常受欢迎，并得到了浏览器的广泛支持。
WebGL在许多设备和浏览器中创造了丰富的交互式体验，然后单击以查看浏览器支持。
本文将基于基于VUE的框架构建三个示例。对于代码，您可以检查GitHub。
第一个安装依赖性：
现在，将代码添加到页面，如下所示：
然后添加一个简单的样式：
执行脚本，浏览器将看到以下效果：
这是每个三个应用程序的常见模式，包括：
渲染设备是放置场景结果的位置。三个场景中有多个场景，每个场景都可以具有不同的对象。
在示例中创建，将窗口的大小作为参数传递，然后将其添加到DOM中。
首先，您需要创建一个空场景，将添加到立方体对象：
最后，创建一个摄像机以比较视野，垂直和水平，以及近平面和遥远的平面作为参数：
在这一点上，这三个应用程序的三个基本元素已经完成。
第二个共同模式是将对象添加到场景：
在三js中，网格是几何体和材料的组合。
几何是对象的数学公式。三个几何形状有很多。它将在随后的章节中探索它。几何体提供了要添加到对象的对象的顶点。
材料可以定义为对象的属性及其与场景光源的行为。如下图所示，有不同类型的材料。
现在我知道网格，几何体和材料是什么，并且将添加到场景中。在示例中，使用基本材料来创建一个立方体：
最后一个代码是使用requestAnimationFrame设置场景的动画，该函数允许函数每秒以每秒60帧的速度运行。
为了在渲染周期中为Cube设置动画，需要更改其属性。创建网格时，您可以在动画制作过程中访问一组非常有用的属性。
在示例中，设置Cube的X和Y - Y-连续动画：
作为前端，控制台是最佳的调试工具。当使用三个JS时，控制台是必不可少的工具。
现在可以理解，该示例的逻辑将添加到场景中，目的是生成更复杂的片段。
在图中显示了运行后的效果：