Babylon.js加载模型到场景中

  • 路由
    • 下一篇
    • 历史回顾
  • 前言
  • 最终实现效果
  • 本文实现效果
  • 完整代码
  • 操作分解（Babylon.js模型格式转换与导入）
    • 0.在开源模型网上下载一个模型/自己制作一个
    • 1.转换为.babylon文件
    • 2.将模型文件放在服务器上
      • 方案一（最新发现的方案）
      • 方案二
      • 方案三
    • 3.加载模型
      • 3-1.async同步形式（obj模型结构）
      • 3-2.回调的形式（obj模型结构）
      • 3-3.async同步形式（glb模型结构）
      • 3-4.回调的形式（glb模型结构）
      • 问题：导入模型后一片黑
    • 4.（额外）启用调试窗口
  • 后续计划
    • Babylon.js
    • Blockly
  • 开源项目GitHub链接
  • 资源下载链接
  • 你的点赞是我继续编写的动力

路由

下一篇

  • Vue实现图形化积木式编程(三) ---- Babylon.js点击拖拽移动模型

历史回顾

  • Vue实现图形化积木式编程(一) ---- Babylon.js基础场景搭建

前言

前段时间想要做一个web端的图形化积木式编程（类似少儿编程）的案例，网上冲浪了一圈又一圈，终于技术选型好，然后代码一顿敲，终于出来了一个雏形。

TIPS：该案例设计主要参考iRobot Coding,只用做学习用途，侵删。

https://code.irobot.com/#/

最终实现效果

本文实现效果

  • 加载模型到场景中

完整代码

  • 加载模型实现
<template><div style="height: 100%;width: 100%;"><div><canvas id="renderCanvas"></canvas></div></div>
</template><script>
import * as BABYLON from 'babylonjs';
import * as BABYLON_MATERAIAL from "babylonjs-materials"async function loadScene() {//第一篇场景初始化，可看上一篇文章var scene = initScene()//本文内容，加载网络模型await initRobot(scene)//开启debug窗口// scene.debugLayer.show()}async function initRobot(scene) {console.log('initRobot')//模型url路径const url = "http://localhost:8887/"//模型名称const modelName = "sportcar.babylon"var result = await BABYLON.SceneLoader.ImportMeshAsync(null, url, modelName, scene);var meshes = result.meshesconsole.log("meshes", meshes)const scale = 10//缩放比例for (var mesh of meshes) {mesh.scaling = new BABYLON.Vector3(scale, scale, scale)}
}function initScene() {//获取到renderCanvas这个元素var canvas = document.getElementById("renderCanvas");//初始化引擎var engine = new BABYLON.Engine(canvas, true);//初始化场景var scene = new BABYLON.Scene(engine);//注册一个渲染循环来重复渲染场景engine.runRenderLoop(function () {scene.render();});//浏览器窗口变化时监听window.addEventListener("resize", function () {engine.resize();});//相机初始化var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(0, 0, 10), scene);camera.setPosition(new BABYLON.Vector3(20, 200, 400));//相机角度限制camera.upperBetaLimit = 1.5;//最大z轴旋转角度差不多45度俯瞰camera.lowerRadiusLimit = 50;//最小缩小比例camera.upperRadiusLimit = 1500;//最大放大比例//变焦速度camera.wheelPrecision = 1; //电脑滚轮速度 越小灵敏度越高camera.pinchPrecision = 20; //手机放大缩小速度 越小灵敏度越高scene.activeCamera.panningSensibility = 100;//右键平移灵敏度// 将相机和画布关联camera.attachControl(canvas, true);//灯光初始化var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);//设置高光颜色light.specular = new BABYLON.Color3(0, 0, 0);//设置灯光强度light.intensity = 1// 绿地初始化var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);materialPlane.diffuseColor = new BABYLON.Color3(152 / 255.0, 209 / 255.0, 115 / 255.0)materialPlane.backFaceCulling = false;materialPlane.freeze()var plane = BABYLON.MeshBuilder.CreateDisc("ground", {radius: 3000}, scene);plane.rotation.x = Math.PI / 2;plane.material = materialPlane;plane.position.y = -0.1;plane.freezeWorldMatrix()//网格地板初始化const groundSide = 144;var ground = BABYLON.Mesh.CreateGround("ground", groundSide, groundSide, 1, scene, true);var groundMaterial = new BABYLON_MATERAIAL.GridMaterial("grid", scene);groundMaterial.mainColor = BABYLON.Color3.White();//底板颜色groundMaterial.alpha = 1;//透明度const gridLineGray = 0.95;groundMaterial.lineColor = new BABYLON.Color3(gridLineGray, gridLineGray, gridLineGray);groundMaterial.backFaceCulling = true; // 可看到背面//大网格间距groundMaterial.majorUnitFrequency = 16;//小网格间距groundMaterial.minorUnitVisibility = 0;const gridOffset = 8; // 网格偏移量groundMaterial.gridOffset = new BABYLON.Vector3(gridOffset, 0, gridOffset);groundMaterial.freeze(); // 冻结材质，优化渲染速度ground.material = groundMaterialground.freezeWorldMatrix()//天空盒初始化var skyMaterial = new BABYLON_MATERAIAL.SkyMaterial("skyMaterial", scene);skyMaterial.inclination = 0skyMaterial.backFaceCulling = false;var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);skybox.material = skyMaterial;return scene
}export default {name: "test",data() {return {}},async mounted() {//加载场景await loadScene()},
}
</script><style scoped>
#renderCanvas {width: 680px;height: 680px;touch-action: none;z-index: 10000;border-radius: 10px;
}
</style>

操作分解（Babylon.js模型格式转换与导入）

0.在开源模型网上下载一个模型/自己制作一个