babylonjs：基础，引入外部gltf

城南已开979

已于 2024-02-28 11:44:27 修改

阅读量1k

点赞数

分类专栏： BABYLON 文章标签： vue.js javascript

于 2023-07-05 11:01:22 首次发布

本文链接：https://blog.csdn.net/weixin_66948502/article/details/131551284

版权

BABYLON 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

引入babylonjs

npm install babylonjs
npm install babylonjs-loaders

"babylonjs": "^6.10.0",
"babylonjs-loaders": "^6.10.0",

打开抗锯齿

that.engine = new BABYLON.Engine(that.canvas, true); // 打开抗锯齿

相机与模型距离

   // 通过设置弧形旋转相机的lowerRadiusLimit和upperRadiusLimit来设置相机距离焦点的距离范围。
      that.camera.lowerRadiusLimit = 3;  //距离最近
      that.camera.upperRadiusLimit = 10; //距离最远

增强渲染效果

// 将postprocess分配给相机以增强渲染效果。
new BABYLON.PassPostProcess(
	"scale_pass", 2.0, that.camera, BABYLON.Texture.LINEAR_LINEAR_MIPNEAREST
);

设置点击方法1


  		  // let activeModel = null;
          // let activeColor = null;
          // 添加点击方法
          // window.addEventListener("click", function () {
          // // We try to pick an object
          //     const pickResult = that.scene.pick(that.scene.pointerX, that.scene.pointerY);
          //     if (pickResult.hit) {
          //       const model = pickResult.pickedMesh;
          //       // model.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
          //       // console.log(model);
          //       that.models = model
          //       // that.addclick(model)
          //       // that.initColor(that.models )
          //     }

          // });
          // window.addEventListener("click", function (e) {
          //     var p = that.scene.pick(e.clientX, e.clientY, function (mesh) {
          //         console.log(mesh);
          //         console.log(mesh.name);
          //         return mesh.name === "ground";  // so only ground will be pickable
          //     });
          //     const pickResult = that.scene.pick(that.scene.pointerX, that.scene.pointerY);
          //     if (pickResult.hit) {
          //       // 选中模型
          //       if (!activeModel) {
          //         // 选中模型不存在
          //         activeModel = pickResult.pickedMesh;
          //         console.log(activeModel);
          //         // activeColor = new BABYLON.Color3(
          //         //   ...Object.values(pickResult.pickedMesh.material.diffuseColor)
          //         // );
          //       }
          //       if (activeModel && activeModel != pickResult.pickedMesh) {
          //         // 选中新模式
          //         activeModel.material.diffuseColor = activeColor;
          //         activeModel = pickResult.pickedMesh;
          //         console.log(activeModel);
          //         // activeColor = new BABYLON.Color3(
          //         //   ...Object.values(pickResult.pickedMesh.material.diffuseColor)
          //         // );
          //       }
          //       activeModel.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
          //     } else if (activeModel) {
          //       // 未选中模型
          //       activeModel.material.diffuseColor = activeColor;
          //       console.log(activeModel);
          //       activeModel = null;
          //       activeColor = null;
          //     }
          //     console.log(p);
          // })

设置点击方法2

		  // 将网格导入场景 引入gltf模型
          BABYLON.SceneLoader.ImportMesh("", "/ShoeOne/", "ShoeOne.gltf", that.scene, (meshes) => {
            console.log(meshes);
            for (let i = 0; i < meshes.length; i++) {
              meshes[i].actionManager = new BABYLON.ActionManager(this.scene);
              meshes[i].actionManager.registerAction(//注册方法
                    new BABYLON.ExecuteCodeAction(
                      BABYLON.ActionManager.OnPickTrigger,//设置点击模型方法
                        ({ source }) => {
                          // that.initColor(source);
                          // console.log();
                          if (that.models!='') {
                            that.hl.removeMesh(that.models)
                          }
                          that.models = source 
                          that.addclick(source)
                        }
                    )
              )
            }
          });

设置点击后模型轮廓发光

//点击模型 边框发光
    addclick(model){ 
      console.log(model);
      this.hl = new BABYLON.HighlightLayer("hl1", this.scene);
      this.hl.addMesh(model, BABYLON.Color3.Green());
      this.hl.isEnabled = true;
      // var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays',1, this.camera, model, 100, 		  BABYLON.Texture.BILINEAR_SAMPLINGMODE, this.engine, true);

     },

示例

<template>
  <div class="hello">
    <div class="tip">
      <canvas id="three"></canvas>
    </div>
    
    <Mabtn @cocorbtn="cocorbtn" @caizhibtn="caizhibtn" @btnopen="btnopen"/>
    <!-- <img src="../../public/ShoeOne/ShoeOne.tex/前片1.jpg" alt=""> -->
  </div>
</template>

<script>
import Mabtn from "../components/mabtn.vue";
import * as BABYLON from "babylonjs"
import 'babylonjs-loaders';

var OBJ = ''
// var state = {
//         initMatsColor : []
//     };
export default {
  name: 'HelloWorld',
  components:{
    Mabtn
  },
  data(){
    return{
      canvas:'',
      engine:'',
      scene:'',
      camera:'',
      models:'',
      hl:'',
    }
  },
  mounted() {
    this.initThree()
    // this.createlight()
    // this.render()
  },
  
  methods: {
    btnopen(){
      // document.querySelector('#three').style.height='100%'
    },
    cocorbtn(color){//修改颜色
      console.log(color);
      console.log(OBJ);
      let numSrt = (color.substring(4, color.length - 1)).split(","); // 颜色转换
      let newColor = new BABYLON.Color3(
          Number.parseInt(numSrt[0]) / 255 -0.2,
          Number.parseInt(numSrt[1]) / 255 -0.2,
          Number.parseInt(numSrt[2]) / 255 -0.2
      );
      // this.models.material.emissiveColor = newColor //自发光设置
      this.models.material.albedoColor = new BABYLON.Color3(newColor.r,newColor.g,newColor.b); //设置颜色
     
    },
    
    initThree() {//初始化
      let that = this
      window.addEventListener('DOMContentLoaded', function(){
        that.canvas = document.getElementById("three"); // 获取到renderCanvas这个要素
        that.engine = new BABYLON.Engine(that.canvas, true); // 打开抗锯齿
       
          /******* 下面就是类似于Playgroud里面createScene函数，但是有一些改动 ******/
          var createScene = function () {
              that.scene = new BABYLON.Scene(that.engine);
              // 这里使用了另一种相机
              // that.camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(3,4,3), that.scene);
              // that.camera.attachControl(that.canvas, true);

              that.camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 1, new BABYLON.Vector3(0, 0, 0), that.scene);
              // 这是相机的位置，覆盖相机的alpha、beta、半径值
              that.camera.setPosition(new BABYLON.Vector3(10, 10, -100));
              // 将相机和画布关联
              that.camera.attachControl(that.canvas, true,0);
              //半径：相机距离目标距离
              that.camera.radius = 30;
              // 相机高于目标中心（原点）的目标高度
              that.camera.heightOffset = 10;
              // 目标在x y平面上绕目标（中心）的目标旋转角度
              that.camera.rotationOffset = 5;
              //从当前位置到目标位置移动相机的加速度
              // that.camera.cameraAcceleration = 0.0005
              //停止的加速度
              // that.camera.maxCameraSpeed = 5
              // 通过设置弧形旋转相机的lowerRadiusLimit和upperRadiusLimit来设置相机距离焦点的距离范围。
              // that.camera.lowerRadiusLimit = 2;
              // that.camera.upperRadiusLimit = 20;
              // 将postprocess分配给相机以增强渲染效果。
              new BABYLON.PassPostProcess("scale_pass", 2.0, that.camera, BABYLON.Texture.LINEAR_LINEAR_MIPNEAREST);
              // 更改成了两束光构成的混合光
              new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), that.scene);
              new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), that.scene);
              // 添加球体
              // BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, that.scene);

              return that.scene;
          };
          /******* End of the create scene function ******/
          
          /* 下面解释createScene()函数怎么用，也就是上一节的第二个问题 */
          that.scene = createScene(); // 首先调用它并赋值给一个变量
          // 注册一个渲染循环来重复渲染场景
          that.engine.runRenderLoop(function () {
                  that.scene.render();
          });
          that.scene.clearColor = new BABYLON.Color3(0.95, 0.95, 0.95); 

          
          // 将网格导入场景 引入gltf模型
          // BABYLON.SceneLoader.ImportMesh(
          //   "", // 网格名称的数组、单个网格名称或用于过滤导入网格的所有网格的空字符串
          //   "/ShoeOne/ShoeOne.gltf", // 定义场景和资源的根url的字符串，或者根url和文件名的串联（例如。	http://example.com/test.glb)
          //   "", // 一个字符串，用于定义场景文件的名称，或以“data:”开头，后跟场景或file对象的字符串版本（默认值：空字符串）
          //   that.scene, // BABYLON的实例。要附加到的场景
          //   // 导入成功时的回调，其中包含导入的网格、particleSystems、骨架和动画组的列表
          //   function (scene) {          
          //     scene.createDefaultCameraOrLight(true, true, true);
          //     // scene.createDefaultEnvironment();
          //   }
          // );
		  // 将网格导入场景 引入gltf模型
          BABYLON.SceneLoader.ImportMesh("", "/ShoeOne/", "ShoeOne.gltf", that.scene, (meshes) => {
   
            console.log(meshes);
            for (let i = 0; i < meshes.length; i++) {
              meshes[i].actionManager = new BABYLON.ActionManager(this.scene);

              meshes[i].actionManager.registerAction(//注册方法
                    new BABYLON.ExecuteCodeAction(
                      BABYLON.ActionManager.OnPickTrigger,//设置点击模型方法
                        ({ source }) => {
                          // that.initColor(source);
                          // console.log();
                          if (that.models!='') {
                            that.hl.removeMesh(that.models)
                          }
                          that.models = source 
                          that.addclick(source)
                        }
                    )
              )
            }

          });

          // 观察浏览器/画布的“resize”事件，也就是大小出现调整的事件
          window.addEventListener("resize", function () {
                  that.engine.resize();
          });
          // let activeModel = null;
          // let activeColor = null;
          // 添加点击方法
          // window.addEventListener("click", function () {
          // // We try to pick an object
          //     const pickResult = that.scene.pick(that.scene.pointerX, that.scene.pointerY);
          //     if (pickResult.hit) {
          //       const model = pickResult.pickedMesh;
          //       // model.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
          //       // console.log(model);
          //       that.models = model
          //       // that.addclick(model)
          //       // that.initColor(that.models )
          //     }

          // });
          // window.addEventListener("click", function (e) {
          //     var p = that.scene.pick(e.clientX, e.clientY, function (mesh) {
          //         console.log(mesh);
          //         console.log(mesh.name);
          //         return mesh.name === "ground";  // so only ground will be pickable
          //     });
          //     const pickResult = that.scene.pick(that.scene.pointerX, that.scene.pointerY);
          //     if (pickResult.hit) {
          //       // 选中模型
          //       if (!activeModel) {
          //         // 选中模型不存在
          //         activeModel = pickResult.pickedMesh;
          //         console.log(activeModel);
          //         // activeColor = new BABYLON.Color3(
          //         //   ...Object.values(pickResult.pickedMesh.material.diffuseColor)
          //         // );
          //       }
          //       if (activeModel && activeModel != pickResult.pickedMesh) {
          //         // 选中新模式
          //         activeModel.material.diffuseColor = activeColor;
          //         activeModel = pickResult.pickedMesh;
          //         console.log(activeModel);
          //         // activeColor = new BABYLON.Color3(
          //         //   ...Object.values(pickResult.pickedMesh.material.diffuseColor)
          //         // );
          //       }
          //       activeModel.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
          //     } else if (activeModel) {
          //       // 未选中模型
          //       activeModel.material.diffuseColor = activeColor;
          //       console.log(activeModel);
          //       activeModel = null;
          //       activeColor = null;
          //     }
          //     console.log(p);
          // })
      });
    },
    //点击模型 边框发光
    addclick(model){ 
      console.log(model);
      this.hl = new BABYLON.HighlightLayer("hl1", this.scene);
      this.hl.addMesh(model, BABYLON.Color3.Green());
      this.hl.isEnabled = true;
      // var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays',1, this.camera, model, 100, 		  BABYLON.Texture.BILINEAR_SAMPLINGMODE, this.engine, true);

     },
        // 窗口监听函数
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
  }
}
</script>

<style scoped>
.tip{
  width: 100%;
  height: 80%;
  position: fixed;
  top: 0;
  left: 0;
}
#three {
  width: 100% !important;
  height: 100% !important;
  /* border: 1px solid rgba(0,0,0,0) !important; */
}
</style>