Updated examples that relied on the position = position pattern.

examples/canvas_geometry_cube.html

@@ -60,7 +60,7 @@
 
 				// Cube
 
-				var geometry = new THREE.CubeGeometry( 200, 200, 200 );
+				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
 				for ( var i = 0; i < geometry.faces.length; i += 2 ) {
 
@@ -205,4 +205,4 @@
 		</script>
 
 	</body>
-</html>
+</html>

examples/canvas_lights_pointlights.html

@@ -44,7 +44,6 @@
 		<script>
 
 			var camera, scene, renderer,
-			particle1, particle2, particle2,
 			light1, light2, light3,
 			loader, mesh;
 
@@ -80,14 +79,14 @@
 
 				}
 
-				particle1 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
-				scene.add( particle1 );
+				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
+				light1.add( sprite );
 
-				particle2 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
-				scene.add( particle2 );
+				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
+				light2.add( sprite );
 
-				particle3 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
-				scene.add( particle3 );
+				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
+				light3.add( sprite );
 
 				loader = new THREE.JSONLoader();
 				loader.load( 'obj/WaltHeadLo.js', function ( geometry ) {
@@ -131,29 +130,17 @@
 
 				if ( mesh ) mesh.rotation.y -= 0.01;
 
-				particle1.position.x = Math.sin( time * 0.7 ) * 30;
-				particle1.position.y = Math.cos( time * 0.5 ) * 40;
-				particle1.position.z = Math.cos( time * 0.3 ) * 30;
+				light1.position.x = Math.sin( time * 0.7 ) * 30;
+				light1.position.y = Math.cos( time * 0.5 ) * 40;
+				light1.position.z = Math.cos( time * 0.3 ) * 30;
 
-				light1.position.x = particle1.position.x;
-				light1.position.y = particle1.position.y;
-				light1.position.z = particle1.position.z;
+				light2.position.x = Math.cos( time * 0.3 ) * 30;
+				light2.position.y = Math.sin( time * 0.5 ) * 40;
+				light2.position.z = Math.sin( time * 0.7 ) * 30;
 
-				particle2.position.x = Math.cos( time * 0.3 ) * 30;
-				particle2.position.y = Math.sin( time * 0.5 ) * 40;
-				particle2.position.z = Math.sin( time * 0.7 ) * 30;
-
-				light2.position.x = particle2.position.x;
-				light2.position.y = particle2.position.y;
-				light2.position.z = particle2.position.z;
-
-				particle3.position.x = Math.sin( time * 0.7 ) * 30;
-				particle3.position.y = Math.cos( time * 0.3 ) * 40;
-				particle3.position.z = Math.sin( time * 0.5 ) * 30;
-
-				light3.position.x = particle3.position.x;
-				light3.position.y = particle3.position.y;
-				light3.position.z = particle3.position.z;
+				light3.position.x = Math.sin( time * 0.7 ) * 30;
+				light3.position.y = Math.cos( time * 0.3 ) * 40;
+				light3.position.z = Math.sin( time * 0.5 ) * 30;
 
 				renderer.render( scene, camera );
 

examples/canvas_materials.html

@@ -24,7 +24,7 @@
 			var container, stats;
 
 			var camera, scene, renderer, objects;
-			var particleLight, pointLight;
+			var pointLight;
 
 			init();
 			animate();
@@ -116,10 +116,6 @@
 
 				}
 
-				particleLight = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) );
-				particleLight.scale.x = particleLight.scale.y = 8;
-				scene.add( particleLight );
-
 				// Lights
 
 				scene.add( new THREE.AmbientLight( Math.random() * 0x202020 ) );
@@ -134,6 +130,10 @@
 				pointLight = new THREE.PointLight( 0xffffff, 1 );
 				scene.add( pointLight );
 
+				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) );
+				sprite.scale.set( 8, 8, 8 );
+				pointLight.add( sprite );
+
 				renderer = new THREE.CanvasRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -211,13 +211,9 @@
 
 				}
 
-				particleLight.position.x = Math.sin( timer * 7 ) * 300;
-				particleLight.position.y = Math.cos( timer * 5 ) * 400;
-				particleLight.position.z = Math.cos( timer * 3 ) * 300;
-
-				pointLight.position.x = particleLight.position.x;
-				pointLight.position.y = particleLight.position.y;
-				pointLight.position.z = particleLight.position.z;
+				pointLight.position.x = Math.sin( timer * 7 ) * 300;
+				pointLight.position.y = Math.cos( timer * 5 ) * 400;
+				pointLight.position.z = Math.cos( timer * 3 ) * 300;
 
 				renderer.render( scene, camera );
 

examples/canvas_particles_shapes.html

@@ -174,8 +174,7 @@
 
 				var onParticleCreated = function( p ) {
 
-					var position = p.position;
-					p.target.position = position;
+					p.target.position.copy( p.position );
 
 				};
 

examples/index.html

@@ -291,7 +291,6 @@
 				"misc_controls_fly",
 				"misc_controls_oculusrift",
 				"misc_controls_orbit",
-				"misc_controls_path",
 				"misc_controls_pointerlock",
 				"misc_controls_trackball",
 				"misc_controls_transform",

examples/js/controls/PathControls.js

@@ -1,327 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-
-THREE.PathControls = function ( object, domElement ) {
-
-	this.object = object;
-	this.domElement = ( domElement !== undefined ) ? domElement : document;
-
-	this.id = "PathControls" + THREE.PathControlsIdCounter ++;
-
-	// API
-
-	this.duration = 10 * 1000; // milliseconds
-	this.waypoints = [];
-
-	this.useConstantSpeed = true;
-	this.resamplingCoef = 50;
-
-	this.debugPath = new THREE.Object3D();
-	this.debugDummy = new THREE.Object3D();
-
-	this.animationParent = new THREE.Object3D();
-
-	this.lookSpeed = 0.005;
-	this.lookVertical = true;
-	this.lookHorizontal = true;
-	this.verticalAngleMap   = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0, 2 * Math.PI ] };
-	this.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0, 2 * Math.PI ] };
-
-	// internals
-
-	this.target = new THREE.Object3D();
-
-	this.mouseX = 0;
-	this.mouseY = 0;
-
-	this.lat = 0;
-	this.lon = 0;
-
-	this.phi = 0;
-	this.theta = 0;
-
-	var PI2 = Math.PI * 2;
-
-	this.viewHalfX = 0;
-	this.viewHalfY = 0;
-
-	if ( this.domElement !== document ) {
-
-		this.domElement.setAttribute( 'tabindex', -1 );
-
-	}
-
-	// methods
-
-	this.handleResize = function () {
-
-		if ( this.domElement === document ) {
-
-			this.viewHalfX = window.innerWidth / 2;
-			this.viewHalfY = window.innerHeight / 2;
-
-		} else {
-
-			this.viewHalfX = this.domElement.offsetWidth / 2;
-			this.viewHalfY = this.domElement.offsetHeight / 2;
-
-		}
-
-	};
-
-	this.update = function ( delta ) {
-
-		var srcRange, dstRange;
-
-		if( this.lookHorizontal ) this.lon += this.mouseX * this.lookSpeed * delta;
-		if( this.lookVertical )   this.lat -= this.mouseY * this.lookSpeed * delta;
-
-		this.lon = Math.max( 0, Math.min( 360, this.lon ) );
-		this.lat = Math.max( - 85, Math.min( 85, this.lat ) );
-
-		this.phi = THREE.Math.degToRad( 90 - this.lat );
-		this.theta = THREE.Math.degToRad( this.lon );
-
-		this.phi = normalize_angle_rad( this.phi );
-
-		// constrain vertical look angle
-
-		srcRange = this.verticalAngleMap.srcRange;
-		dstRange = this.verticalAngleMap.dstRange;
-
-		var tmpPhi = THREE.Math.mapLinear( this.phi, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
-		var tmpPhiFullRange = dstRange[ 1 ] - dstRange[ 0 ];
-		var tmpPhiNormalized = ( tmpPhi - dstRange[ 0 ] ) / tmpPhiFullRange;
-
-		this.phi = QuadraticEaseInOut( tmpPhiNormalized ) * tmpPhiFullRange + dstRange[ 0 ];
-
-		// constrain horizontal look angle
-
-		srcRange = this.horizontalAngleMap.srcRange;
-		dstRange = this.horizontalAngleMap.dstRange;
-
-		var tmpTheta = THREE.Math.mapLinear( this.theta, srcRange[ 0 ], srcRange[ 1 ], dstRange[ 0 ], dstRange[ 1 ] );
-		var tmpThetaFullRange = dstRange[ 1 ] - dstRange[ 0 ];
-		var tmpThetaNormalized = ( tmpTheta - dstRange[ 0 ] ) / tmpThetaFullRange;
-
-		this.theta = QuadraticEaseInOut( tmpThetaNormalized ) * tmpThetaFullRange + dstRange[ 0 ];
-
-		var targetPosition = this.target.position,
-			position = this.object.position;
-
-		targetPosition.x = 100 * Math.sin( this.phi ) * Math.cos( this.theta );
-		targetPosition.y = 100 * Math.cos( this.phi );
-		targetPosition.z = 100 * Math.sin( this.phi ) * Math.sin( this.theta );
-
-		this.object.lookAt( this.target.position );
-
-	};
-
-	this.onMouseMove = function ( event ) {
-
-		if ( this.domElement === document ) {
-
-			this.mouseX = event.pageX - this.viewHalfX;
-			this.mouseY = event.pageY - this.viewHalfY;
-
-		} else {
-
-			this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
-			this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
-
-		}
-
-	};
-
-	// utils
-
-	function normalize_angle_rad( a ) {
-
-		var b = a % PI2;
-		return b >= 0 ? b : b + PI2;
-
-	};
-
-	function distance( a, b ) {
-
-		var dx = a[ 0 ] - b[ 0 ],
-			dy = a[ 1 ] - b[ 1 ],
-			dz = a[ 2 ] - b[ 2 ];
-
-		return Math.sqrt( dx * dx + dy * dy + dz * dz );
-
-	};
-
-	function QuadraticEaseInOut ( k ) {
-
-		if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
-		return - 0.5 * ( --k * ( k - 2 ) - 1 );
-
-	};
-
-	function bind( scope, fn ) {
-
-		return function () {
-
-			fn.apply( scope, arguments );
-
-		};
-
-	};
-
-	function initAnimationPath( parent, spline, name, duration ) {
-
-		var animationData = {
-
-		   name: name,
-		   fps: 0.6,
-		   length: duration,
-
-		   hierarchy: []
-
-		};
-
-		var i,
-			parentAnimation, childAnimation,
-			path = spline.getControlPointsArray(),
-			sl = spline.getLength(),
-			pl = path.length,
-			t = 0,
-			first = 0,
-			last  = pl - 1;
-
-		parentAnimation = { parent: -1, keys: [] };
-		parentAnimation.keys[ first ] = { time: 0,        pos: path[ first ], rot: [ 0, 0, 0, 1 ], scl: [ 1, 1, 1 ] };
-		parentAnimation.keys[ last  ] = { time: duration, pos: path[ last ],  rot: [ 0, 0, 0, 1 ], scl: [ 1, 1, 1 ] };
-
-		for ( i = 1; i < pl - 1; i++ ) {
-
-			// real distance (approximation via linear segments)
-
-			t = duration * sl.chunks[ i ] / sl.total;
-
-			// equal distance
-
-			//t = duration * ( i / pl );
-
-			// linear distance
-
-			//t += duration * distance( path[ i ], path[ i - 1 ] ) / sl.total;
-
-			parentAnimation.keys[ i ] = { time: t, pos: path[ i ] };
-
-		}
-
-		animationData.hierarchy[ 0 ] = parentAnimation;
-
-		THREE.AnimationHandler.add( animationData );
-
-		var animation = new THREE.Animation( parent, name );
-		animation.interpolationType = THREE.AnimationHandler.CATMULLROM_FORWARD;
-
-		return animation;
-
-	};
-
-
-	function createSplineGeometry( spline, n_sub ) {
-
-		var i, index, position,
-			geometry = new THREE.Geometry();
-
-		for ( i = 0; i < spline.points.length * n_sub; i ++ ) {
-
-			index = i / ( spline.points.length * n_sub );
-			position = spline.getPoint( index );
-
-			geometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
-
-		}
-
-		return geometry;
-
-	};
-
-	function createPath( parent, spline ) {
-
-		var lineGeo = createSplineGeometry( spline, 10 ),
-			particleGeo = createSplineGeometry( spline, 10 ),
-			lineMat = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 3 } ),
-			lineObj = new THREE.Line( lineGeo, lineMat ),
-			particleObj = new THREE.PointCloud( particleGeo, new THREE.PointCloudMaterial( { color: 0xffaa00, size: 3 } ) );
-
-		lineObj.scale.set( 1, 1, 1 );
-		parent.add( lineObj );
-
-		particleObj.scale.set( 1, 1, 1 );
-		parent.add( particleObj );
-
-		var waypoint,
-			geo = new THREE.SphereGeometry( 1, 16, 8 ),
-			mat = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-
-		for ( var i = 0; i < spline.points.length; i ++ ) {
-
-			waypoint = new THREE.Mesh( geo, mat );
-			waypoint.position.copy( spline.points[ i ] );
-			parent.add( waypoint );
-
-		}
-
-	};
-
-	this.init = function ( ) {
-
-		// constructor
-
-		this.spline = new THREE.Spline();
-		this.spline.initFromArray( this.waypoints );
-
-		if ( this.useConstantSpeed ) {
-
-			this.spline.reparametrizeByArcLength( this.resamplingCoef );
-
-		}
-
-		if ( this.createDebugDummy ) {
-
-			var dummyParentMaterial = new THREE.MeshLambertMaterial( { color: 0x0077ff } ),
-			dummyChildMaterial  = new THREE.MeshLambertMaterial( { color: 0x00ff00 } ),
-			dummyParentGeo = new THREE.BoxGeometry( 10, 10, 20 ),
-			dummyChildGeo  = new THREE.BoxGeometry( 2, 2, 10 );
-
-			this.animationParent = new THREE.Mesh( dummyParentGeo, dummyParentMaterial );
-
-			var dummyChild = new THREE.Mesh( dummyChildGeo, dummyChildMaterial );
-			dummyChild.position.set( 0, 10, 0 );
-
-			this.animation = initAnimationPath( this.animationParent, this.spline, this.id, this.duration );
-
-			this.animationParent.add( this.object );
-			this.animationParent.add( this.target );
-			this.animationParent.add( dummyChild );
-
-		} else {
-
-			this.animation = initAnimationPath( this.animationParent, this.spline, this.id, this.duration );
-			this.animationParent.add( this.target );
-			this.animationParent.add( this.object );
-
-		}
-
-		if ( this.createDebugPath ) {
-
-			createPath( this.debugPath, this.spline );
-
-		}
-
-		this.domElement.addEventListener( 'mousemove', bind( this, this.onMouseMove ), false );
-
-	};
-
-	this.handleResize();
-
-};
-
-THREE.PathControlsIdCounter = 0;

examples/misc_controls_path.html

@@ -1,181 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - path controls</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 {
-			color: #000;
-			font-family:Monospace;
-			font-size:13px;
-			text-align:center;
-			font-weight: bold;
-
-			background-color: #fff;
-			margin: 0px;
-			overflow: hidden;
-		    }
-
-		    #info {
-					color:#000;
-			position: absolute;
-			top: 0px; width: 100%;
-			padding: 5px;
-
-		    }
-
-		    a { color: red; }
-
-		</style>
-	</head>
-
-	<body>
-		<div id="container"></div>
-		<div id="info">
-			<a href="http://threejs.org" target="_blank">three.js</a> - path controls example</br>
-			mouse look around
-		</div>
-
-		<script src="../build/three.min.js"></script>
-
-		<script src="js/controls/PathControls.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, controls, scene, renderer;
-
-			var cross;
-
-			var clock = new THREE.Clock();
-
-			init();
-			animate();
-
-			function init() {
-
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
-
-				controls = new THREE.PathControls( camera );
-
-				controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];
-				controls.duration = 28
-				controls.useConstantSpeed = true;
-				//controls.createDebugPath = true;
-				//controls.createDebugDummy = true;
-				controls.lookSpeed = 0.06;
-				controls.lookVertical = true;
-				controls.lookHorizontal = true;
-				controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
-				controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
-				controls.lon = 180;
-
-				controls.init();
-
-				// world
-
-				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
-
-				scene.add( controls.animationParent );
-
-				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
-				var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );
-
-				for ( var i = 0; i < 500; i ++ ) {
-
-					var mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = ( Math.random() - 0.5 ) * 1000;
-					mesh.position.y = ( Math.random() - 0.5 ) * 1000;
-					mesh.position.z = ( Math.random() - 0.5 ) * 1000;
-					mesh.updateMatrix();
-					mesh.matrixAutoUpdate = false;
-					scene.add( mesh );
-
-				}
-
-				// lights
-
-				light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 1, 1, 1 );
-				scene.add( light );
-
-				light = new THREE.DirectionalLight( 0x002288 );
-				light.position.set( -1, -1, -1 );
-				scene.add( light );
-
-				light = new THREE.AmbientLight( 0x222222 );
-				scene.add( light );
-
-
-				// renderer
-
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( scene.fog.color, 1 );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container = document.getElementById( 'container' );
-				container.appendChild( renderer.domElement );
-
-				// stats
-
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				stats.domElement.style.zIndex = 100;
-				container.appendChild( stats.domElement );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize, false );
-
-				// start animation
-
-				controls.animation.play();
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				controls.handleResize();
-
-			}
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
-				var delta = clock.getDelta();
-
-				THREE.AnimationHandler.update( delta );
-
-				controls.update( delta );
-				renderer.render( scene, camera );
-
-			}
-
-
-		</script>
-
-	</body>
-</html>

examples/misc_lights_test.html

@@ -38,7 +38,7 @@
 
 			var camera, scene, canvasRenderer, webglRenderer;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, zmesh, geometry;
 			var materialSpheres, materialTorus;
 
 			var directionalLight, pointLight;
@@ -101,11 +101,9 @@
 				pointLight = new THREE.PointLight( 0xffaa00 );
 				scene.add( pointLight );
 
-				lightMesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-				lightMesh.position = pointLight.position;
-				scene.add( lightMesh );
-
+				var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
+				mesh.scale.set( 0.05, 0.05, 0.05 );
+				pointLight.add( mesh );
 
 				canvasRenderer = new THREE.CanvasRenderer();
 				canvasRenderer.setClearColor( 0xffffff );
@@ -206,8 +204,8 @@
 				}
 
 
-				lightMesh.position.x = 200 * Math.cos( r );
-				lightMesh.position.z = 200 * Math.sin( r );
+				pointLight.position.x = 200 * Math.cos( r );
+				pointLight.position.z = 200 * Math.sin( r );
 
 				canvasRenderer.render( scene, camera );
 				webglRenderer.render( scene, camera );

examples/webgl_animation_cloth.html

@@ -166,8 +166,8 @@
 				light.castShadow = true;
 				//light.shadowCameraVisible = true;
 
-				light.shadowMapWidth = 2048;
-				light.shadowMapHeight = 2048;
+				light.shadowMapWidth = 1024;
+				light.shadowMapHeight = 1024;
 
 				var d = 300;
 

examples/webgl_lights_pointlights.html

@@ -85,36 +85,24 @@
 
 				scene.add( new THREE.AmbientLight( 0x000000 ) );
 
+				var sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
+
 				light1 = new THREE.PointLight( 0xff0040, 2, 50 );
+				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
 				scene.add( light1 );
 
 				light2 = new THREE.PointLight( 0x0040ff, 2, 50 );
+				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
 				scene.add( light2 );
 
 				light3 = new THREE.PointLight( 0x80ff80, 2, 50 );
+				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
 				scene.add( light3 );
 
 				light4 = new THREE.PointLight( 0xffaa00, 2, 50 );
+				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
 				scene.add( light4 );
 
-				var sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
-
-				var l1 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
-				l1.position = light1.position;
-				scene.add( l1 );
-
-				var l2 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
-				l2.position = light2.position;
-				scene.add( l2 );
-
-				var l3 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
-				l3.position = light3.position;
-				scene.add( l3 );
-
-				var l4 = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				l4.position = light4.position;
-				scene.add( l4 );
-
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_lights_pointlights2.html

@@ -170,54 +170,36 @@
 				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;
 
+				var sphere = new THREE.SphereGeometry( 0.25, 16, 8 );
+
 				light1 = new THREE.PointLight( c1, intensity, distance );
+				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c1 } ) ) );
 				scene.add( light1 );
 
 				light2 = new THREE.PointLight( c2, intensity, distance );
+				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c2 } ) ) );
 				scene.add( light2 );
 
 				light3 = new THREE.PointLight( c3, intensity, distance );
+				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c3 } ) ) );
 				scene.add( light3 );
 
 				light4 = new THREE.PointLight( c4, intensity, distance );
+				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c4 } ) ) );
 				scene.add( light4 );
 
 				light5 = new THREE.PointLight( c5, intensity, distance );
+				light5.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c5 } ) ) );
 				scene.add( light5 );
 
 				light6 = new THREE.PointLight( c6, intensity, distance );
+				light6.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c6 } ) ) );
 				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( { antialias: false } );

examples/webgl_loader_collada.html

@@ -46,7 +46,7 @@
 			var container, stats;
 
 			var camera, scene, renderer, objects;
-			var particleLight, pointLight;
+			var particleLight;
 			var dae;
 
 			var loader = new THREE.ColladaLoader();
@@ -122,9 +122,8 @@
 				directionalLight.position.normalize();
 				scene.add( directionalLight );
 
-				pointLight = new THREE.PointLight( 0xffffff, 4 );
-				pointLight.position = particleLight.position;
-				scene.add( pointLight );
+				var pointLight = new THREE.PointLight( 0xffffff, 4 );
+				particleLight.add( pointLight );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgl_loader_collada_keyframe.html

@@ -91,7 +91,6 @@
 				for ( var i = 0; i < kfAnimationsLength; ++i ) {
 
 					var animation = animations[ i ];
-					THREE.AnimationHandler.add( animation );
 
 					var kfAnimation = new THREE.KeyFrameAnimation( animation );
 					kfAnimation.timeScale = 1;

examples/webgl_materials.html

@@ -27,7 +27,7 @@
 			var container, stats;
 
 			var camera, scene, renderer, objects;
-			var particleLight, pointLight;
+			var particleLight;
 
 			var materials = [];
 
@@ -147,8 +147,8 @@
 
 				scene.add( directionalLight );
 
-				pointLight = new THREE.PointLight( 0xffffff, 1 );
-				scene.add( pointLight );
+				var pointLight = new THREE.PointLight( 0xffffff, 1 );
+				particleLight.add( pointLight );
 
 				//
 
@@ -245,10 +245,6 @@
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;
 
-				pointLight.position.x = particleLight.position.x;
-				pointLight.position.y = particleLight.position.y;
-				pointLight.position.z = particleLight.position.z;
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials2.html

@@ -27,7 +27,7 @@
 			var container, stats;
 
 			var camera, scene, renderer, objects;
-			var particleLight, pointLight;
+			var particleLight;
 
 			init();
 			animate();
@@ -111,11 +111,8 @@
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
-				pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
-				scene.add( pointLight );
-
-				particleLight.material.color = pointLight.color;
-				pointLight.position = particleLight.position;
+				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				particleLight.add( pointLight );
 
 				//
 

examples/webgl_materials_cars_camaro.html

@@ -50,8 +50,6 @@
 
 			var camera, scene, renderer;
 
-			var lightMesh;
-
 			var directionalLight, pointLight;
 
 			var mouseX = 0, mouseY = 0;
@@ -84,14 +82,13 @@
 				scene.add( directionalLight );
 
 				pointLight = new THREE.PointLight( 0xffaa00 );
-				pointLight.position.set( 0, 0, 0 );
 				scene.add( pointLight );
 
-				sphere = new THREE.SphereGeometry( 100, 16, 8 );
-				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				lightMesh.scale.set( 0.05, 0.05, 0.05 );
-				lightMesh.position = pointLight.position;
-				scene.add( lightMesh );
+				var sphere = new THREE.SphereGeometry( 100, 16, 8 );
+				
+				var mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
+				mesh.scale.set( 0.05, 0.05, 0.05 );
+				pointLight.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
@@ -311,8 +308,8 @@
 
 				camera.lookAt( scene.position );
 
-				lightMesh.position.x = 1500 * Math.cos( timer );
-				lightMesh.position.z = 1500 * Math.sin( timer );
+				pointLight.position.x = 1500 * Math.cos( timer );
+				pointLight.position.z = 1500 * Math.sin( timer );
 
 				renderer.render( scene, camera );
 

examples/webgl_materials_cubemap.html

@@ -51,11 +51,11 @@
 			var camera, scene, renderer;
 			var cameraCube, sceneCube;
 
-			var mesh, lightMesh, geometry;
+			var mesh, geometry;
 
 			var loader;
 
-			var directionalLight, pointLight;
+			var pointLight;
 
 			var mouseX = 0;
 			var mouseY = 0;
@@ -91,11 +91,11 @@
 
 				// light representation
 
-				sphere = new THREE.SphereGeometry( 100, 16, 8 );
-				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				lightMesh.position = pointLight.position;
-				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-				scene.add( lightMesh );
+				var sphere = new THREE.SphereGeometry( 100, 16, 8 );
+
+				var mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
+				mesh.scale.set( 0.05, 0.05, 0.05 );
+				pointLight.add( mesh );
 
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
@@ -224,8 +224,8 @@
 
 				var timer = -0.0002 * Date.now();
 
-				lightMesh.position.x = 1500 * Math.cos( timer );
-				lightMesh.position.z = 1500 * Math.sin( timer );
+				pointLight.position.x = 1500 * Math.cos( timer );
+				pointLight.position.z = 1500 * Math.sin( timer );
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;

examples/webgl_materials_cubemap_refraction.html

@@ -52,7 +52,7 @@
 			var camera, scene, renderer;
 			var cameraCube, sceneCube, cubeTarget;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, zmesh, geometry;
 
 			var loader;
 
@@ -89,11 +89,11 @@
 
 				// light representation
 
-				sphere = new THREE.SphereGeometry( 100, 16, 8 );
-				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
-				lightMesh.position = pointLight.position;
-				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-				scene.add( lightMesh );
+				var sphere = new THREE.SphereGeometry( 100, 16, 8 );
+
+				var mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				mesh.scale.set( 0.05, 0.05, 0.05 );
+				pointLight.add( mesh );
 
 				// material samples
 
@@ -221,8 +221,8 @@
 
 				cameraCube.rotation.copy( camera.rotation );
 
-				lightMesh.position.x = 1500 * Math.cos( timer );
-				lightMesh.position.z = 1500 * Math.sin( timer );
+				pointLight.position.x = 1500 * Math.cos( timer );
+				pointLight.position.z = 1500 * Math.sin( timer );
 
 				renderer.clear();
 				renderer.render( sceneCube, cameraCube );

examples/webgl_materials_normalmap.html

@@ -63,7 +63,7 @@
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, lightMesh, geometry;
+			var mesh, zmesh, geometry;
 			var mesh1, mesh2;
 
 			var spotLight, pointLight, ambientLight;
@@ -134,10 +134,6 @@
 				// light representation
 
 				var sphere = new THREE.SphereGeometry( 100, 16, 8 );
-				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
-				lightMesh.position = pointLight.position;
-				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-				//scene.add( lightMesh );
 
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
@@ -322,8 +318,8 @@
 
 				}
 
-				lightMesh.position.x = 2500 * Math.cos( r );
-				lightMesh.position.z = 2500 * Math.sin( r );
+				pointLight.position.x = 2500 * Math.cos( r );
+				pointLight.position.z = 2500 * Math.sin( r );
 
 				r += 0.01;
 

examples/webgl_materials_texture_anisotropy.html

@@ -104,7 +104,7 @@
 				scene1.add( light1 );
 
 				var light2 = new THREE.DirectionalLight( 0xffffff, 2 );
-				light2.position = light1.position;
+				light2.position.set( 1, 1, 1 );
 				scene2.add( light2 );
 
 				// GROUND

examples/webgldeferred_animation.html

@@ -200,9 +200,7 @@
 					material.color = light.color;
 
 					var emitter = new THREE.Mesh( geometry, material );
-					emitter.position = light.position;
-
-					scene.add( emitter );
+					light.add( emitter );
 
 				}
 

examples/webgldeferred_arealights.html

@@ -175,9 +175,6 @@
 				geometry.faces[ 0 ].color.setHex( backColor );
 
 				var emitter = new THREE.Mesh( geometry, material );
-
-				emitter.position = light.position;
-				emitter.quaternion.copy( light.quaternion );
 				emitter.scale.set( light.width * 2, 0.2, light.height * 2 );
 
 				return emitter;
@@ -203,11 +200,10 @@
 				areaLight1.rotation.set( -0.74719, 0.0001, 0.0001 );
 				areaLight1.width = 10;
 				areaLight1.height = 1;
-
 				scene.add( areaLight1 );
 
 				var meshEmitter = createAreaEmitter( areaLight1 );
-				scene.add( meshEmitter );
+				areaLight1.add( meshEmitter );
 
 				//
 
@@ -216,11 +212,10 @@
 				areaLight2.rotation.set( -1.5707, 0.0001, 1.5707 );
 				areaLight2.width = 8;
 				areaLight2.height = 1;
-
 				scene.add( areaLight2 );
 
 				var meshEmitter = createAreaEmitter( areaLight2 );
-				scene.add( meshEmitter );
+				areaLight2.add( meshEmitter );
 
 				//
 
@@ -229,11 +224,10 @@
 				areaLight3.rotation.set( 1.5707, 0.0001, -1.5707 );
 				areaLight3.width = 8;
 				areaLight3.height = 1;
-
 				scene.add( areaLight3 );
 
 				var meshEmitter = createAreaEmitter( areaLight3 );
-				scene.add( meshEmitter );
+				areaLight3.add( meshEmitter );
 
 			}
 

examples/webgldeferred_pointlights.html

@@ -193,9 +193,7 @@
 					material.color = light.color;
 
 					var emitter = new THREE.Mesh( geometry, material );
-					emitter.position = light.position;
-
-					scene.add( emitter );
+					light.add( emitter );
 
 				}