javascript - Imported mesh is not colliding - Babylon.js

Question

I'm trying to setup a 3D environment in Babylon.js, but I am running into an issue. I tested my environment with meshes created trough code.

However, for the real environment we want to use blender models. When I import a mesh using the scene loader, it just falls straight trough the floor.

The way this is setup is that I run a scene.vue script, and that in turn renders the Floor.vue and Brick.vue component.

Does anyone understand why my cube is still falling into the floor?

Scene.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>

Floor.vue

<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>

Brownie.vue

<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>

question from:https://stackoverflow.com/questions/65933675/imported-mesh-is-not-colliding-babylon-js

Answer 1

Waitting for answers