Babylon.js 实践（十四）：让测试车动起来

2023-09-21 07:02:09

前言

在之前的文章中，我们已经介绍了如何在 Babylon.js 中创建基本场景、加载模型和创建地形。本篇我们将把这些元素结合起来，创建一个会动的测试车场景。

基本思路

加载一个测试车模型。
创建一个简单的道路场景。
使用动画让测试车动起来。
添加碰撞检测，使测试车可以与场景中的其他物体发生碰撞。

加载测试车模型

首先，我们需要加载一个测试车模型。我们可以从网上下载一个免费的测试车模型，也可以自己创建一个模型。

var carModel = BABYLON.SceneLoader.ImportMesh("", "path/to/car.babylon", scene, function (newMeshes) {
    // 模型加载成功后的回调函数
});

创建道路场景

接下来，我们需要创建一个简单的道路场景。我们可以使用 Babylon.js 提供的 GroundMesh 类来创建一个平面，作为道路的地面。

var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 100, height: 100}, scene);
ground.material = new BABYLON.StandardMaterial("groundMaterial", scene);
ground.material.diffuseTexture = new BABYLON.Texture("path/to/ground_texture.jpg", scene);

然后，我们可以使用 BoxBuilder 类来创建一些立方体，作为道路两侧的建筑物。

var building1 = BABYLON.MeshBuilder.CreateBox("building1", {width: 10, height: 20, depth: 10}, scene);
building1.position.x = 20;
building1.position.z = 10;
building1.material = new BABYLON.StandardMaterial("building1Material", scene);
building1.material.diffuseTexture = new BABYLON.Texture("path/to/building1_texture.jpg", scene);

var building2 = BABYLON.MeshBuilder.CreateBox("building2", {width: 10, height: 20, depth: 10}, scene);
building2.position.x = -20;
building2.position.z = -10;
building2.material = new BABYLON.StandardMaterial("building2Material", scene);
building2.material.diffuseTexture = new BABYLON.Texture("path/to/building2_texture.jpg", scene);

让测试车动起来

现在，我们需要让测试车动起来。我们可以使用 AnimationGroup 类来创建一个动画组，并使用 AnimateCamera 类来创建一个相机动画。

var animationGroup = new BABYLON.AnimationGroup("carAnimation");

var carAnimation = new BABYLON.Animation("carMove", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

var carKeys = [];
carKeys.push({
    frame: 0,
    value: new BABYLON.Vector3(0, 0, 0)
});
carKeys.push({
    frame: 100,
    value: new BABYLON.Vector3(10, 0, 0)
});
carAnimation.setKeys(carKeys);

animationGroup.addTargetedAnimation(carAnimation, carModel[0]);

scene.beginAnimation(carModel[0], 0, 100, true);

var cameraAnimation = new BABYLON.Animation("cameraMove", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

var cameraKeys = [];
cameraKeys.push({
    frame: 0,
    value: new BABYLON.Vector3(0, 10, -10)
});
cameraKeys.push({
    frame: 100,
    value: new BABYLON.Vector3(10, 10, -10)
});
cameraAnimation.setKeys(cameraKeys);

animationGroup.addTargetedAnimation(cameraAnimation, scene.activeCamera);

scene.beginAnimation(scene.activeCamera, 0, 100, true);

添加碰撞检测

最后，我们可以添加碰撞检测，使测试车可以与场景中的其他物体发生碰撞。我们可以使用 PhysicsImpostor 类来为测试车和场景中的其他物体添加物理效果。

carModel[0].physicsImpostor = new BABYLON.PhysicsImpostor(carModel[0], BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, restitution: 0.9 }, scene);
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.PlaneImpostor, { mass: 0, restitution: 0.9 }, scene);
building1.physicsImpostor = new BABYLON.PhysicsImpostor(building1, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene);
building2.physicsImpostor = new BABYLON.PhysicsImpostor(building2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene);

scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.CannonJSPlugin());