Three.js：仅在PlaneGeometry的一侧显示对象

Question

我在Three.js中创建了一个PlaneGeometry，并在其上面放置了一个对象 如果我移动相机以便我可以从下面看到PlaneGeometry，我仍然可以看到顶部对象的部分。如何定义只能从PlaneGeometry上方看到对象？

Image from above
Image from below

// Creating PlaneGeometry
var floorGeometry = new THREE.PlaneGeometry( 100, 100 );
floorGeometry.rotateX( - Math.PI / 2 );
var floorTexture = new THREE.TextureLoader().load( '../img/wood-texture.jpg' );
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(20, 20);
var floorMaterial = new THREE.MeshBasicMaterial({map: floorTexture, side: THREE.DoubleSide});
var floor = new THREE.Mesh( floorGeometry, floorMaterial );
scene.add( floor );

// Creating object on top 
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x444444,wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0.5, 0);
scene.add(cube);

Answer 1

作为解决方法，我将地板设置得更低。如果我放大，我仍然可以看到差距，但它似乎是最佳/唯一的解决方案。

floor.position.y = -0.5;