Babulon.js导入外部模型及平移模型

最新推荐文章于 2024-05-08 22:43:04 发布

杨杨得意啊

最新推荐文章于 2024-05-08 22:43:04 发布

阅读量2.5k

点赞数

分类专栏： babylon.js 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_48174018/article/details/121467225

版权

babylon.js 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

导入的js文件是在本地导入的，需要本地js的，从浏览器输入以下src的地址后，自己新建文件夹和文件把代码粘进去就行，如果从官网导入把引入文件的地址换一下就行，为：

    <script src="https://preview.babylonjs.com/babylon.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>

这只是第一次用到这个技术所以把自用的代码粘贴上来，以后可能还会需要用到，做一个记录，代码中的模型地址我删掉了，可以根据个人情况修改，Babulon.js支持的模型格式有：

这里用到的是obj模式，导入模型后，如果出现贴图不显示的情况。

模型格式目前我新手知道的有，jpg和tga格式

若没有贴图为白膜的情况，在mtl文件查看一下是不是路径设置错了

newmtl BodyTrans12.mtl
Ns 50.781250
illum 2
Ka 0.000000 0.000000 0.000000
Kd 1.000000 1.000000 1.000000
Ks 0.000000 0.000000 0.000000
map_Kd tex/eagletransareas.jpg
map_Ks tex/eagletransareas.jpg
map_d tex/eagletransareas_t.jpg

newmtl TopFeathers1.mtl
Ns 50.781250
illum 2
Ka 0.000000 0.000000 0.000000
Kd 1.000000 1.000000 1.000000
Ks 0.000000 0.000000 0.000000
map_Kd tex/eaglefeathers.jpg
map_Ks tex/eaglefeathers.jpg
map_d tex/eaglefeathers_t.jpg

其中最重要的map_Kd如果没有，那就手动给他加上，如果不确定哪一块用那种贴图，那就像我一样把它都给上，当模型和贴图以及场景都有的时候，模型发红，说明灯光没有给对，可以根据业务情况设置灯光的行为，推荐链接：6 Babylonjs基础入门光源_现在学习也不晚-CSDN博客光源会在照射方式和颜色方面影响模型网格的显示效果。除非你开启阴影效果，要不然光线可以穿透所有的网格。场景默认的光源数量为4个，可以通过修改增加。光源的类型在Babylon.js中，有四种光源的类型和一系列光源属性。下面介绍一下哪四种点光源点光源是有三维空间中的一个点定义的光。从这一点开始，光向每一个方向发射光线。点光源的一个很好的例子是灯泡。创建点光源需要配置：光源名称，光源位置，场景对...https://blog.csdn.net/qq_30100043/article/details/88095901

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Babulon</title>
  <style>
    html,
    body {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #renderCanvas {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  </style>
</head>

<body>
<!-- 导入依赖 -->
  <script src="js/babylon.js"></script>
  <script src="js/babylonjs.loaders.min.js"></script>
  <script src="js/pep.js"></script>
  <canvas id="renderCanvas" touch-action="none"></canvas>
  <script>
    var obj1, obj2;
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);
    const initScene = () => {
      var scene = new BABYLON.Scene(engine);
      // 设置镜头位置
      var canvas = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 3000, BABYLON.Vector3.Zero(), scene);
      canvas.wheelPrecision = 0.3;
      canvas.attachControl(canvas, true);
      // 灯光
      var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
      light.emissiveColor = new BABYLON.Color3(1, 0, 0);

      // 天空盒大小size
      var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {
        size: 6000.0
      }, scene);
      var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
      skyboxMaterial.backFaceCulling = false;
      // 天空盒地址，这里是网上资源，从浏览器是打不开这个地址的，只能通过项目获取
      skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(
        "https://www.babylonjs-playground.com/textures/TropicalSunnyDay", scene);
      skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
      skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
      skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
      skybox.material = skyboxMaterial;

      // // 场景
      // const scene = new BABYLON.Scene(engine);
      // scene.ambientColor = new BABYLON.Color3(1, 1, 1);
      // 相机
      const camera = new BABYLON.ArcRotateCamera(
        "Camera",
        Math.PI / 2,
        Math.PI / 2,
        30,
        new BABYLON.Vector3(20, 20, 20),
        scene
      );
      return {
        scene,
        light,
        canvas
      };
    };
    const createScene = (scene) => {
      var carTest = undefined;

      // 导入模型写法1，在回调函数中做动画，设置上下轴向下移动-75，设置左右轴向左移动45
      BABYLON.SceneLoader.LoadAssetContainer("文件夹/", "文件.obj", scene, function (container) {
        obj1=container;
        var meshes = container.meshes;
        var materials = container.materials;
        for (var i = 0; i < meshes.length; i++) {
          meshes[i].position.y = -75;
          meshes[i].position.z = 45;
        }
        container.addAllToScene();
      });

      /**导入模型写法2，做动画效果，每一帧向后移动1，起始位置为-1500*/
      BABYLON.SceneLoader.ImportMesh("", "文件夹1/文件夹2/", "文件1.obj", scene, function (object) {
        carTest = object;
        obj2=carTest;
        const animCar = new BABYLON.Animation("carAnimation", "position.x", 200, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

        const carKeys = [];

        for (var i = 0; i < 1500; i++) {
          carKeys.push({
            frame: i,
            value: i - 1500
          });
        }
        animCar.setKeys(carKeys);

        carTest.animations = [];
        carTest.animations.push(animCar);
        // 开始动画
        scene.beginAnimation(carTest, 0, 1500, true);
      });
      const animation = () => {
        
      };
      return { animation };
    }

    const initRender = (scene, animation) => {
      engine.runRenderLoop(function () {
        scene.render();
        animation();
      });
      window.addEventListener("resize", function () {
        engine.resize();
      });
    };

    (() => {
      const { scene } = initScene();
      const { animation } = createScene(scene);
      initRender(scene, animation);
    })();
  </script>
</body>

</html>