Question

我需要通过下拉列表选择来更改3D模型中特定对象的尺寸。

var activities = document.getElementById("stand");   
var wallMaterial = new THREE.MeshLambertMaterial({color:resources.settings.wallColor});
var partitionLeft = new THREE.Mesh(geometries.partition, materials.partitionMaterial);

alert(activities);

activities.addEventListener("change", function() {
    if(activities.options[activities.selectedIndex].value=="stand1") {
        var footRight = new THREE.Mesh(new THREE.BoxGeometry(0.140, 0.15, 0.05), materials.footRightMaterial);
        partitionLeft.add(footRight);
        footRight.position.set(1.15,-1.85,0);

    } else {
        var footRight = new THREE.Mesh(new THREE.BoxGeometry(6.450, 4.15, 5.25), materials.footRightMaterial);
        partitionLeft.add(footRight);
        footRight.position.set(0.15,-0.85,0);
    }
});

此解决方案中的问题是，当从一个选择切换到另一个（下拉）时，选项1的先前尺寸仍然存在。它没有隐藏。

选择第二个选项后，两个图形都出现在模型中。然后，从下拉菜单更改选项时不会发生任何事情。这两个对象都出现在模型中。

我需要做的是在更改下拉菜单后隐藏1个对象。

有什么建议吗？

Answer 1

问题是您不断向partitionLeft添加网格，但从未删除它们。

尝试这样的方法：

var activities = document.getElementById("stand");   
var wallMaterial = new THREE.MeshLambertMaterial({color:resources.settings.wallColor});
var partitionLeft = new THREE.Mesh(geometries.partition, 
materials.partitionMaterial);

alert(activities);


var footRight1 = new THREE.Mesh(new THREE.BoxGeometry(0.140, 0.15, 0.05), materials.footRightMaterial);
footRight1.position.set(1.15,-1.85,0);

var footRight2 = new THREE.Mesh(new THREE.BoxGeometry(6.450, 4.15, 5.25), materials.footRightMaterial);
footRight2.position.set(0.15,-0.85,0);

activities.addEventListener("change", function() {
    if(activities.options[activities.selectedIndex].value=="stand1") {
        partitionLeft.add(footRight1);
        partitionLeft.remove(footRight2);
    } else {
        partitionLeft.add(footRight2);
        partitionLeft.remove(footRight1);
    }
});

通过下拉列表选择JavaScript更改对象的尺寸

1 个答案: