frodus frodus -4 years ago 155
Javascript Question

Three.js render not showing a simple cube when I want to show simple mesh

I want to show a simple plane and a simple cube but the plane hides the cube, the cube is located between the camera and the plane, but the plane "hides" the cube.

This is my scene without plane:

and here it is with the plane added:

I am pretty sure they are in a location where the cube should to be showed.

Here is my code:

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);

var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color:0x777777});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 10;
cube.position.z = 5;

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;
//plane.receiveShadow = true;

camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;

var spotLight = new THREE.SpotLight(0xffffff);




Answer Source

Pay attention to names of objects and order and correctness of parameters in methods:

camera = new THREE.PerspectiveCamera(45,Window.innerWidth,window.innerHeight,0.1,1000)

should be like:

camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000)

jsfiddle example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download