Web 3D的部分技术选型和Babylon(2)

2401_84433924

已于 2024-04-29 18:45:15 修改

阅读量285

点赞数 5

分类专栏：程序员文章标签：前端 3d

于 2024-04-29 18:45:14 首次发布

本文链接：https://blog.csdn.net/2401_84433924/article/details/138322063

版权

程序员专栏收录该内容

179 篇文章 0 订阅

订阅专栏

JavaScript的3D技术插件在Web开发中广泛应用于游戏开发、数据可视化、虚拟现实(VR)和增强现实(AR)等领域，主要是基于Webgl技术。以下是一些知名的JavaScript 3D库：

Three.js：Three.js是基于WebGL构建的一个非常流行的3D库，它简化了使用JavaScript编写3D内容的过程，提供了一系列直观的API来创建复杂的3D场景、几何体、材质、光照以及动画等。
CesiumJS：Cesium是一个专门针对地球和地图类应用的高性能3D图形库，支持大规模地理空间数据可视化，包括地形、建筑、卫星图像等，非常适合GIS（地理信息系统）相关应用。
A-Frame：A-Frame是基于Three.js构建的WebVR框架，特别适合于创作虚拟现实内容，其HTML-like的语法使得开发者可以更容易地创建VR体验。
Babylon.js：Babylon.js也是一个强大的WebGL 3D引擎，具有丰富的功能集和优化过的性能表现，可快速创建交互式的3D场景，并且拥有良好的文档和社区支持。
PlayCanvas：PlayCanvas是一个实时3D游戏开发平台，提供了在线IDE和一个强大易用的3D游戏引擎，用于构建网页端的3D应用程序和游戏。
PixiJS 3D / PIXI.projection：虽然PixiJS主要是一个2D渲染引擎，但它也通过扩展模块如PIXI.projection支持基本的3D投影效果。
React-three-fiber：这是一个与React结合使用的包装器，将Three.js集成到React应用中，使开发者能够利用React组件的方式来构建3D场景。
Potree：Potree主要用于点云数据的三维可视化，对于处理大量点云数据的3D建模及显示有独特的优势。

以上列举的仅是部分热门的JavaScript 3D插件和技术栈，每种库都有其独特的应用场景和优势.其中Babylon.js是一个3D渲染引擎，加载渲染gltf数据的代码示例如下：

// 引入 Babylon.js 库
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

// 初始化场景
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);

// 加载 glTF 模型
const scene = new BABYLON.Scene(engine);
BABYLON.SceneLoader.ImportMesh("", "path/to/your/model/", "model.gltf", scene, (meshes) => {
  // 获取加载的网格
  const mesh = meshes[0];

  // 设置网格位置和旋转
  mesh.position = new BABYLON.Vector3(0, 0, 0);
  mesh.rotation = new BABYLON.Vector3(0, 0, 0);

  // 添加网格到场景中
  scene.addMesh(mesh);
});

// 渲染循环
engine.runRenderLoop(() => {
  scene.render();
});

// 适配窗口大小变化
window.addEventListener('resize', () => {
  engine.resize();
});

在上面的示例中，首先通过 BABYLON.SceneLoader.ImportMesh 方法加载了 glTF 模型，然后将加载的网格添加到场景中，并设置了其位置和旋转。最后，通过 engine.runRenderLoop 方法启动了渲染循环，并通过 window.addEventListener 监听窗口大小变化来适配不同的屏幕尺寸。这只是一个基本示例，实际应用中可能需要处理更多的细节，例如加载纹理、处理动画、添加光源等。

加载和操作gltf数据的代码示例如下：

// 引入 Babylon.js 库
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

// 初始化场景
const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);

// 加载 glTF 模型
const scene = new BABYLON.Scene(engine);
BABYLON.SceneLoader.ImportMesh("", "path/to/your/model/", "model.gltf", scene, (meshes) => {
  // 获取加载的网格
  const mesh = meshes[0];

  // 设置网格位置和旋转
  mesh.position = new BABYLON.Vector3(0, 0, 0);
  mesh.rotation = new BABYLON.Vector3(0, 0, 0);


### 总结

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/b18f89b88d9273e77b46fe7576f6abdf.webp?x-oss-process=image/format,png)