I'm trying to apply an environment map to a sphere, and followed both of the following tutorials to set up a basic scene with correct (as far as I can tell) lighting and geometry:
- http://www.aerotwist.com/tutorials/getting-started-with-three-js/
- http://www.aerotwist.com/tutorials/create-your-own-environment-maps/demo/
For some reason, however, the sphere renders as a simple flat black disk when I add the environment map. Without the envMap setting it renders the colored sphere correctly.
The full code is below, which is called from the .html file with Sphere.init() after the DOM loads:
Sphere = {
init: function(){
this.WIDTH = 800;
this.HEIGHT = 600;
this.VIEW_ANGLE = 45;
this.ASPECT = this.WIDTH / this.HEIGHT;
this.NEAR = 0.1;
this.FAR = 10000;
var container = $('#sphere');
this.renderer = new THREE.WebGLRenderer();
this.camera = new THREE.PerspectiveCamera(
this.VIEW_ANGLE,
this.ASPECT,
this.NEAR,
this.FAR
);
this.scene = new THREE.Scene();
this.scene.add(this.camera);
this.camera.position.z = 300;
this.renderer.setSize(this.WIDTH, this.HEIGHT);
container.append(this.renderer.domElement);
var urls = [
'pos-x.png',
'pos-x.png',
'pos-x.png',
'pos-x.png',
'pos-x.png',
'pos-x.png'
],
cubemap = THREE.ImageUtils.loadTextureCube(urls);
cubemap.format = THREE.RGBFormat;
var reflectionMaterial = new THREE.MeshPhongMaterial({
color: 0x0000ff,
envMap: cubemap
});
var radius = 50, segments = 16, rings = 16;
var sphereGeometry = new THREE.SphereGeometry(radius, segments, rings);
var sphere = new THREE.Mesh(sphereGeometry, reflectionMaterial);
this.scene.add(sphere);
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
this.scene.add(pointLight);
this.renderer.render(this.scene, this.camera);
}
};