babylon加载模型 点击模型上的点加载

最新推荐文章于 2025-06-12 12:51:21 发布
原创 最新推荐文章于 2025-06-12 12:51:21 发布 · 447 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

在babylon中
ImportMesh 和Append 方法的区别

  1. Append 方法
    用途：BABYLON.SceneLoader.Append 方法用于将模型添加到已经存在的场景中。它不会创建新的场景，而是将模型直接添加到传入的场景对象中。
    返回值：该方法不返回加载的模型，而是将其直接附加到指定的场景。
    适用情况：当你希望将多个模型合并到同一个场景中时，可以使用该方法

  2. ImportMesh 方法
    用途：BABYLON.SceneLoader.ImportMesh 方法用于导入指定的网格（mesh）到场景中。它允许你选择性地导入模型的一部分，而不仅仅是将整个场景加载进来。
    返回值：该方法返回加载的网格对象，可以对它们进行进一步的操作。
    适用情况：当你只需要从文件中加载特定的网格时，可以使用该方法。

<!--
 * @Description: 优化后的代码
 * @Author: wz
 * @Date: 2024-11-12 10:25:03
 * @LastEditors: wz
 * @LastEditTime: 2024-11-14 10:32:11
 * @FilePath: /babylon/ziji/dianji.html
 * 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://preview.babylonjs.com/babylon.js"></script>
  <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
  <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>

  <script>
    try {
      const canvas = document.createElement('canvas');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      document.body.appendChild(canvas);

      // 创建引擎和场景
      const engine = new BABYLON.Engine(canvas, true);
      const scene = new BABYLON.Scene(engine);
      console.log(engine, '引擎创建成功');
      console.log(scene, '场景创建成功');

      // 创建相机
      const camera = new BABYLON.ArcRotateCamera("Camera", 30, Math.PI / 2.06, 120, BABYLON.Vector3.Zero(), scene);
      camera.wheelPrecision = 1.8;
      camera.upperBetaLimit = (Math.PI / 2) * 0.9;
      camera.attachControl(canvas, true);
      console.log(camera, '相机创建成功');

      // 创建灯光
      const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
      console.log(light, '灯光创建成功');


      // 创建全屏 UI
      var advancedTexture;
      // const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", scene);
      var icos;

      // 创建天空盒
      const skybox = BABYLON.Mesh.CreateBox("skyBox", 9000.0, scene);
      const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
      skyboxMaterial.backFaceCulling = false;
      skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox", scene);
      skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
      skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
      skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
      skyboxMaterial.disableLighting = true;
      skybox.material = skyboxMaterial;

    //   // 加载模型
    //   BABYLON.SceneLoader.ImportMesh("","./", "dapeng2.gltf", scene, function (meshes) {
    //     // BABYLON.SceneLoader.Append("./", "dapeng2.gltf", scene, function (newScene) { 
    //       const model = meshes[0];  // 获取加载的模型
          
    // // 设置模型可点击
    // model.isPickable = true;
    // // 设置模型的位置
    // // model.position = new BABYLON.Vector3(0, 0, 0);
    //       console.log(meshes, 'zijimeshesdianji.html-第84行')
    //       console.log(model, 'zijimodeldianji.html-第84行')
    //      // 创建图标
    // const icon = BABYLON.MeshBuilder.CreateSphere("icon", { diameter: 0.2 }, scene);
    // icon.material = new BABYLON.StandardMaterial("iconMaterial", scene);
    // icon.material.emissiveColor = new BABYLON.Color3(1, 0, 0); // 设置图标颜色为红色
    // icon.isVisible = false; // 默认隐藏图标

    // // 检测点击事件
    // scene.onPointerObservable.add((ptrEvt) => {
      
    //     if (ptrEvt.type === BABYLON.PointerEventTypes.POINTERUP) {
    //         const pickResult = scene.pick(ptrEvt.event.clientX, ptrEvt.event.clientY);
    //         console.log(pickResult, '-------------------------zijiptrEvtdianji.html-第99行')
    //         if (pickResult.hit && pickResult.pickedMesh === model) {
    //             // 显示图标并设置位置
    //             icon.position = pickResult.pickedPoint.add(new BABYLON.Vector3(0, 1, 0)); // 图标位置在模型上方
    //             icon.isVisible = true;
    //         }
    //     }
    // });




    //   }, null, function (error) {
    //     console.error("加载错误:", error);
    //   });




      // // 为画布添加点击事件监听器
      // canvas.addEventListener("click", function (evt) {
      //   // 将点击事件的屏幕坐标转换为 Babylon.js 场景中的三维射线
      //   var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh.isPickable === true; });

      //   // 如果pickInfo.hit为true，则表示点击到了模型
      //   if (pickInfo.hit) {
      //     var clickedMesh = pickInfo.pickedMesh; // 获取被点击的模型
      //     console.log("点击了模型：", clickedMesh);
      //     console.log("点击了pickInfo：", pickInfo);
      //     // 在这里执行点击模型后的操作，例如改变颜色、播放动画等
      //     var clickedPosition = pickInfo.pickedPoint;
      //     // 设置图标的位置为点击的世界坐标位置
      //     if (clickedPosition) {

      //       let div = document.createElement('div');
      //       document.createElement('div');
      //       let img = document.createElement('img');
      //       img.src = './icon.png';
      //       img.style = "width:100%;height:100%;"
      //       div.style = "width:20px;height:20px;position:absolute;top:0;left:0;background-color:rgba(255,255,255,0.5);"
      //       console.log(img, 'zijiunit1.html-第120行')
      //       document.body.appendChild(div);
      //       div.appendChild(img);
      //       // 将 HTML 元素定位在点击位置上方
      //       var canvasRect = canvas.getBoundingClientRect();
      //       console.log(canvasRect, 'zijiunit1.html-第125行')
      //       console.log(evt.clientX, 'zijiunit1.html-evt.clientX')
      //       console.log(evt.clientY, 'zijiunit1.html-evt.clientX')
      //       //  var x = canvasRect.left + (canvasRect.width / 2) + (evt.clientX - canvasRect.left);
      //       //  var y = canvasRect.top + (canvasRect.height / 2) - (evt.clientY - canvasRect.top);
      //       //  console.log(x,y, 'zijiunit1.html-第128行')
      //       updateElementPosition()
      //       function updateElementPosition() {
      //         if (clickedPosition) {
      //           // 将 3D 坐标转换为 2D 屏幕坐标
      //           var projectedPosition = scene.pointerX + "px " + (canvas.clientHeight - scene.pointerY) + "px";
      //           console.log(projectedPosition, 'zijiprojectedPositionunit1.html-第138行')
      //           div.style.left = projectedPosition;
      //           div.style.top = projectedPosition;
      //         }
      //       }

      //     }
      //     // icon.centerX = icon.width / 2;
      //     // icon.centerY = icon.height / 2;
      //     // icon.linkWithTransformNode = null; // 确保图标不随任何3D节点移动
      //     // icon.position = clickedPosition; // 设置图标的位置

      //     // // 将图标添加到 UI 中
      //     // advancedTexture.addControl(icon);
      //     // 打印点击位置的坐标
      //     console.log("点击位置坐标:", clickedPosition);
      //   }
      // });
      






// 加载模型
BABYLON.SceneLoader.ImportMesh("", "./", "dapeng2.gltf", scene, function(meshes) {
    const model = meshes[0]; // 获取加载的第一个模型

    // 设置模型可点击
    model.isPickable = true;

    // 创建图标
    const icon = BABYLON.MeshBuilder.CreateSphere("icon", { diameter: 2 }, scene);
    icon.material = new BABYLON.StandardMaterial("iconMaterial", scene);
    icon.material.emissiveColor = new BABYLON.Color3(1, 0, 0); // 设置图标颜色为红色
    icon.isVisible = false; // 默认隐藏图标

    // 检测点击事件
    scene.onPointerObservable.add((ptrEvt) => {
        if (ptrEvt.type === BABYLON.PointerEventTypes.POINTERUP) {
            const pickResult = scene.pick(ptrEvt.event.clientX, ptrEvt.event.clientY);
            console.log(pickResult, 'ziji*-*-*-*-*-*-*-*-*-*-*-*-*-dianji.html-第200行')
            console.log(pickResult.pickedMesh, 'pickResult.pickedMesh*-*-*-*-*-*-*-*-*-*-*-*-*-dianji.html-第200行')
            // if (pickResult.hit && pickResult.pickedMesh === model) {
            if (pickResult.hit ) {
              console.log(pickResult.pickedPoint, '*-*-*-*-*-*-*-*-*-*-*-*-*-dianji.html-第200行')
                // 显示图标并设置位置
                icon.position = pickResult.pickedPoint.add(new BABYLON.Vector3(0, 0, 0)); // 图标位置在模型上方
                icon.isVisible = true;
            }
        }
    });
});



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

      // 处理窗口重置
      window.addEventListener('resize', () => {
        engine.resize();
      });
    } catch (error) {
      console.error('引擎初始化失败:', error);
    }
  </script>
</body>

</html>

在这里插入图片描述
点击后
请添加图片描述

BUG创建者
关注
babylonjs 分部加载模型_BabylonJS加载OBJ或STL模型文件实例
weixin_39922147的博客
12-19 267
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementById("renderCanvas");var engine = new BABYLON.Engine(canvas, true);var createScene = function() {// This creates a basic Babyl...
babylonjs 分部加载模型_babylonjs使用笔记
weixin_39790504的博客
12-19 2374
目录一、介绍了解1、游乐场：playground2、沙盒：sanbox1)Nodes2)Materials3)Textrues3、在线例子：examples二、模型文件三、项目使用1、文件包引入2、具现实现1)创建canvas画布2)加载3d引擎3)创建场景对象4)创建相机5)创建光源6)导入模型BABYLON.SceneLoader.AppendBABYLON.SceneLoader.Impor...
Babylon加载本地gltf模型并完成一些基础的点击操作
qq_44897914的博客
07-19 1735
就比如我这个模型是个医院场景，我想控制楼层的显示与隐藏，那么我就要先获取医院节点，然后获取医院节点下的所有子节点，你自己看下楼层（或者你想控制的mesh的name）设计一个逻辑，控制楼层的显示与隐藏，下面是我的例子。假如我们想获取我们点击模型那部分网格的属性信息，并且改变他的颜色，我们可以在引入模型时添加监听器，还记得刚刚导入模型时的回调函数吗，具体的实现逻辑就写在这里面。这样一切准备就绪就可以导入我们的本地模型了，把模型放入public文件夹，最好在新建一个model，把gltf所有文件放进去。
BabylonJS：BabylonJs 3D模型GLTF
02-18
BabylonJS：BabylonJs 3D模型GLTF
Babylon.js场景加载器(Scene Loader)使用指南
最新发布
ttod的博客
06-12 780
本文详细介绍了Babylon.js中SceneLoader的使用方法，主要包括：1)支持的3D模型格式及其插件注册方式；2)通过CDN和NPM引入加载器的不同方法，推荐动态注册优化性能；3)核心加载方法如LoadAssetContainerAsync、AppendSceneAsync等；4)高级技巧包括从字符串数据加载、配置选项和最佳实践建议。文章强调生产环境应使用NPM动态注册，优先选择glb格式，并注意路径处理和性能优化，为开发者提供了全面实用的3D模型加载指南。
Babylonjs学习笔记(十三)——使用wob worker加载模型
localhost
08-01 244
通过web worker加载模型
babylonjs 分部加载模型_如何使用BabylonJS加载OBJ或STL模型
weixin_39607836的博客
12-19 1145
BabylonJS(也就是babylon.js，这是一个和three.js类似的WebGL开发框架)，更多的用在游戏领域。本文说明和演示如何使用babylon.js来加载一个标准3d模型文件，如OBJ或STL。1.首先引入babylon主js和loader(主要是文件解析作用)的js脚本如下：2.创建一个场景varcanvas=document.getElementById("renderC...
babylon.js第一章03：首次导入模型
weixin_63007851的博客
07-18 1928
在内部，设置并返回一个 Promise 对象，但上面的代码对该 Promise 的结果没有任何作用。因此，在对模型执行任何操作之前，必须先确保模型已成功加载。第一个参数可以是三种类型中的任何一种，具体取决于是要加载所有模型、仅加载一个模型还是模型列表。这样你就可以将外部的模型导入到你的web页面中，并且查看他的效果，对模型进行一些简单的操作。如果你在代码调试中没有使用我的模板，那么就请检查一下你的html文件中是否引入了。通过promise的then方法，得到返回结果，对返回结果中的物体进行操作。
babylonjs 分部加载模型_基于babylon3D模型研究3D骨骼动画（1）
weixin_31812189的博客
12-29 1031
3D骨骼动画是实现较为复杂3D场景的重要技术，Babylon.js引擎内置了对骨骼动画的支持，但Babylon.js使用的骨骼动画的模型多是从3DsMax、Blender等3D建模工具转换而来，骨骼动画的具体生成方式被透明化。本文从babylon格式的3D模型文件入手，对骨骼动画数据的生成方式进行具体分析，并尝试建立一个简易的3D骨骼动画生成工具。一、模型文件分析我们从Babylon.js官方网站...
源码【babylonjs】模型展示babylon glft viewer
06-01
这款viewer能够解析gltf文件，加载模型的几何形状、材质、纹理和动画等信息。 5. **交互性**：babylon gltf viewer不仅提供模型的静态展示，还允许用户进行交互操作，如旋转、缩放、平移模型，以及可能的点击事件...
babylonjs 分部加载模型_17 Babylonjs入门进阶 使用场景加载器加载glTF，OBJ，STL模型...
weixin_42355411的博客
01-12 1359
Babylon.js内置的模型格式是.babylon，Babylon.js可以不需要其它额外的插件即可加载。注意：由于你导入的模型可以具有rotationQuaternion的设置，因此再设置rotate可能出现无法预测的问题，警告基本用法要加载指定的类型的文件，Babylon.js首先需要引入相应文件的插件。目前支持的文件格式类型：如果想要快速添加对所有的文件格式的支持，可以将以下脚本引入到页面...
Babylon本地化使用的WEB模型GLTF，OBJ模型预览导出工具
11-08
Babylon.js是一款基于WebGL的图形引擎，Sandbox本地化使用，在WEB端对Babylon，GLTF，GLB，OBJ模型进行预览查看，同时可以导出GLB格式模型的工具。
babylonjs 官方虚拟展厅.glb模型资源
10-27
方便直接把.glb 丢到官方在线沙盒查看，或者是本地加载配合inspector调试。 如果不想下载，可以查看官方在线运行地址： 模型为两个展厅和lightmap二套uv技术展示 https://www.babylonjs-playground.com/#4AJ16M#5 https://www.babylonjs.com/demos/glowingespilit/ https://vernissage.phire.de/
使用 Babylon.js 在 HTML 页面加载 3D 对象
ahuihun5901的博客
05-08 706
五一 Windwos Blogs 推了一篇博客， Babylon.js v3.2 发布了。因为一直有想要在自己博客上加载 3D 对象的冲动，这两天正好看到了，就动手研究研究。本人之前也并没有接触过 WebGL ，这方面算是知识盲区，需求完成之后感觉非常炫酷，顺手写篇博客记录下来。不得不说 3D 打印和 VR 慢慢的开始走进平时的生活了，技术的成熟与硬件成本的变低，结合内容跨平台共享与各种...
babylonjs Web3D模型载入报错解决
zhuyuyaya的博客
04-22 769
babylonjs模型载入报错解决
Babylon 如何使用AssetsManager()，导入多个模型
creatlh的博客
03-30 529
AssetsManager 是 Babylon.js资产管理工具，可以加载多个模型或者纹理，并且在任务完成时提供回调函数。
html导入.obj,如何用Babylon.js导入一个.obj模型
weixin_34795681的博客
07-01 1153
满意答案展开全部 var scene = null;var camera = null;var renderer = null;var mesh = null;var id = null;function init() {renderer = new THREE.WebGLRenderer({//渲染器canvas: document.getElementById('mainCanvas')/...
three.js加载模型失败（跨域问题）
bcbobo21cn的专栏
06-22 1911
CORS，全称Cross-Origin Resource Sharing......；
babylon-loader文档笔记
weixin_45727272的博客
08-19 3695
Babylonjs 加载glTF，OBJ，STL模型 Babylon.js内置的模型格式是.babylon，Babylon.js可以不需要其它额外的插件即可加载。 基本用法 要加载指定的类型的文件，Babylon.js首先需要引入相应文件的插件。 目前支持的文件格式类型： glTF OBJ STL 如果想要快速添加对所有的文件格式的支持，可以将以下脚本引入到页面中： <script src="https://cdn.babylonjs.com/babylon.js"></script&
Babylon 加载3d模型
05-30
### 使用 Babylon.js 加载 3D 模型的方法与示例 Babylon.js 是一个强大的 WebGL 引擎，支持多种 3D 模型格式的加载和渲染。以下是一些常见的 3D 模型格式及其加载方法。 #### 1. 加载 GLTF/GLB 模型 GLTF（GL Transmission Format）是一种高效的 3D 模型格式，广泛用于 Web 和游戏开发。Babylon.js 提供了对 GLTF/GLB 格式的原生支持。 ```javascript import * as BABYLON from "babylonjs"; import "@babylonjs/loaders"; const scene = new BABYLON.Scene(engine); BABYLON.GLTF2Loader.ImportMeshAsync("", "/path/to/models/", "model.glb", scene).then(( meshes ) => { console.log("GLTF model loaded successfully:", meshes); }); ``` 此代码段展示了如何使用 `ImportMeshAsync` 方法异步加载 GLTF/GLB 模型[^1]。 #### 2. 加载 OBJ 模型 OBJ 是另一种常用的 3D 模型格式，通常与材质文件（MTL）一起使用。Babylon.js 支持通过 `@babylonjs/loaders/OBJ` 加载 OBJ 模型。 ```javascript import { OBJFileLoader } from "@babylonjs/loaders/OBJ"; const objLoader = new OBJFileLoader(); objLoader.importMeshAsync(null, "/path/to/models/", "model.obj", scene).then((newMeshes) => { console.log("OBJ model loaded successfully:", newMeshes); }); ``` 需要注意的是，如果模型包含材质信息，则需要确保 MTL 文件路径正确，并在场景中应用相应的纹理[^2]。 #### 3. 加载 FBX 模型 FBX 是一种由 Autodesk 开发的 3D 模型格式，常用于游戏开发。Babylon.js 内置了对 FBX 格式的支持。 ```javascript import * as BABYLON from "babylonjs"; import "@babylonjs/loaders"; BABYLON.FBXLoader.ImportMeshAsync("", "/path/to/models/", "model.fbx", scene).then((meshes) => { console.log("FBX model loaded successfully:", meshes); }); ``` 此代码段展示了如何加载 FBX 模型并将其添加到场景中。 #### 4. 加载 STL 模型 STL 是一种用于表示 3D 打印模型的格式，Babylon.js 提供了对 STL 格式的加载支持。 ```javascript import * as BABYLON from "babylonjs"; import "@babylonjs/loaders"; BABYLON.STLLoader.ImportMeshAsync("", "/path/to/models/", "model.stl", scene).then((meshes) => { console.log("STL model loaded successfully:", meshes); }); ``` 加载 STL 模型后，可以进一步对其进行上色或材质调整[^5]。 #### 5. 骨骼动画模型 对于包含骨骼动画的模型，Babylon.js 提供了内置支持。这些模型通常以 FBX 或 GLTF 格式导出。 ```javascript BABYLON.SceneLoader.Append("/path/to/models/", "animatedModel.gltf", scene, (newScene) => { console.log("Animated model loaded successfully"); }); ``` 骨骼动画的具体实现依赖于模型中的骨骼数据，开发者无需手动处理动画逻辑[^4]。 --- ### 注意事项 - 确保安装了必要的依赖库，例如 `@babylonjs/loaders`。 - 使用 `ImportMeshAsync` 方法时，需提供正确的模型路径和扩展名。 - 对于复杂的模型，可能需要额外配置光照、相机和其他场景元素。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值