使用Babylon构建一个运动的汽车
时间: 2024-03-28 16:39:52 浏览: 103
好的,让我们来用Babylon.js构建一个简单的运动汽车场景。以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Moving Car Babylon.js</title>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script>
// 获取canvas元素
var canvas = document.getElementById("renderCanvas");
// 创建Babylon.js引擎
var engine = new BABYLON.Engine(canvas, true);
// 创建场景
var scene = new BABYLON.Scene(engine);
// 添加相机
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// 添加光源
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
// 创建汽车
var car;
BABYLON.SceneLoader.ImportMesh("", "./", "car.babylon", scene, function (newMeshes) {
car = newMeshes[0];
car.position = new BABYLON.Vector3(0, 0, 0);
car.scaling = new BABYLON.Vector3(0.5, 0.5, 0.5);
car.rotation = new BABYLON.Vector3(0, Math.PI / 2, 0);
});
// 创建动画
var animateCar = function () {
var animation = new BABYLON.Animation("carAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keys = [];
keys.push({
frame: 0,
value: -3
});
keys.push({
frame: 100,
value: 3
});
animation.setKeys(keys);
car.animations.push(animation);
scene.beginAnimation(car, 0, 100, true);
};
// 启动引擎并运行场景
engine.runRenderLoop(function () {
scene.render();
});
// 动画延迟一秒后开始播放
setTimeout(animateCar, 1000);
</script>
</body>
</html>
```
在这个例子中,我们创建了一个简单的场景,添加了一个相机和光源,并加载一个名为“car.babylon”的3D汽车模型。然后,我们创建了一个动画来移动汽车,并在场景开始运行时启动它。
请注意,这只是一个简单的示例,您可以根据自己的需要对场景进行更改和扩展。
阅读全文