javascript - 如何选择一个网格而不是在 BabylonJS 中单击的所有网格

Question

我在 BabylonJs 中从事一个项目，我在选择网格时遇到了问题。我认为这是 OOP 或 PickResult.pickedMesh 的问题，我不确定。我尝试了很多事情，比如把我所有的论点都放在这个上面。但没有任何效果:(。

问题是当我点击一个网格时，我可以移动它、颜色等。但是如果我点击另一个网格，第一个保持选中状态，我修改两个网格。我只想修改最后单击的网格而不是所有网格:( ..

处理点击和移动的代码部分:

function canvasClick() {
canvas.addEventListener("click", function (evt, pickResult) {
    //offsetX/Y are not implemented on FireFox
    var offsetX = (evt.offsetX || evt.clientX - $(evt.target).offset().left + window.pageXOffset);
    var offsetY = (evt.offsetY || evt.clientY - $(evt.target).offset().top + window.pageYOffset);
    pickResult = scene.pick(offsetX, offsetY);
    this.pickResult = pickResult;
    // if the click hits the ground object, we change the impact position
    if (this.pickResult.pickedMesh) {
        positionFull = this.pickResult.pickedMesh.position;
        positionHtmlX = positionFull.toString().split('Y', [1]).toString().slice([4]);
        positionHtmlY = positionFull.toString().split('Z', [1]).toString().split('').reverse().join('').split(':', [1]).toString().split('').reverse().join('');
        positionHtmlZ = positionFull.toString().split('').reverse().join('').slice([1]).split(':', [1]).toString().split('').reverse().join('');
        scalingFull = this.pickResult.pickedMesh.scaling;
        scalingHtmlX = scalingFull.toString().split('Y', [1]).toString().slice([3]);
        scalingHtmlY = scalingFull.toString().split('Z', [1]).toString().split('').reverse().join('').split(':', [1]).toString().split('').reverse().join('');
        scalingHtmlZ = scalingFull.toString().split('').reverse().join('').slice([1]).split(':', [1]).toString().split('').reverse().join('');

        /* Mouvement */
        $('#Forward').on("click", function () {
            pickResult.pickedMesh.position.z += 1;
        });
        $('#Backward').on("click", function () {
            pickResult.pickedMesh.position.z -= 1;
        });
        $('#Right').on("click", function () {
            pickResult.pickedMesh.position.x += 1;
        });
        $('#Left').on("click", function () {
            pickResult.pickedMesh.position.x -= 1;
        });
        $('#Up').on("click", function () {
            pickResult.pickedMesh.position.y += 1;
        });
        $('#Down').on("click", function () {
            pickResult.pickedMesh.position.y -= 1;
        });
        $('#Down').on("click", function () {
            pickResult.pickedMesh.position.y -= 1;
        });
        $('#Down').on("click", function () {
            pickResult.pickedMesh.position.y -= 1;
        });
        /* Rotation */
        $('#RotationLeft').on("click", function () {
            pickResult.pickedMesh.rotation.y -= Math.PI / 6;
        });
        $('#RotationRight').on("click", function () {
            pickResult.pickedMesh.rotation.y += Math.PI / 6;
        });
        /* Scaling */
        /* x */
        $('#Scalingxplus').on("click", function () {
            pickResult.pickedMesh.scaling.x += 5;
        });
        $('#Scalingxmoins').on("click", function () {
            pickResult.pickedMesh.scaling.x -= 5;
        });
        /* y */
        $('#Scalingyplus').on("click", function () {
            pickResult.pickedMesh.scaling.y += 5;
        });
        $('#Scalingymoins').on("click", function () {
            pickResult.pickedMesh.scaling.y -= 5;
        });
        /* z */
        $('#Scalingzplus').on("click", function () {
            pickResult.pickedMesh.scaling.z += 5;
        });
        $('#Scalingzmoins').on("click", function () {
            pickResult.pickedMesh.scaling.z -= 5;
        });
        /* Color */
        /* Bleu */
        $('#bleu').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(0, 0, 1);
        });
        /* BleuPlus */
        $('#bleuPlus').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(0, 1, 1);
        });
        /* Vert */
        $('#vert').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(0, 0.5019607843137255, 0);
        });
        /* VertPlus */
        $('#vertPlus').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(0.6784313725490196, 1, 0.6784313725490196);
        });
        /* Jaune */
        $('#jaune').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(1, 1, 0);
        });
        /* Orange */
        $('#orange').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(1, 0.6470588235294118, 0);
        });
        /* Blanc */
        $('#blanc').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
        });
        /* Rose */
        $('#rose').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(1, 0.7529411764705882, 0.796078431372549);
        });
        /* VioletPlus */
        $('#violetPlus').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(0.9333333333333333, 0.5098039215686275, 0.9333333333333333);
        });
        /* Violet */
        $('#violet').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(0.5019607843137255, 0, 0.5019607843137255);
        });
        /* Rouge */
        $('#rouge').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
        });
        /* OrangePlus */
        $('#orangePlus').on("click", function () {
            pickResult.pickedMesh.material.diffuseColor = new BABYLON.Color3(1, 0.2705882352941176, 0);
        });

        /* Suppression Object */
        $('#Remove_group').on("click", function () {
            pickResult.pickedMesh.dispose();
        });
    };
});
}

Answer 1

您应该将事件更改为:

var that = this;
$('#Forward').on("click", function () {
            that.pickResult.pickedMesh.position.z += 1;
        });