Javascript 导入的网格没有碰撞-Babylon.js_Javascript_Vue.js_Collision_Mesh

Javascript 导入的网格没有碰撞-Babylon.js

javascript vue.js

Javascript 导入的网格没有碰撞-Babylon.js,javascript,vue.js,collision,mesh,Javascript,Vue.js,Collision,Mesh,我试图在Babylon.js中设置一个3D环境，但遇到了一个问题。我用代码创建的网格测试了我的环境但是，对于真实环境，我们希望使用混合器模型。当我使用场景加载器导入网格时，它直接从地板上跌落设置的方法是运行scene.vue脚本，然后依次渲染Floor.vue和Brick.vue组件有人知道为什么我的立方体还在掉到地板上吗场景.vue <template> <div> <camera v-if="scene" v-bind:

我试图在Babylon.js中设置一个3D环境，但遇到了一个问题。我用代码创建的网格测试了我的环境

但是，对于真实环境，我们希望使用混合器模型。当我使用场景加载器导入网格时，它直接从地板上跌落

设置的方法是运行

scene.vue

脚本，然后依次渲染

Floor.vue

和

Brick.vue

组件

有人知道为什么我的立方体还在掉到地板上吗

场景.vue

<template>
  <div>
    <camera v-if="scene" v-bind:canvas="canvas" v-bind:scene="scene"/>
    <floor v-if="scene" v-bind:scene="scene" v-bind:canvas="canvas"/>
    <brownie v-if="scene" v-bind:scene="scene" v-bind:canvas="canvas"/>
  </div>
</template>
<script>

import * as BABYLON from 'babylonjs';
import Camera from './Camera.vue';
import Brownie from './Brownie';
import Floor from './Floor';

export default {
  name: "Scene",
  components:{
    Camera,
    Floor,
    Brownie,
  },

  props: ["canvas"],
  data(){
    return {
      engine: null,
      scene: null
    }
  },

  mounted() {
    this.engine = new BABYLON.Engine(
        this.canvas,
        true,
        {
          preserveDrawingBuffer: true,
          stencil: true,
        },
    );

    this.scene = new BABYLON.Scene(this.engine);
    this.scene.enablePhysics();
    this.scene.collisionsEnabled = true;
    new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene);


    this.engine.runRenderLoop(() => {
      this.scene.render();
    });
  },
}

</script>

<template>
  <div>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';

export default {
  name: "Floor",
  props: ["scene", "canvas"],

  methods: {
    generateFloor(){
      let floor = BABYLON.MeshBuilder.CreateGround('floor', {width: 50, height: 50});
      floor.position = new BABYLON.Vector3(0, 0, 0);
      floor.physicsImpostor = new BABYLON.PhysicsImpostor(floor, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 0, friction:0.1, restitution:0.8}, this.scene);
    }
  },

  mounted() {
    this.generateFloor();
  }
}
</script>

<style scoped>
</style>

<template>
  <div>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

export default {
  name: "Brownie",
  props: ["scene", "canvas"],

  methods: {
    generateBrownie(){
      // let testObj = BABYLON.MeshBuilder.CreateBox('floor', {width: 1, height: 1});
      // testObj.position = new BABYLON.Vector3(5, 10, 0);
      // testObj.physicsImpostor = new BABYLON.PhysicsImpostor(testObj, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction:0.1, restitution:0.8}, this.scene);

      BABYLON.SceneLoader.ImportMesh("", "./", "cube.glb", this.scene, (newMeshes) => {
        let mesh = newMeshes[0];
        this.scene.meshes.forEach(mesh => {
          mesh.checkCollisions = true;
        });
        mesh.position.x = 0;
        mesh.position.y = 2;
        mesh.position.z = 0;
        mesh.physicsImpostor = new BABYLON.PhysicsImpostor(mesh, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction:0.1, restitution:0.8}, this.scene);
        this.scene.mesh.checkCollisions = true;
      });
    }
  },

  mounted() {
    this.generateBrownie();
  }
}
</script>

<style scoped>
</style>


从“巴比伦JS”进口*作为巴比伦；
从“/Camera.vue”导入相机；
从“./Brownie”导入布朗尼；
从“./楼层”导入楼层；
导出默认值{
名称：“场景”，
组成部分：{
摄像机，
地板，
布朗尼，
},
道具：[“画布”]，
数据（）{
返回{
引擎：空，
场景：空
}
},
安装的（）{
this.engine=新巴比伦发动机(
这是画布，
是的，
{
preserveDrawingBuffer:true，
模具：是的，
},
);
this.scene=新巴比伦.scene（this.engine）；
此.scene.enablePhysics（）；
this.scene.collisionsEnabled=true；
新巴比伦。半球光（'light1'，新巴比伦。矢量3（0，1，0），这个场景）；
this.engine.runRenderLoop（（）=>{
this.scene.render（）；
});
},
}

Floor.vue

<template>
  <div>
    <camera v-if="scene" v-bind:canvas="canvas" v-bind:scene="scene"/>
    <floor v-if="scene" v-bind:scene="scene" v-bind:canvas="canvas"/>
    <brownie v-if="scene" v-bind:scene="scene" v-bind:canvas="canvas"/>
  </div>
</template>
<script>

import * as BABYLON from 'babylonjs';
import Camera from './Camera.vue';
import Brownie from './Brownie';
import Floor from './Floor';

export default {
  name: "Scene",
  components:{
    Camera,
    Floor,
    Brownie,
  },

  props: ["canvas"],
  data(){
    return {
      engine: null,
      scene: null
    }
  },

  mounted() {
    this.engine = new BABYLON.Engine(
        this.canvas,
        true,
        {
          preserveDrawingBuffer: true,
          stencil: true,
        },
    );

    this.scene = new BABYLON.Scene(this.engine);
    this.scene.enablePhysics();
    this.scene.collisionsEnabled = true;
    new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene);


    this.engine.runRenderLoop(() => {
      this.scene.render();
    });
  },
}

</script>

<template>
  <div>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';

export default {
  name: "Floor",
  props: ["scene", "canvas"],

  methods: {
    generateFloor(){
      let floor = BABYLON.MeshBuilder.CreateGround('floor', {width: 50, height: 50});
      floor.position = new BABYLON.Vector3(0, 0, 0);
      floor.physicsImpostor = new BABYLON.PhysicsImpostor(floor, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 0, friction:0.1, restitution:0.8}, this.scene);
    }
  },

  mounted() {
    this.generateFloor();
  }
}
</script>

<style scoped>
</style>

<template>
  <div>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

export default {
  name: "Brownie",
  props: ["scene", "canvas"],

  methods: {
    generateBrownie(){
      // let testObj = BABYLON.MeshBuilder.CreateBox('floor', {width: 1, height: 1});
      // testObj.position = new BABYLON.Vector3(5, 10, 0);
      // testObj.physicsImpostor = new BABYLON.PhysicsImpostor(testObj, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction:0.1, restitution:0.8}, this.scene);

      BABYLON.SceneLoader.ImportMesh("", "./", "cube.glb", this.scene, (newMeshes) => {
        let mesh = newMeshes[0];
        this.scene.meshes.forEach(mesh => {
          mesh.checkCollisions = true;
        });
        mesh.position.x = 0;
        mesh.position.y = 2;
        mesh.position.z = 0;
        mesh.physicsImpostor = new BABYLON.PhysicsImpostor(mesh, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction:0.1, restitution:0.8}, this.scene);
        this.scene.mesh.checkCollisions = true;
      });
    }
  },

  mounted() {
    this.generateBrownie();
  }
}
</script>

<style scoped>
</style>


从“巴比伦JS”进口*作为巴比伦；
导出默认值{
名称：“楼层”，
道具：[“场景”，“画布”]，
方法：{
生成地板（）{
let floor=BABYLON.MeshBuilder.CreateGround（'floor'，{宽度：50，高度：50}）；
floor.position=新巴比伦矢量3（0,0,0）；
floor.physicsImpostor=新巴比伦.physicsImpostor（floor，巴比伦.physicsImpostor.BoxImpostor，{质量：0，摩擦力：0.1，恢复：0.8}，此.scene）；
}
},
安装的（）{
这个。generateFloor（）；
}
}

Brownie.vue

<template>
  <div>
    <camera v-if="scene" v-bind:canvas="canvas" v-bind:scene="scene"/>
    <floor v-if="scene" v-bind:scene="scene" v-bind:canvas="canvas"/>
    <brownie v-if="scene" v-bind:scene="scene" v-bind:canvas="canvas"/>
  </div>
</template>
<script>

import * as BABYLON from 'babylonjs';
import Camera from './Camera.vue';
import Brownie from './Brownie';
import Floor from './Floor';

export default {
  name: "Scene",
  components:{
    Camera,
    Floor,
    Brownie,
  },

  props: ["canvas"],
  data(){
    return {
      engine: null,
      scene: null
    }
  },

  mounted() {
    this.engine = new BABYLON.Engine(
        this.canvas,
        true,
        {
          preserveDrawingBuffer: true,
          stencil: true,
        },
    );

    this.scene = new BABYLON.Scene(this.engine);
    this.scene.enablePhysics();
    this.scene.collisionsEnabled = true;
    new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene);


    this.engine.runRenderLoop(() => {
      this.scene.render();
    });
  },
}

</script>

<template>
  <div>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';

export default {
  name: "Floor",
  props: ["scene", "canvas"],

  methods: {
    generateFloor(){
      let floor = BABYLON.MeshBuilder.CreateGround('floor', {width: 50, height: 50});
      floor.position = new BABYLON.Vector3(0, 0, 0);
      floor.physicsImpostor = new BABYLON.PhysicsImpostor(floor, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 0, friction:0.1, restitution:0.8}, this.scene);
    }
  },

  mounted() {
    this.generateFloor();
  }
}
</script>

<style scoped>
</style>

<template>
  <div>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

export default {
  name: "Brownie",
  props: ["scene", "canvas"],

  methods: {
    generateBrownie(){
      // let testObj = BABYLON.MeshBuilder.CreateBox('floor', {width: 1, height: 1});
      // testObj.position = new BABYLON.Vector3(5, 10, 0);
      // testObj.physicsImpostor = new BABYLON.PhysicsImpostor(testObj, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction:0.1, restitution:0.8}, this.scene);

      BABYLON.SceneLoader.ImportMesh("", "./", "cube.glb", this.scene, (newMeshes) => {
        let mesh = newMeshes[0];
        this.scene.meshes.forEach(mesh => {
          mesh.checkCollisions = true;
        });
        mesh.position.x = 0;
        mesh.position.y = 2;
        mesh.position.z = 0;
        mesh.physicsImpostor = new BABYLON.PhysicsImpostor(mesh, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction:0.1, restitution:0.8}, this.scene);
        this.scene.mesh.checkCollisions = true;
      });
    }
  },

  mounted() {
    this.generateBrownie();
  }
}
</script>

<style scoped>
</style>


从“巴比伦JS”进口*作为巴比伦；
进口“装载机”；
导出默认值{
名字：“布朗尼”，
道具：[“场景”，“画布”]，
方法：{
生成树（）{
//设testObj=BABYLON.MeshBuilder.CreateBox（'floor'，{width:1，height:1}）；
//testObj.position=新巴比伦矢量3（5,10,0）；
//testObj.physicsImpostor=新的巴比伦.physicsImpostor（testObj，巴比伦.physicsImpostor.BoxImpostor，{质量：1，摩擦力：0.1，恢复：0.8}，这个.scene）；
BABYLON.SceneLoader.ImportMesh（“，”/“，“cube.glb”，this.scene，（newmesh）=>{
设mesh=newmesh[0]；
this.scene.mesh.forEach（mesh=>{
mesh.checkCollisions=true；
});
网格位置x=0；
网格位置y=2；
网格位置z=0；
mesh.physicsImpostor=new BABYLON.physicsImpostor（mesh，BABYLON.physicsImpostor.BoxImpostor，{mass:1，摩擦力：0.1，恢复：0.8}，this.scene）；
this.scene.mesh.checkCollisions=true；
});
}
},
安装的（）{
这个。generateBrownie（）；
}
}