0

I have a grid of cubes and I need to show a button while hovering over a row. I have created the button with a plane geometry but while setting is position.y such that it stands right on top of the row, it displaces along the z axis and appears against another row at the back giving the wrong appearance. Please see the code below for the button and also a screenshot of the issue. The white button should appear right on top of the orange row.

I have tried to do what this post talks about. But inspite of all that, I am unable to fix it. Not sure why making the object high enough should affect the depth. I have not added any translation or rotation to it. Please help.

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

cotcs
  • 23
  • 7

1 Answers1

0

Creating 2 scenes and adding the button on the second scene worked. The link mentioned in the question actually worked. I had forgotten to set autoclear to false.

cotcs
  • 23
  • 7