I'm currently facing an issue while trying to configure a 3D environment in Babylon.js. During testing, I used meshes generated through code.
However, we aim to utilize blender models for the actual environment. When I import a mesh using the scene loader, it simply falls through the floor.
The structure involves running a scene.vue script, which then renders the Floor.vue and Brick.vue components.
Can anyone explain why my cube is still falling through 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>