And refraction /reflection cube mapping is fixed. Also added two new examples for refraction.

Fix is a bit dirty, but at least it's short ;)

build/Three.js

@@ -120,7 +120,7 @@ c(k,q,p,O,Y,C)}else Y&&c(k,q,p,O,Y,C)}}}else if(O instanceof THREE.RenderableFac
 THREE.WebGLRenderer=function(a){function c(e,g){var n;if(e=="fragment")n=b.createShader(b.FRAGMENT_SHADER);else if(e=="vertex")n=b.createShader(b.VERTEX_SHADER);b.shaderSource(n,g);b.compileShader(n);if(!b.getShaderParameter(n,b.COMPILE_STATUS)){alert(b.getShaderInfoLog(n));return null}return n}var f=document.createElement("canvas"),b,d,j=new THREE.Matrix4,o;a=function(e,g){if(e){var n,h,k,q=pointLights=maxDirLights=maxPointLights=0;n=0;for(h=e.lights.length;n<h;n++){k=e.lights[n];k instanceof THREE.DirectionalLight&&
 q++;k instanceof THREE.PointLight&&pointLights++}if(pointLights+q<=g){maxDirLights=q;maxPointLights=pointLights}else{maxDirLights=Math.ceil(g*q/(pointLights+q));maxPointLights=g-maxDirLights}return{directional:maxDirLights,point:maxPointLights}}return{directional:1,point:g-1}}(a,4);this.domElement=f;this.autoClear=true;try{b=f.getContext("experimental-webgl",{antialias:true})}catch(r){}if(!b){alert("WebGL not supported");throw"cannot create webgl context";}b.clearColor(0,0,0,1);b.clearDepth(1);b.enable(b.DEPTH_TEST);
 b.depthFunc(b.LEQUAL);b.frontFace(b.CCW);b.cullFace(b.BACK);b.enable(b.CULL_FACE);b.enable(b.BLEND);b.blendFunc(b.ONE,b.ONE_MINUS_SRC_ALPHA);b.clearColor(0,0,0,0);(function(e,g){d=b.createProgram();b.attachShader(d,c("fragment",["#ifdef GL_ES\nprecision highp float;\n#endif",e?"#define MAX_DIR_LIGHTS "+e:"",g?"#define MAX_POINT_LIGHTS "+g:"","uniform int material;\nuniform bool enableMap;\nuniform bool enableCubeMap;\nuniform bool mixEnvMap;\nuniform samplerCube tCube;\nuniform float mReflectivity;\nuniform sampler2D tMap;\nuniform vec4 mColor;\nuniform float mOpacity;\nuniform vec4 mAmbient;\nuniform vec4 mSpecular;\nuniform float mShininess;\nuniform float m2Near;\nuniform float mFarPlusNear;\nuniform float mFarMinusNear;\nuniform int pointLightNumber;\nuniform int directionalLightNumber;",
-e?"uniform mat4 viewMatrix;":"",e?"uniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];":"","varying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vLightWeighting;",g?"varying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];":"","varying vec3 vViewPosition;\nvarying vec3 vReflect;\nvoid main() {\nvec4 mapColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nvec4 cubeColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nif ( enableMap ) {\nmapColor = texture2D( tMap, vUv );\n}\nif ( enableCubeMap ) {\ncubeColor = textureCube( tCube, vReflect );\n}\nif ( material == 4 ) { \ngl_FragColor = vec4( 0.5*normalize( vNormal ) + vec3(0.5, 0.5, 0.5), mOpacity );\n} else if ( material == 3 ) { \nfloat w = 0.5;\ngl_FragColor = vec4( w, w, w, mOpacity );\n} else if ( material == 2 ) { \nvec3 normal = normalize( vNormal );\nvec3 viewPosition = normalize( vViewPosition );",
+e?"uniform mat4 viewMatrix;":"",e?"uniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];":"","varying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vLightWeighting;",g?"varying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];":"","varying vec3 vViewPosition;\nvarying vec3 vReflect;\nvoid main() {\nvec4 mapColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nvec4 cubeColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nif ( enableMap ) {\nmapColor = texture2D( tMap, vUv );\n}\nif ( enableCubeMap ) {\ncubeColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );\n}\nif ( material == 4 ) { \ngl_FragColor = vec4( 0.5*normalize( vNormal ) + vec3(0.5, 0.5, 0.5), mOpacity );\n} else if ( material == 3 ) { \nfloat w = 0.5;\ngl_FragColor = vec4( w, w, w, mOpacity );\n} else if ( material == 2 ) { \nvec3 normal = normalize( vNormal );\nvec3 viewPosition = normalize( vViewPosition );",
 g?"vec4 pointDiffuse  = vec4( 0.0, 0.0, 0.0, 0.0 );":"",g?"vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );":"",g?"for( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {":"",g?"vec3 pointVector = normalize( vPointLightVector[ i ] );":"",g?"vec3 pointHalfVector = normalize( vPointLightVector[ i ] + vViewPosition );":"",g?"float pointDotNormalHalf = dot( normal, pointHalfVector );":"",g?"float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );":"",g?"float pointSpecularWeight = 0.0;":"",g?"if ( pointDotNormalHalf >= 0.0 )":
 "",g?"pointSpecularWeight = pow( pointDotNormalHalf, mShininess );":"",g?"pointDiffuse  += mColor * pointDiffuseWeight;":"",g?"pointSpecular += mSpecular * pointSpecularWeight;":"",g?"}":"",e?"vec4 dirDiffuse  = vec4( 0.0, 0.0, 0.0, 0.0 );":"",e?"vec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );":"",e?"for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {":"",e?"vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );":"",e?"vec3 dirVector = normalize( lDirection.xyz );":"",e?"vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );":
 "",e?"float dirDotNormalHalf = dot( normal, dirHalfVector );":"",e?"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );":"",e?"float dirSpecularWeight = 0.0;":"",e?"if ( dirDotNormalHalf >= 0.0 )":"",e?"dirSpecularWeight = pow( dirDotNormalHalf, mShininess );":"",e?"dirDiffuse  += mColor * dirDiffuseWeight;":"",e?"dirSpecular += mSpecular * dirSpecularWeight;":"",e?"}":"","vec4 totalLight = mAmbient;",e?"totalLight += dirDiffuse + dirSpecular;":"",g?"totalLight += pointDiffuse + pointSpecular;":

build/ThreeDebug.js

@@ -120,7 +120,7 @@ c(k,q,p,O,Y,C)}else Y&&c(k,q,p,O,Y,C)}}}else if(O instanceof THREE.RenderableFac
 THREE.WebGLRenderer=function(a){function c(e,g){var n;if(e=="fragment")n=b.createShader(b.FRAGMENT_SHADER);else if(e=="vertex")n=b.createShader(b.VERTEX_SHADER);b.shaderSource(n,g);b.compileShader(n);if(!b.getShaderParameter(n,b.COMPILE_STATUS)){alert(b.getShaderInfoLog(n));return null}return n}var f=document.createElement("canvas"),b,d,j=new THREE.Matrix4,o;a=function(e,g){if(e){var n,i,k,q=pointLights=maxDirLights=maxPointLights=0;n=0;for(i=e.lights.length;n<i;n++){k=e.lights[n];k instanceof THREE.DirectionalLight&&
 q++;k instanceof THREE.PointLight&&pointLights++}if(pointLights+q<=g){maxDirLights=q;maxPointLights=pointLights}else{maxDirLights=Math.ceil(g*q/(pointLights+q));maxPointLights=g-maxDirLights}return{directional:maxDirLights,point:maxPointLights}}return{directional:1,point:g-1}}(a,4);this.domElement=f;this.autoClear=true;try{b=f.getContext("experimental-webgl",{antialias:true})}catch(r){}if(!b){alert("WebGL not supported");throw"cannot create webgl context";}b.clearColor(0,0,0,1);b.clearDepth(1);b.enable(b.DEPTH_TEST);
 b.depthFunc(b.LEQUAL);b.frontFace(b.CCW);b.cullFace(b.BACK);b.enable(b.CULL_FACE);b.enable(b.BLEND);b.blendFunc(b.ONE,b.ONE_MINUS_SRC_ALPHA);b.clearColor(0,0,0,0);(function(e,g){d=b.createProgram();b.attachShader(d,c("fragment",["#ifdef GL_ES\nprecision highp float;\n#endif",e?"#define MAX_DIR_LIGHTS "+e:"",g?"#define MAX_POINT_LIGHTS "+g:"","uniform int material;\nuniform bool enableMap;\nuniform bool enableCubeMap;\nuniform bool mixEnvMap;\nuniform samplerCube tCube;\nuniform float mReflectivity;\nuniform sampler2D tMap;\nuniform vec4 mColor;\nuniform float mOpacity;\nuniform vec4 mAmbient;\nuniform vec4 mSpecular;\nuniform float mShininess;\nuniform float m2Near;\nuniform float mFarPlusNear;\nuniform float mFarMinusNear;\nuniform int pointLightNumber;\nuniform int directionalLightNumber;",
-e?"uniform mat4 viewMatrix;":"",e?"uniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];":"","varying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vLightWeighting;",g?"varying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];":"","varying vec3 vViewPosition;\nvarying vec3 vReflect;\nvoid main() {\nvec4 mapColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nvec4 cubeColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nif ( enableMap ) {\nmapColor = texture2D( tMap, vUv );\n}\nif ( enableCubeMap ) {\ncubeColor = textureCube( tCube, vReflect );\n}\nif ( material == 4 ) { \ngl_FragColor = vec4( 0.5*normalize( vNormal ) + vec3(0.5, 0.5, 0.5), mOpacity );\n} else if ( material == 3 ) { \nfloat w = 0.5;\ngl_FragColor = vec4( w, w, w, mOpacity );\n} else if ( material == 2 ) { \nvec3 normal = normalize( vNormal );\nvec3 viewPosition = normalize( vViewPosition );",
+e?"uniform mat4 viewMatrix;":"",e?"uniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];":"","varying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vLightWeighting;",g?"varying vec3 vPointLightVector[ MAX_POINT_LIGHTS ];":"","varying vec3 vViewPosition;\nvarying vec3 vReflect;\nvoid main() {\nvec4 mapColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nvec4 cubeColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nif ( enableMap ) {\nmapColor = texture2D( tMap, vUv );\n}\nif ( enableCubeMap ) {\ncubeColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );\n}\nif ( material == 4 ) { \ngl_FragColor = vec4( 0.5*normalize( vNormal ) + vec3(0.5, 0.5, 0.5), mOpacity );\n} else if ( material == 3 ) { \nfloat w = 0.5;\ngl_FragColor = vec4( w, w, w, mOpacity );\n} else if ( material == 2 ) { \nvec3 normal = normalize( vNormal );\nvec3 viewPosition = normalize( vViewPosition );",
 g?"vec4 pointDiffuse  = vec4( 0.0, 0.0, 0.0, 0.0 );":"",g?"vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );":"",g?"for( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {":"",g?"vec3 pointVector = normalize( vPointLightVector[ i ] );":"",g?"vec3 pointHalfVector = normalize( vPointLightVector[ i ] + vViewPosition );":"",g?"float pointDotNormalHalf = dot( normal, pointHalfVector );":"",g?"float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );":"",g?"float pointSpecularWeight = 0.0;":"",g?"if ( pointDotNormalHalf >= 0.0 )":
 "",g?"pointSpecularWeight = pow( pointDotNormalHalf, mShininess );":"",g?"pointDiffuse  += mColor * pointDiffuseWeight;":"",g?"pointSpecular += mSpecular * pointSpecularWeight;":"",g?"}":"",e?"vec4 dirDiffuse  = vec4( 0.0, 0.0, 0.0, 0.0 );":"",e?"vec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );":"",e?"for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {":"",e?"vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );":"",e?"vec3 dirVector = normalize( lDirection.xyz );":"",e?"vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );":
 "",e?"float dirDotNormalHalf = dot( normal, dirHalfVector );":"",e?"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );":"",e?"float dirSpecularWeight = 0.0;":"",e?"if ( dirDotNormalHalf >= 0.0 )":"",e?"dirSpecularWeight = pow( dirDotNormalHalf, mShininess );":"",e?"dirDiffuse  += mColor * dirDiffuseWeight;":"",e?"dirSpecular += mSpecular * dirSpecularWeight;":"",e?"}":"","vec4 totalLight = mAmbient;",e?"totalLight += dirDiffuse + dirSpecular;":"",g?"totalLight += pointDiffuse + pointSpecular;":

examples/materials_cubemap_refraction.html

+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - cube map WebGL</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#000;
+				color:#fff;
+				padding:0;
+				margin:0;
+				overflow:hidden;
+				font-family:georgia;
+				text-align:center;
+			}
+			a {	color: #ff0080;	text-decoration: none; }
+			a:hover { color: #0080ff; }
+
+			canvas { pointer-events:none; z-index:10; position:relative; }
+			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
+			#d { text-align:center; margin:1em auto -9.5em; z-index:1000; position:relative; display:block; 
+				background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
+		</style>
+	</head>
+
+	<body>
+		<div id="d">
+			<p><a href="http://github.com/mrdoob/three.js">Three.js</a> cube map refraction demo
+
+			<p>Lucy model from <a href="http://graphics.stanford.edu/data/3Dscanrep/">Stanford 3d scanning repository</a>
+			<p>Texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a>
+		</div>
+
+		<pre id="log"></pre>
+
+		<script type="text/javascript" src="../build/Three.js"></script> 
+
+		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var FLOOR = -250;
+
+			var container, stats;
+
+			var camera, scene, webglRenderer;
+			var cameraCube, sceneCube;
+
+			var mesh, zmesh, lightMesh, geometry;
+
+			var directionalLight, pointLight;
+
+			var mouseX = 0;
+			var mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener('mousemove', onDocumentMouseMove, false);
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				container = document.createElement('div');
+				document.body.appendChild(container);
+
+				camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera.position.z = 2000;
+
+				cameraCube = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
+
+				scene = new THREE.Scene();
+				sceneCube = new THREE.Scene();
+
+				// LIGHTS
+
+				var ambient = new THREE.AmbientLight( 0xffffff );
+				scene.addLight( ambient );
+
+				pointLight = new THREE.PointLight( 0xffffff, 2 );
+				scene.addLight( pointLight );
+
+				// light representation
+				sphere = new Sphere( 100, 16, 8, 1 );
+				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
+				lightMesh.position = pointLight.position;
+				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
+				scene.addObject(lightMesh);
+
+				// material samples
+				
+				
+                var r = "textures/cube/Park3Med/";
+
+				var urls = [ r + "px.jpg", r + "nx.jpg", 
+							 r + "py.jpg", r + "ny.jpg", 
+							 r + "pz.jpg", r + "nz.jpg" ];
+				
+				var images = loadImageArray( urls );
+				var cubeMaterial3 = new THREE.MeshBasicMaterial( { color: 0xccddff, env_map: new THREE.TextureCube( images, THREE.RefractionMap ), refraction_ratio: 0.98, reflectivity:0.9 } );
+				var cubeMaterial2 = new THREE.MeshBasicMaterial( { color: 0xccfffd, env_map: new THREE.TextureCube( images, THREE.RefractionMap ), refraction_ratio: 0.985 } );
+				var cubeMaterial1 = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: new THREE.TextureCube( images, THREE.RefractionMap ), refraction_ratio: 0.98 } )
+
+				createCube( 10000, images );
+
+				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer.setSize( window.innerWidth, window.innerHeight );
+				webglRenderer.autoClear = false;
+				container.appendChild( webglRenderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
+
+				var loader = new THREE.Loader();
+				loader.loadBinary( 'obj/lucy/Lucy100k_bin.js', function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) }, "obj/lucy" );
+
+			}
+
+			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
+
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
+				mesh.position.x = x;
+				mesh.position.y = y;
+				mesh.position.z = z;
+				mesh.rotation.x = rx;
+				mesh.rotation.y = ry;
+				mesh.rotation.z = rz;
+				scene.addObject(mesh);
+
+			}
+
+			function addCubeMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
+
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = x;
+				mesh.position.y = y;
+				mesh.position.z = z;
+				mesh.rotation.x = rx;
+				mesh.rotation.y = ry;
+				mesh.rotation.z = rz;
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
+				sceneCube.addObject(mesh);
+
+			}
+
+			function createCube( size, images ) {
+
+				var hsize = size/2, plane = new Plane( size, size ), pi2 = Math.PI/2, pi = Math.PI;
+
+				addCubeMesh( plane, 1,      0,     0,  -hsize,  0,      0,  0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[5] ) } ) );
+				addCubeMesh( plane, 1, -hsize,     0,       0,  0,    pi2,  0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[0] ) } ) );
+				addCubeMesh( plane, 1,  hsize,     0,       0,  0,   -pi2,  0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[1] ) } ) );
+				addCubeMesh( plane, 1,     0,  hsize,       0,  pi2,    0, pi, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[2] ) } ) );
+				addCubeMesh( plane, 1,     0, -hsize,       0, -pi2,    0, pi, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[3] ) } ) );
+
+			}
+
+			function createScene( geometry, m1, m2, m3 ) {
+
+				var s = 1.5, z = -1000;
+
+				addMesh( geometry, s,      0, 0, z, 0,0,0, m1 );
+				addMesh( geometry, s,   -900, 0, z, 0,0,0, m2 );
+				addMesh( geometry, s,    900, 0, z, 0,0,0, m3 );
+
+			}
+
+			function loadImageArray( urls ) {
+
+				var i, images = [];
+
+				images.loadCount = 0;
+
+				for ( i = 0; i < urls.length; ++i ) {
+
+					images[i] = new Image();
+					images[i].loaded = 0;
+					images[i].onload = function() { images.loadCount += 1; this.loaded = 1;/*log( images.loadCount );*/ }
+					images[i].src = urls[i];
+
+				}
+
+				return images;
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 4;
+				mouseY = ( event.clientY - windowHalfY ) * 4;
+
+			}
+
+			var r = 0;
+
+			function loop() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				cameraCube.target.position.x = - camera.position.x;
+				cameraCube.target.position.y = - camera.position.y;
+				cameraCube.target.position.z = - camera.position.z;
+
+
+				lightMesh.position.x = 1500 * Math.cos( r );
+				lightMesh.position.z = 1500 * Math.sin( r );
+
+				r += 0.01;
+
+				webglRenderer.clear();
+				webglRenderer.render( sceneCube, cameraCube );
+				webglRenderer.render( scene, camera );
+
+				stats.update();
+
+			}
+
+			function log(text) {
+
+				var e = document.getElementById("log");
+				e.innerHTML = text + "<br/>" + e.innerHTML;
+
+			}
+		</script>
+
+	</body>
+</html>

examples/materials_cubemap_sky_refraction.html

+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - webgl cube refraction</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				z-index:1000; 
+			}
+
+			a {
+				color: #ffffff;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
+
+		<script type="text/javascript" src="../build/ThreeRefraction.js"></script> 
+
+		<script type="text/javascript" src="../src/extras/primitives/Sphere2.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var statsEnabled = false;
+
+			var container, stats;
+
+			var camera, scene, webglRenderer;
+			var cameraCube, sceneCube;
+
+			var mesh, zmesh, lightMesh, geometry;
+
+			var directionalLight, pointLight;
+
+			var mouseX = 0;
+			var mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				container = document.createElement('div');
+				document.body.appendChild(container);
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera.position.z = 3200;
+
+				cameraCube = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+
+				scene = new THREE.Scene();
+				sceneCube = new THREE.Scene();
+
+				var geometry = new THREE.Geometry();
+				var sphere = new THREE.Mesh( new Sphere( 100, 32, 16 ) );
+
+				for ( var i = 0; i < 200; i ++ ) {
+
+					sphere.position.x = Math.random() * 10000 - 5000;
+					sphere.position.y = Math.random() * 10000 - 5000;
+					sphere.position.z = Math.random() * 10000 - 5000;
+					sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() * 4 + 1;
+
+					// Merging spheres in a single geometry
+					GeometryUtils.merge( geometry, sphere );
+				}
+
+				var r = "textures/skymap_";
+				var urls = [ r + "right1024.jpg", r + "left1024.jpg", 
+					 r + "top1024.jpg", r + "bottom1024.jpg", 
+					 r + "front1024.jpg", r + "back1024.jpg" ];
+
+				var images = loadImageArray( urls );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: new THREE.TextureCube( images, THREE.RefractionMap ), refraction_ratio: 0.75 } );
+
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = 100;
+				scene.addObject( mesh );
+
+				createCube( 100000, images );
+
+				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer.setSize( window.innerWidth, window.innerHeight );
+				webglRenderer.autoClear = false;
+				container.appendChild( webglRenderer.domElement );
+
+				if ( statsEnabled ) {
+
+					stats = new Stats();
+					stats.domElement.style.position = 'absolute';
+					stats.domElement.style.top = '0px';
+					stats.domElement.style.zIndex = 100;
+					container.appendChild( stats.domElement );
+
+				}
+
+			}
+
+			function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
+
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
+				mesh.position.x = x;
+				mesh.position.y = y;
+				mesh.position.z = z;
+				mesh.rotation.x = rx;
+				mesh.rotation.y = ry;
+				mesh.rotation.z = rz;
+				sceneCube.addObject(mesh);
+
+			}
+
+			function createCube( size, images ) {
+
+				var hsize = size/2, plane = new Plane( size, size ), pi2 = Math.PI/2, pi = Math.PI;
+
+				addMesh( plane, 1,      0,     0,  -hsize,  0,      0,  0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[5] ) } ) );
+				addMesh( plane, 1, -hsize,     0,       0,  0,    pi2,  0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[0] ) } ) );
+				addMesh( plane, 1,  hsize,     0,       0,  0,   -pi2,  0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[1] ) } ) );
+				addMesh( plane, 1,     0,  hsize,       0,  pi2,    0, pi, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[2] ) } ) );
+				addMesh( plane, 1,     0, -hsize,       0, -pi2,    0, pi, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[3] ) } ) );
+
+			}
+
+			function loadImageArray( urls ) {
+
+				var i, images = [];
+
+				images.loadCount = 0;
+
+				for ( i = 0; i < urls.length; ++i ) {
+
+					images[i] = new Image();
+					images[i].loaded = 0;
+					images[i].onload = function() { images.loadCount += 1; this.loaded = 1;/*log( images.loadCount );*/ }
+					images[i].src = urls[i];
+
+				}
+
+				return images;
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			function loop() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				cameraCube.target.position.x = - camera.position.x;
+				cameraCube.target.position.y = - camera.position.y;
+				cameraCube.target.position.z = - camera.position.z;
+
+				webglRenderer.clear();
+				webglRenderer.render( sceneCube, cameraCube );
+				webglRenderer.render( scene, camera );
+
+				if ( statsEnabled ) stats.update();
+
+			}
+
+		</script>
+
+	</body>
+</html>

src/renderers/WebGLRenderer.js

@@ -887,7 +887,7 @@ THREE.WebGLRenderer = function ( scene ) {
 				
 				"if ( enableCubeMap ) {",
 					
-					"cubeColor = textureCube( tCube, vReflect );",
+					"cubeColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );",
 					
 				"}",