My objective is to display a simple plane and a cube, however, the cube is being hidden by the plane. The position of the cube is between the camera and the plane, but for some reason, the plane appears to be blocking the view of the cube.
This is how my scene looks without the plane:
And this is the scene with the added plane:
I believe that they are placed in such a way that the cube should be visible.
Below is the code I am using:
var scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(45, Window.innerWidth,window.innerHeight,0.1,1000),
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
var axes = new THREE.AxisHelper(20);
scene.add(axes);
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x777777});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 10;
cube.position.z = 5;
scene.add(cube);
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x55cc88});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5 * Math.PI;;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40,60,-10);
scene.add(spotLight);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
$("#WebGl-salida").append(renderer.domElement);