我试图在Babylon.js中设置一个3D环境,但我遇到了一个问题。我用网格创建的槽代码测试了我的环境。
然而,对于真实的环境,我们想要使用搅拌机模型。当我使用场景加载器导入一个网格时,它就会直接掉到地板上。
设置的方式是运行scene.vue
脚本,然后呈现Floor.vue
和Brick.vue
组件。
有人知道我的立方体为什么还掉在地板上吗?
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>
发布于 2022-03-04 07:21:51
在你的Floor.vue中,你需要为你的地板启用碰撞,就像这样,
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);
floor.checkCollisions = true;
}
},
我希望这能帮上忙!
https://stackoverflow.com/questions/65933675
复制相似问题