<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0, 200, 0 );
scene = new THREE.Scene();
// Materials
var imgTexture2 = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
imgTexture2.wrapS = imgTexture2.wrapT = THREE.RepeatWrapping;
imgTexture2.anisotropy = 16;
var imgTexture = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" );
imgTexture.repeat.set( 4, 2 );
imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
imgTexture.anisotropy = 16;
var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
var materials = [];
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0xffffff, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x00ff00, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x00ff00, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x000000, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xffffff, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xff0000, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xff0000, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0x000000, shading: shading } ) );
shininess = 15;
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, specular: 0xffaa00, shininess: shininess, metal: true, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, specular: 0xaaff00, shininess: shininess, metal: true, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, specular: 0x00ffaa, shininess: shininess, metal: true, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, specular: 0x00aaff, shininess: shininess, metal: true, shading: shading } ) );
// Spheres geometry
var geometry_smooth = new THREE.SphereGeometry( 70, 32, 16 );
var geometry_flat = new THREE.SphereGeometry( 70, 32, 16 );
objects = [];
var sphere, geometry, material;
for ( var i = 0, l = materials.length; i < l; i ++ ) {
material = materials[ i ];
geometry = material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth;
sphere = new THREE.Mesh( geometry, material );
sphere.position.x = ( i % 4 ) * 200 - 200;
sphere.position.z = Math.floor( i / 4 ) * 200 - 200;
objects.push( sphere );
scene.add( sphere );
}
particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
scene.add( particleLight );
// Lights
scene.add( new THREE.AmbientLight( 0x444444 ) );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 1, 1, 1 ).normalize();
scene.add( directionalLight );
var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
particleLight.add( pointLight );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x0a0a0a );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = true;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
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();
stats.update();
}
function render() {
var timer = Date.now() * 0.00025;
camera.position.x = Math.cos( timer ) * 800;
camera.position.z = Math.sin( timer ) * 800;
camera.lookAt( scene.position );
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
object.rotation.y += 0.005;
}
particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;
renderer.render( scene, camera );
}
</script>
</body>
</html>