1/pbr/demo3.html

<!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>