如何在不沿 z 轴移动按钮的情况下将平面几何按钮放置在一排立方体的顶部？

Question

我有一个立方体网格，我需要在将鼠标悬停在一行上时显示一个按钮。我创建了带有平面几何形状的按钮，但是当设置为 position.y 时，它正好位于该行的顶部，它沿 z 轴移动并出现在后面的另一行上，给出了错误的外观。请查看下面的按钮代码以及问题的屏幕截图。白色按钮应出现在橙色行的正上方。

我已经尝试按照 this post 所说的去做。但尽管如此，我还是无法修复它。不确定为什么让物体足够高会影响深度。我没有给它添加任何平移或旋转。请帮忙。

function createButtonForEachRow(numCols, width, offsetX, rowIndex, cubeSize , cubePadding)
                {                    
                    var geometry = new THREE.PlaneGeometry( width, 1);
                    var material = new THREE.MeshBasicMaterial( {map: buttonTexture, side:THREE.DoubleSide } );
                    material.map.minFilter = THREE.LinearFilter;
                   
                    var plane = new THREE.Mesh(geometry, material);
                   
                    var referenceZPos = 1-  (rowIndex * (cubeSize + cubePadding));
                   plane.position.x = offsetX + cubeSize + cubePadding * numCols + 3 ;
                   plane.position.y =  cubeSize*3;
                
                   plane.position.z = referenceZPos;
                   // plane.rotation.x = 3 * Math.PI/2;          
                 
                    
                    plane.visible = false;
                    return plane;

                    
                }

Screenshot

Answer 1

创建 2 个场景并在第二个场景上添加按钮成功了。问题中提到的 link 确实有效。我忘了将自动清除设置为 false。

如何在不沿 z 轴移动按钮的情况下将平面几何按钮放置在一排立方体的顶部？

How to place a Plane geometry button on top of a row of cubes without displacing the button along z axis?

button

three.js

rotation

geometry

mouseevent