Babylon.js技术问题：如何让场地中的炮塔全部朝向中心？

下面是调整后的代码，确保所有炮塔初始朝向中心，同时保留摆动动画：

var canvas = document.getElementById('renderCanvas');
canvas.width = 800; // 设置画布宽度
canvas.height = 600; // 设置画布高度
var engine = new BABYLON.Engine(canvas, true);

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    scene.enablePhysics();

    // 创建相机
    var camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 2, Math.PI / 4, 5, new BABYLON.Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    console.log("添加主光源!");

    var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);
    light0.diffuse = new BABYLON.Color3(1, 0, 0);
    light0.specular = new BABYLON.Color3(1, 1, 1);
    console.log("添加点光源!");

    // 创建炮塔
    var turretColors = [
        new BABYLON.Color3(1, 0, 0),
        new BABYLON.Color3(0, 1, 0),
        new BABYLON.Color3(0, 0, 1),
        new BABYLON.Color3(1, 1, 0)
    ];

    var turrets = [];

    for (var i = 0; i < 4; i++) {
        var turret = BABYLON.MeshBuilder.CreateBox('turret' + i, { size: 0.5 }, scene);
        turret.position.x = (i % 2 === 0)? -2 : 2;
        turret.position.z = (i < 2)? -2 : 2;
        turret.material = new BABYLON.StandardMaterial('turretMat' + i, scene);
        turret.id = "turret" + i;
        console.log("创建颜色为" + turretColors[i] + "的炮塔");
        // 设置炮塔亮色
        turret.material.diffuseColor = turretColors[i];

        // 核心修改：自动让炮塔看向中心，替代手动计算旋转角度
        turret.lookAt(BABYLON.Vector3.Zero());

        var cylinder = BABYLON.MeshBuilder.CreateCylinder('cylinder' + i, { height: 0.8, diameter: 0.2 }, scene);
        cylinder.material = new BABYLON.StandardMaterial('cylinderMat' + i, scene);
        cylinder.material.diffuseColor = new BABYLON.Color3(0, 1, 1); // 设置圆柱颜色

        // 调整圆柱位置，使其在炮塔顶部并指向炮塔前方（中心方向）
        cylinder.position.y = 0.25;
        cylinder.position.z = 0.25;
        cylinder.rotation.x = Math.PI / 2;
        cylinder.parent = turret;

        // 修改摆动动画：基于初始朝向进行左右摆动，而非从0开始
        var initialYRotation = turret.rotation.y;
        var oscillationAnimation = new BABYLON.Animation('oscillationAnimation', 'rotation.y', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        var oscillationKeys = [];
        oscillationKeys.push({ frame: 0, value: initialYRotation });
        oscillationKeys.push({ frame: 15, value: initialYRotation + Math.PI / 4 });
        oscillationKeys.push({ frame: 30, value: initialYRotation });
        oscillationAnimation.setKeys(oscillationKeys);
        turret.animations = [oscillationAnimation];
        scene.beginAnimation(turret, 0, 30, true);

        turrets.push(turret);
    }

    return scene;
};

var scene = createScene();
engine.runRenderLoop(function () {
    scene.render();
});

window.addEventListener('resize', function () {
    engine.resize();
});

关键修改说明： #

1. 自动朝向中心：用turret.lookAt(BABYLON.Vector3.Zero())替代手动设置旋转角度，Babylon.js会自动计算正确的旋转参数，确保所有炮塔精准指向中心，不用再手动调整单个炮塔的X/Y轴旋转值。
2. 修正动画逻辑：原动画从0开始旋转会覆盖初始朝向，现在改为基于炮塔初始朝向值进行摆动，保证动画是在对准中心的基础上左右转动。
3. 移除冗余代码：删除了针对i=2、i=3的手动旋转设置，lookAt方法已经处理了所有方向问题。

内容的提问来源于stack exchange，提问作者FoxDeploy