mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-22 11:25:57 +10:00
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 ;)
This commit is contained in:
alteredq
+1
-1
@@ -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;":
|
||||
|
||||
+1
-1
@@ -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;":
|
||||
|
||||
@@ -0,0 +1,238 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,197 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
@@ -887,7 +887,7 @@ THREE.WebGLRenderer = function ( scene ) {
|
||||
|
||||
"if ( enableCubeMap ) {",
|
||||
|
||||
"cubeColor = textureCube( tCube, vReflect );",
|
||||
"cubeColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );",
|
||||
|
||||
"}",
|
||||
|
||||
|
||||
Reference in New Issue
Block a user