Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 112 lines (93 sloc) 2.45 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>=^.^=</title>
<style>
body{
margin: 0;
}
canvas{
display: block;
}
.info{
position: absolute;
}
</style>
</head>
<body>
<script src="../lib/three.min.js"></script>
<script src="../lib/OrbitControls.js"></script>
<script>
var width = window.innerWidth,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
controls,
renderer,
loader = new THREE.JSONLoader(),
textureLoader = new THREE.TextureLoader(),
cubeTextureLoader = new THREE.CubeTextureLoader(),
textureCube,
normal,
i, albedo, sphere;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, width / height, 0.1, 100 );
camera.position.set( 0, 0, 8 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc );
renderer.gammaInput = true;
renderer.gammaOutput = true;
document.body.appendChild( renderer.domElement );
scene.add( new THREE.HemisphereLight( 0xffffff, 0xffffff, 4 ) );
textureCube = cubeTextureLoader.load( [
'./LancellottiChapel/posx.jpg',
'./LancellottiChapel/negx.jpg',
'./LancellottiChapel/posy.jpg',
'./LancellottiChapel/negy.jpg',
'./LancellottiChapel/posz.jpg',
'./LancellottiChapel/negz.jpg'
] );
albedo = [
new THREE.Color( 0.560, 0.570, 0.580 ),
new THREE.Color( 0.972, 0.960, 0.915 ),
new THREE.Color( 0.913, 0.921, 0.925 ),
new THREE.Color( 1.000, 0.766, 0.336 ),
new THREE.Color( 0.955, 0.637, 0.538 ),
new THREE.Color( 0.550, 0.556, 0.554 ),
new THREE.Color( 0.660, 0.609, 0.526 ),
new THREE.Color( 0.542, 0.497, 0.449 ),
new THREE.Color( 0.662, 0.655, 0.634 ),
new THREE.Color( 0.672, 0.637, 0.585 )
];
normal = textureLoader.load( 'normal.png' );
for ( i = 0; i < albedo.length; i ++ ) {
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 0.4, 16, 16 ),
new THREE.MeshStandardMaterial( {
color: albedo[ i ],
roughness: 0.2,
metalness: 1,
envMap: textureCube,
normalMap: normal
} )
);
sphere.position.set( i - albedo.length * 0.5, 0, 0 );
scene.add( sphere );
}
( function renderLoop () {
var elapsed = clock.getElapsedTime();
requestAnimationFrame( renderLoop );
camera.position.set(
Math.cos( elapsed * 0.25 ) * 6,
0,
Math.max( Math.sin( elapsed * 0.25 ) * 8, 3 )
)
renderer.render( scene, camera );
} )();
</script>
</body>
</html>
You can’t perform that action at this time.