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

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

change dimension of an object by drop-down list selection JavaScript

javascript

3d-modelling