<!--
check out the playlist here:
https://open.spotify.com/playlist/64lTO7UojBC6xoDljFdrVu?si=i6Shy45qSkWm34HgPsl4Xg
-->
<script id="vertexShader" type="x-shader/x-vertex">
uniform float mRefractionRatio;
uniform float mFresnelBias;
uniform float mFresnelScale;
uniform float mFresnelPower;
varying vec3 vReflect;
varying vec3 vRefract[3];
varying float vReflectionFactor;
varying vec2 f_uv;
varying vec3 f_normal;
varying vec3 f_position;
void main() {
f_uv = uv;
f_normal = normalize( normalMatrix * normal );
f_position = position;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
vec3 I = worldPosition.xyz - cameraPosition;
vReflect = reflect( I, worldNormal );
vRefract[0] = refract( normalize( I ), worldNormal, mRefractionRatio );
vRefract[1] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.99 );
vRefract[2] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.98 );
vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), mFresnelPower );
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform samplerCube tCube;
varying vec3 vReflect;
varying vec3 vRefract[3];
varying float vReflectionFactor;
uniform sampler2D texture;
uniform int u_useTexture;
uniform vec3 u_albedo;
uniform vec3 u_ambient;
uniform vec3 u_lightPos;
uniform vec3 u_lightCol;
uniform float u_lightIntensity;
uniform vec3 CamPos;
varying vec3 f_position;
varying vec3 f_normal;
varying vec2 f_uv;
void main() {
vec4 color = vec4(u_albedo, 1.0);
if (u_useTexture == 1) {
color = texture2D(texture, f_uv);
}
float d = clamp(dot(f_normal, normalize(u_lightPos - f_position)), 0.0, 1.0);
float t = clamp(dot(f_normal, normalize(CamPos - f_position)), 0.0, 1.0);
float red = 0.5 + 0.5*(cos(6.28*(t)));
float green = 0.5 + 0.5*(cos(6.28*(t+0.33)));
float blue = 0.5 + 0.5*(cos(6.28*(t+0.67)));
vec3 iridescent_color = vec3(red, green, blue);
vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
vec4 refractedColor = vec4( 1.0 );
refractedColor.r = mix(textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r, red, 0.8);
refractedColor.g = mix(textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g, green, 0.8);
refractedColor.b = mix(textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b, blue, 0.8);
gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );
}
</script>
html, body{overflow:hidden;}
View Compiled
var container;
var camera, scene, renderer, textureCube, object;
var mouseX = 0, mouseY = 0;
var clock = new THREE.Clock();
var path = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/';
var format = ".png";
var order = ["sky", "sky", "sky", "sky", "cov", "sky"];
var urls = [];
order.forEach(side => {urls.push(`${path}${side}${format}`);});
var loaded = false;
init();
function init() {
renderer = new THREE.WebGLRenderer({antialias:true, alpha: true });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
var textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
height = window.innerHeight;
width = window.innerWidth;
camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
camera.position.z =-200;
scene = new THREE.Scene();
//renderer.setClearColor( 0x000000, 0 );
scene.background = new THREE.Color( 0x111111 );
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 0.9);
camera.add( pointLight );
scene.add( camera );
uniforms = {
mRefractionRatio: { value: 0.96 },
mFresnelBias: { value: 0.05 },
mFresnelPower: { value: 2.0 },
mFresnelScale: { value: 0.5 },
tCube: { value: textureCube },
texture: {type: 't',value: null},
u_useTexture: {type: 'i',value: true},
u_albedo: {type: 'v3',value: new THREE.Color(0x000000)},
u_ambient: {type: 'v3',value: new THREE.Color(0x000000)},
u_lightPos: {type: 'v3',value: new THREE.Vector3(-600, 0, 400)},
u_lightCol: {type: 'v3',value: new THREE.Color(0xffffff)},
u_lightIntensity: {type: 'f',value: .6},
CamPos: {type: 'v3',value: new THREE.Vector3(-600, 0, 400)}
}
group = new THREE.Group();
material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});
var manager = new THREE.LoadingManager( function(){
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.material = material;
child.material.side = THREE.DoubleSide;
}
});
scale = 90;
object.scale.set(scale,scale,scale);
group.position.y = 3;
//group.rotation.y =Math.PI * -.5;
object.castShadow = true;
object.receiveShadow = true;
group.add(object);
scene.add( group );
;
} );
var loader = new THREE.OBJLoader( manager );
loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/heart10.obj', function ( obj ) {
object = obj;
loaded = true;
animate();
});
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
timer = 0.001 * Date.now();
if(loaded){
group.rotation.x = Math.sin(timer * .5 ) * (Math.PI / 4) * -.5;
group.rotation.y = (Math.PI / 2) + Math.sin(timer * .125 ) * (Math.PI);
group.rotation.z = Math.sin(timer * .25 ) * (Math.PI / 8);
group.position.z = Math.sin(timer *.125 ) * -20;
}
camera.lookAt( scene.position );
camera.position.y = -5;
renderer.render( scene, camera );
}
This Pen doesn't use any external CSS resources.