最新Web 3D的部分技术选型和Babylon，怎样学习web前端开发

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 加载 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);

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

// 操作网格
  // 例如，设置网格材质
  mesh.material = new BABYLON.StandardMaterial(“material”, scene);
  mesh.material.diffuseColor = new BABYLON.Color3(1, 0, 0);

// 例如，设置网格可见性
  mesh.isVisible = true;
});

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

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

  
 在上面的示例中，首先通过 BABYLON.SceneLoader.ImportMesh 方法加载了 glTF 模型，然后将加载的网格添加到场景中，并设置了其位置和旋转。接下来，可以通过 mesh.material 属性来操作网格的材质，例如设置材质的颜色。还可以通过 mesh.isVisible 属性来控制网格的可见性。




### 最后

**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**

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

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



习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-ZAutFkq7-1715254995290)]