Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

287 lines (194 sloc) 7.591 kb
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - lights - point lights</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 {
background-color: #000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
a {
color: #ff0080;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights WebGL demo
</div>
<script src="../build/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer, controls,
particle1, particle2, particle4, particle4, particle5, particle6,
light1, light2, light3, light4, light5, light6;
var FAR = 300;
var clock = new THREE.Clock();
init();
animate();
function init() {
var container = document.getElementById( 'container' );
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x030303, 10, FAR );
scene.fog.color.setHSV( 0.75, 0.5, 0.025 );
// CAMERA
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, FAR );
camera.position.set( 0, 15, 150 );
scene.add( camera );
camera.lookAt( scene.position );
// CONTROLS
var fly = false;
if ( !fly ) {
controls = new THREE.TrackballControls( camera );
controls.target.set( 0, 0, 0 );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.15;
controls.keys = [ 65, 83, 68 ];
} else {
controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 25;
controls.lookSpeed = 0.05;
controls.lookVertical = true;
controls.lon = -90;
}
// TEXTURES
var texture = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" );
texture.repeat.set( 20, 10 );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.format = THREE.RGBFormat;
var texture2 = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
texture2.repeat.set( 2, 1 );
texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
texture2.format = THREE.RGBFormat;
// MATERIALS
var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, ambient: 0x444444, map: texture, perPixel: true } );
var objectMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, ambient: 0x111111, specular: 0xffffff, perPixel: true, metal: true, map: texture2 } );
// GROUND
var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 800, 400, 2, 2 ), groundMaterial );
mesh.position.y = -5;
scene.add( mesh );
// OBJECTS
//var objectGeometry = new THREE.CubeGeometry( 0.5, 1, 1 );
//var objectGeometry = new THREE.SphereGeometry( 1.5, 16, 8 );
var objectGeometry = new THREE.TorusGeometry( 1.5, 0.4, 8, 16 );
for ( var i = 0; i < 5000; i ++ ) {
var mesh = new THREE.Mesh( objectGeometry, objectMaterial );
mesh.position.x = 400 * ( 0.5 - Math.random() );
mesh.position.y = 50 * ( 0.5 - Math.random() ) + 25;
mesh.position.z = 200 * ( 0.5 - Math.random() );
mesh.rotation.y = 3.14 * ( 0.5 - Math.random() );
mesh.rotation.x = 3.14 * ( 0.5 - Math.random() );
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add( mesh );
}
// LIGHTS
scene.add( new THREE.AmbientLight( 0x111111 ) );
var intensity = 2.5;
var distance = 100;
var c1 = 0xff0040, c2 = 0x0040ff, c3 = 0x80ff80, c4 = 0xffaa00, c5 = 0x00ffaa, c6 = 0xff1100;
//var c1 = 0xffffff, c2 = 0xffffff, c3 = 0xffffff, c4 = 0xffffff, c5 = 0xffffff, c6 = 0xffffff;
light1 = new THREE.PointLight( c1, intensity, distance );
scene.add( light1 );
light2 = new THREE.PointLight( c2, intensity, distance );
scene.add( light2 );
light3 = new THREE.PointLight( c3, intensity, distance );
scene.add( light3 );
light4 = new THREE.PointLight( c4, intensity, distance );
scene.add( light4 );
light5 = new THREE.PointLight( c5, intensity, distance );
scene.add( light5 );
light6 = new THREE.PointLight( c6, intensity, distance );
scene.add( light6 );
var dlight = new THREE.DirectionalLight( 0xffffff, 0.1 );
dlight.position.set( 0.5, -1, 0 ).normalize();
scene.add( dlight );
var sphere = new THREE.SphereGeometry( 0.25, 16, 8 );
var l1 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c1 } ) );
l1.position = light1.position;
scene.add( l1 );
var l2 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c2 } ) );
l2.position = light2.position;
scene.add( l2 );
var l3 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c3 } ) );
l3.position = light3.position;
scene.add( l3 );
var l4 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c4 } ) );
l4.position = light4.position;
scene.add( l4 );
var l5 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c5 } ) );
l5.position = light5.position;
scene.add( l5 );
var l6 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c6 } ) );
l6.position = light6.position;
scene.add( l6 );
// RENDERER
renderer = new THREE.WebGLRenderer( { maxLights: 10, antialias: false, clearColor: 0x030303, clearAlpha: 1 } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( scene.fog.color, 1 );
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.physicallyBasedShading = true;
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
stats.domElement.children[ 0 ].style.background = "transparent";
stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
container.appendChild( stats.domElement );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.00025;
var z = 20, d = 150;
light1.position.x = Math.sin( time * 0.7 ) * d;
light1.position.z = Math.cos( time * 0.3 ) * d;
light2.position.x = Math.cos( time * 0.3 ) * d;
light2.position.z = Math.sin( time * 0.7 ) * d;
light3.position.x = Math.sin( time * 0.7 ) * d;
light3.position.z = Math.sin( time * 0.5 ) * d;
light4.position.x = Math.sin( time * 0.3 ) * d;
light4.position.z = Math.sin( time * 0.5 ) * d;
light5.position.x = Math.cos( time * 0.3 ) * d;
light5.position.z = Math.sin( time * 0.5 ) * d;
light6.position.x = Math.cos( time * 0.7 ) * d;
light6.position.z = Math.cos( time * 0.5 ) * d;
controls.update( clock.getDelta() );
renderer.render( scene, camera );
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.