update to three.js r68.

threejs/tests/canvas/canvas_geometry_cube.ts

@@ -43,7 +43,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) {
 

threejs/tests/canvas/canvas_interactive_cubes_tween.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../three.d.ts" />
 /// <reference path="../three-tests-setup.ts" />
+/// <reference path="../../../tween.js/tween.js.d.ts" />
 
 // https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes_tween.html
 

threejs/tests/canvas/canvas_lights_pointlights.ts

@@ -7,7 +7,6 @@
     // ------- variable definitions that does not exist in the original code. These are for typescript.
     // -------
     var camera, scene, renderer,
-        particle1, particle2, particle3,
         light1, light2, light3,
         loader, mesh;
 
@@ -43,14 +42,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) {
@@ -94,29 +93,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);
 

threejs/tests/canvas/canvas_materials.ts

@@ -11,7 +11,7 @@
     var container, stats;
 
     var camera, scene, renderer, objects;
-    var particleLight, pointLight;
+    var pointLight;
 
     init();
     animate();
@@ -103,10 +103,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));
@@ -121,6 +117,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);
@@ -198,13 +198,10 @@
 
         }
 
-        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 = Math.sin( timer * 7 ) * 300;
+        pointLight.position.y = Math.cos( timer * 5 ) * 400;
+        pointLight.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);
 

threejs/tests/css3d/css3d_sprites.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../three.d.ts" />
 /// <reference path="../three-tests-setup.ts" />
+/// <reference path="../../../tween.js/tween.js.d.ts" />
 
 // https://github.com/mrdoob/three.js/blob/master/examples/css3d_sprites.html
 
@@ -26,23 +27,16 @@
 
         scene = new THREE.Scene();
 
-        var sprite = document.createElement('img');
-        sprite.addEventListener('load', function (event) {
+        var image = document.createElement( 'img' );
+        image.addEventListener( 'load', function ( event ) {
 
-            for (var i = 0, j = 0; i < particlesTotal; i++, j += 3) {
+            for ( var i = 0; i < particlesTotal; i ++ ) {
 
-                var canvas = document.createElement('canvas');
-                canvas.width = sprite.width;
-                canvas.height = sprite.height;
-
-                var context = canvas.getContext('2d');
-                context.drawImage(sprite, 0, 0);
-
-                var object = new THREE.CSS3DSprite(canvas);
+                var object = new THREE.CSS3DSprite( image.cloneNode() );
                 object.position.x = Math.random() * 4000 - 2000,
                 object.position.y = Math.random() * 4000 - 2000,
                 object.position.z = Math.random() * 4000 - 2000
-						scene.add(object);
+                scene.add(object);
 
                 objects.push(object);
 
@@ -51,7 +45,7 @@
             transition();
 
         }, false);
-        sprite.src = 'textures/sprite.png';
+        image.src = 'textures/sprite.png';
 
         // Plane
 

threejs/tests/webgl/webgl_animation_skinning_morph.ts

@@ -0,0 +1,297 @@
+/// <reference path="../../three.d.ts" />
+/// <reference path="../three-tests-setup.ts" />
+
+// https://github.com/mrdoob/three.js/blob/master/examples/webgl_sprites.html
+
+() => {
+    // ------- variable definitions that does not exist in the original code. These are for typescript.
+    var material: THREE.SpriteMaterial;
+    var geometry: THREE.JSonLoaderResultGeometry;
+    var dat:any;
+    // -------
+
+    var SCREEN_WIDTH = window.innerWidth;
+    var SCREEN_HEIGHT = window.innerHeight;
+    var FLOOR = -250;
+
+    var container,stats;
+
+    var camera, scene;
+    var renderer;
+
+    var mesh, helper;
+
+    var mouseX = 0, mouseY = 0;
+
+    var windowHalfX = window.innerWidth / 2;
+    var windowHalfY = window.innerHeight / 2;
+
+    var clock = new THREE.Clock();
+
+    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+    init();
+    animate();
+
+    function init() {
+
+        container = document.getElementById( 'container' );
+
+        camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+        camera.position.z = 2200;
+
+        scene = new THREE.Scene();
+
+        scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
+
+        scene.add( camera );
+
+        // GROUND
+
+        var groundMaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
+        var planeGeometry = new THREE.PlaneGeometry( 16000, 16000 );
+
+        var ground = new THREE.Mesh( planeGeometry, groundMaterial );
+        ground.position.set( 0, FLOOR, 0 );
+        ground.rotation.x = -Math.PI/2;
+        scene.add( ground );
+
+        ground.receiveShadow = true;
+
+
+        // LIGHTS
+
+        var ambient = new THREE.AmbientLight( 0x222222 );
+        scene.add( ambient );
+
+
+        var light = new THREE.DirectionalLight( 0xebf3ff, 1.6 );
+        light.position.set( 0, 140, 500 ).multiplyScalar( 1.1 );
+        scene.add( light );
+
+        light.castShadow = true;
+
+        light.shadowMapWidth = 2048;
+        light.shadowMapHeight = 2048;
+
+        var d = 390;
+
+        light.shadowCameraLeft = -d * 2;
+        light.shadowCameraRight = d * 2;
+        light.shadowCameraTop = d * 1.5;
+        light.shadowCameraBottom = -d;
+
+        light.shadowCameraFar = 3500;
+        //light.shadowCameraVisible = true;
+
+        //
+
+        var light = new THREE.DirectionalLight( 0x497f13, 1 );
+        light.position.set( 0, -1, 0 );
+        scene.add( light );
+
+        // RENDERER
+
+        renderer = new THREE.WebGLRenderer( { antialias: true } );
+        renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+        renderer.domElement.style.position = "relative";
+
+        renderer.setClearColor( scene.fog.color, 1 );
+
+        container.appendChild( renderer.domElement );
+
+        renderer.gammaInput = true;
+        renderer.gammaOutput = true;
+
+        renderer.shadowMapEnabled = true;
+
+
+        // STATS
+
+        stats = new Stats();
+        container.appendChild( stats.domElement );
+
+        //
+
+        var loader = new THREE.JSONLoader();
+        loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
+
+            createScene( geometry, materials, 0, FLOOR, -300, 60 )
+
+        } );
+
+        // GUI
+
+        initGUI();
+
+        //
+
+        window.addEventListener( 'resize', onWindowResize, false );
+
+    }
+
+    function onWindowResize() {
+
+        windowHalfX = window.innerWidth / 2;
+        windowHalfY = window.innerHeight / 2;
+
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize( window.innerWidth, window.innerHeight );
+
+    }
+
+    function ensureLoop( animation ) {
+
+        for ( var i = 0; i < animation.hierarchy.length; i ++ ) {
+
+            var bone = animation.hierarchy[ i ];
+
+            var first = bone.keys[ 0 ];
+            var last = bone.keys[ bone.keys.length - 1 ];
+
+            last.pos = first.pos;
+            last.rot = first.rot;
+            last.scl = first.scl;
+
+        }
+
+    }
+
+    function createScene( geometry, materials, x, y, z, s ) {
+
+        ensureLoop( geometry.animation );
+
+        geometry.computeBoundingBox();
+        var bb = geometry.boundingBox;
+
+        var path = "textures/cube/Park2/";
+        var format = '.jpg';
+        var urls = [
+            path + 'posx' + format, path + 'negx' + format,
+            path + 'posy' + format, path + 'negy' + format,
+            path + 'posz' + format, path + 'negz' + format
+        ];
+
+
+        //var envMap = THREE.ImageUtils.loadTextureCube( urls );
+
+        //var map = THREE.ImageUtils.loadTexture( "textures/UV_Grid_Sm.jpg" );
+
+        //var bumpMap = THREE.ImageUtils.generateDataTexture( 1, 1, new THREE.Color() );
+        //var bumpMap = THREE.ImageUtils.loadTexture( "textures/water.jpg" );
+
+        for ( var i = 0; i < materials.length; i ++ ) {
+
+            var m = materials[ i ];
+            m.skinning = true;
+            m.morphTargets = true;
+
+            m.specular.setHSL( 0, 0, 0.1 );
+
+            m.color.setHSL( 0.6, 0, 0.6 );
+            m.ambient.copy( m.color );
+
+            //m.map = map;
+            //m.envMap = envMap;
+            //m.bumpMap = bumpMap;
+            //m.bumpScale = 2;
+
+            //m.combine = THREE.MixOperation;
+            //m.reflectivity = 0.75;
+
+            m.wrapAround = true;
+
+        }
+
+        mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
+        mesh.position.set( x, y - bb.min.y * s, z );
+        mesh.scale.set( s, s, s );
+        scene.add( mesh );
+
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        helper = new THREE.SkeletonHelper( mesh );
+        helper.material.linewidth = 3;
+        helper.visible = false;
+        scene.add( helper );
+
+        var animation = new THREE.Animation( mesh, geometry.animation );
+        animation.play();
+
+    }
+
+    function initGUI() {
+
+        var API = {
+            'show model'    : true,
+            'show skeleton' : false
+        };
+
+        var gui = new dat.GUI();
+
+        gui.add( API, 'show model' ).onChange( function() { mesh.visible = API[ 'show model' ]; } );
+
+        gui.add( API, 'show skeleton' ).onChange( function() { helper.visible = API[ 'show skeleton' ]; } );
+
+    }
+
+    function onDocumentMouseMove( event ) {
+
+        mouseX = ( event.clientX - windowHalfX );
+        mouseY = ( event.clientY - windowHalfY );
+
+    }
+
+    //
+
+    function animate() {
+
+        requestAnimationFrame( animate );
+
+        render();
+        stats.update();
+
+    }
+
+    function render() {
+
+        var delta = 0.75 * clock.getDelta();
+
+        camera.position.x += ( mouseX - camera.position.x ) * .05;
+        camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 );
+
+        camera.lookAt( scene.position );
+
+        // update skinning
+
+        THREE.AnimationHandler.update( delta );
+
+        if ( helper !== undefined ) helper.update();
+
+        // update morphs
+
+        if ( mesh ) {
+
+            var time = Date.now() * 0.001;
+
+            // mouth
+
+            mesh.morphTargetInfluences[ 1 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
+
+            // frown ?
+
+            mesh.morphTargetInfluences[ 2 ] = ( 1 + Math.sin( 2 * time ) ) / 2;
+
+            // eyes
+
+            mesh.morphTargetInfluences[ 3 ] = ( 1 + Math.cos( 4 * time ) ) / 2;
+
+        }
+
+        renderer.render( scene, camera );
+
+    }
+}

threejs/tests/webgl/webgl_buffergeometry.ts

@@ -49,11 +49,6 @@
 
         var geometry = new THREE.BufferGeometry();
 
-        geometry.addAttribute('index', new Uint16Array(triangles * 3), 1);
-        geometry.addAttribute('position', new Float32Array(triangles * 3 * 3), 3);
-        geometry.addAttribute('normal', new Float32Array(triangles * 3 * 3), 3);
-        geometry.addAttribute('color', new Float32Array(triangles * 3 * 3), 3);
-
         // break geometry into
         // chunks of 21,845 triangles (3 unique vertices per triangle)
         // for indices to fit into 16 bit integer number
@@ -61,7 +56,7 @@
 
         var chunkSize = 21845;
 
-        var indices = geometry.getAttribute('index').array;
+        var indices = new Uint16Array( triangles * 3 );
 
         for (var i = 0; i < indices.length; i++) {
 
@@ -69,9 +64,9 @@
 
         }
 
-        var positions = geometry.getAttribute('position').array;
-        var normals = geometry.getAttribute('normal').array;
-        var colors = geometry.getAttribute('color').array;
+        var positions = new Float32Array( triangles * 3 * 3 );
+        var normals = new Float32Array( triangles * 3 * 3 );
+        var colors = new Float32Array( triangles * 3 * 3 );
 
         var color = new THREE.Color();
 
@@ -167,6 +162,11 @@
 
         }
 
+        geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+        geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+        geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
+        geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+
         var offsets = triangles / chunkSize;
 
         for (var i = 0; i < offsets; i++) {

threejs/tests/webgl/webgl_camera.ts

@@ -85,7 +85,7 @@
 
         }
 
-        var particles = new THREE.ParticleSystem(geometry, new THREE.ParticleSystemMaterial({ color: 0x888888 }));
+        var particles = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { color: 0x888888 } ) );
         scene.add(particles);
 
         //

threejs/tests/webgl/webgl_interactive_raycasting_pointcloud.ts

@@ -0,0 +1,335 @@
+/// <reference path="../../three.d.ts" />
+/// <reference path="../three-tests-setup.ts" />
+
+// https://github.com/mrdoob/three.js/blob/master/examples/webgl_sprites.html
+
+() => {
+    // ------- variable definitions that does not exist in the original code. These are for typescript.
+    var material: THREE.SpriteMaterial;
+    var intersection: THREE.Intersection;
+    var container: HTMLElement;
+    var pcBuffer: THREE.PointCloud;
+    var v: any;
+    // -------
+
+    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+    var renderer, scene, camera, stats;
+    var pointclouds;
+    var projector, raycaster, intersects;
+    var mouse = { x: 1, y: 1 };
+    var vector = new THREE.Vector3();
+    intersection = null;
+    var spheres = [];
+    var spheresIndex = 0;
+    var clock;
+
+    var threshold = 0.1;
+    var pointSize = 0.01;
+    var width = 150;
+    var length = 150;
+    var rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
+
+    init();
+    animate();
+
+    function generatePointCloudGeometry( color, width, length ){
+
+        var geometry = new THREE.BufferGeometry();
+        var numPoints = width*length;
+
+        var positions = new Float32Array( numPoints*3 );
+        var colors = new Float32Array( numPoints*3 );
+
+        var k = 0;
+
+        for( var i = 0; i < width; i++ ) {
+
+            for( var j = 0; j < length; j++ ) {
+
+                var u = i / width;
+                var v = j / length;
+                var x = u - 0.5;
+                var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
+                var z = v - 0.5;
+
+                positions[ 3 * k ] = x;
+                positions[ 3 * k + 1 ] = y;
+                positions[ 3 * k + 2 ] = z;
+
+                var intensity = ( y + 0.1 ) * 5;
+                colors[ 3 * k ] = color.r * intensity;
+                colors[ 3 * k + 1 ] = color.g * intensity;
+                colors[ 3 * k + 2 ] = color.b * intensity;
+
+                k++;
+
+            }
+
+        }
+
+        geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+        geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+        geometry.computeBoundingBox();
+
+        return geometry;
+
+    }
+
+    function generatePointcloud( color, width, length ) {
+
+        var geometry = generatePointCloudGeometry( color, width, length );
+
+        var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
+        var pointcloud = new THREE.PointCloud( geometry, material );
+
+        return pointcloud;
+
+    }
+
+    function generateIndexedPointcloud( color, width, length ) {
+
+        var geometry = generatePointCloudGeometry( color, width, length );
+        var numPoints = width * length;
+        var indices = new Uint16Array( numPoints );
+
+        var k = 0;
+
+        for( var i = 0; i < width; i++ ) {
+
+            for( var j = 0; j < length; j++ ) {
+
+                indices[ k ] = k;
+                k++;
+
+            }
+
+        }
+
+        geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+
+        var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
+        var pointcloud = new THREE.PointCloud( geometry, material );
+
+        return pointcloud;
+
+    }
+
+    function generateIndexedWithOffsetPointcloud( color, width, length ){
+
+        var geometry = generatePointCloudGeometry( color, width, length );
+        var numPoints = width * length;
+        var indices = new Uint16Array( numPoints );
+
+        var k = 0;
+
+        for( var i = 0; i < width; i++ ){
+
+            for( var j = 0; j < length; j++ ) {
+
+                indices[ k ] = k;
+                k++;
+
+            }
+
+        }
+
+        geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
+
+        var offset = { start: 0, count: indices.length, index: 0 };
+        geometry.offsets.push( offset );
+
+        var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
+        var pointcloud = new THREE.PointCloud( geometry, material );
+
+        return pointcloud;
+
+    }
+
+    function generateRegularPointcloud( color, width, length ) {
+
+        var geometry = new THREE.Geometry();
+        var numPoints = width * length;
+
+        var colors = [];
+
+        var k = 0;
+
+        for( var i = 0; i < width; i++ ) {
+
+            for( var j = 0; j < length; j++ ) {
+
+                var u = i / width;
+                v = j / length;
+                var x = u - 0.5;
+                var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8) ) / 20;
+                var z = v - 0.5;
+                v = new THREE.Vector3( x,y,z );
+
+                var intensity = ( y + 0.1 ) * 7;
+                colors[ 3 * k ] = color.r * intensity;
+                colors[ 3 * k + 1 ] = color.g * intensity;
+                colors[ 3 * k + 2 ] = color.b * intensity;
+
+                geometry.vertices.push( v );
+                colors[ k ] = ( color.clone().multiplyScalar( intensity ) );
+
+                k++;
+
+            }
+
+        }
+
+        geometry.colors = colors;
+        geometry.computeBoundingBox();
+
+        var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
+        var pointcloud = new THREE.PointCloud( geometry, material );
+
+        return pointcloud;
+
+    }
+
+    function init() {
+
+        container = document.getElementById( 'container' );
+
+        scene = new THREE.Scene();
+
+        clock = new THREE.Clock();
+
+        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+        camera.applyMatrix( new THREE.Matrix4().makeTranslation( 0,0,20 ) );
+        camera.applyMatrix( new THREE.Matrix4().makeRotationX( -0.5 ) );
+
+        //
+
+        pcBuffer = generatePointcloud( new THREE.Color( 1,0,0 ), width, length );
+        pcBuffer.scale.set( 10,10,10 );
+        pcBuffer.position.set( -5,0,5 );
+        scene.add( pcBuffer );
+
+        var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0,1,0 ), width, length );
+        pcIndexed.scale.set( 10,10,10 );
+        pcIndexed.position.set( 5,0,5 );
+        scene.add( pcIndexed );
+
+        var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0,1,1 ), width, length );
+        pcIndexedOffset.scale.set( 10,10,10 );
+        pcIndexedOffset.position.set( 5,0,-5 );
+        scene.add( pcIndexedOffset );
+
+        var pcRegular = generateRegularPointcloud( new THREE.Color( 1,0,1 ), width, length );
+        pcRegular.scale.set( 10,10,10 );
+        pcRegular.position.set( -5,0,-5 );
+        scene.add( pcRegular );
+
+        pointclouds = [ pcBuffer, pcIndexed, pcIndexedOffset, pcRegular ];
+
+        //
+
+        var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32 );
+        var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading } );
+
+        for ( var i = 0; i < 40; i++ ) {
+
+            var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+            scene.add( sphere );
+            spheres.push( sphere );
+
+        }
+
+        //
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize( window.innerWidth, window.innerHeight );
+
+        container.appendChild( renderer.domElement );
+
+        //
+
+        projector = new THREE.Projector();
+        raycaster = new THREE.Raycaster();
+        raycaster.params.PointCloud.threshold = threshold;
+
+        //
+
+        stats = new Stats();
+        stats.domElement.style.position = 'absolute';
+        stats.domElement.style.top = '0px';
+        container.appendChild( stats.domElement );
+
+        //
+
+        window.addEventListener( 'resize', onWindowResize, false );
+        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+    }
+
+    function onDocumentMouseMove( event ) {
+
+        event.preventDefault();
+
+        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+    }
+
+    function onWindowResize() {
+
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize( window.innerWidth, window.innerHeight );
+
+    }
+
+    function animate() {
+
+        requestAnimationFrame( animate );
+
+        render();
+        stats.update();
+
+    }
+
+    var toggle = 0;
+
+    function render() {
+
+        camera.applyMatrix( rotateY );
+        camera.updateMatrixWorld( true );
+
+        vector.set( mouse.x, mouse.y, 0.1 );
+
+        projector.unprojectVector( vector, camera );
+
+        raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
+
+        var intersections = raycaster.intersectObjects( pointclouds );
+        intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;
+
+        if ( toggle > 0.02 && intersection !== null) {
+
+            spheres[ spheresIndex ].position.copy( intersection.point );
+            spheres[ spheresIndex ].scale.set( 1, 1, 1 );
+            spheresIndex = ( spheresIndex + 1 ) % spheres.length;
+
+            toggle = 0;
+
+        }
+
+        for ( var i = 0; i < spheres.length; i++ ) {
+
+            var sphere = spheres[ i ];
+            sphere.scale.multiplyScalar( 0.98 );
+            sphere.scale.clampScalar( 0.01, 1 );
+
+        }
+
+        toggle += clock.getDelta();
+
+        renderer.render( scene, camera );
+
+    }
+}

threejs/tests/webgl/webgl_lensflares.ts

@@ -116,7 +116,7 @@
             lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);
 
             lensFlare.customUpdateCallback = lensFlareUpdateCallback;
-            lensFlare.position = light.position;
+            lensFlare.position.copy( light.position );
 
             scene.add(lensFlare);
 

threejs/tests/webgl/webgl_materials.ts

@@ -12,7 +12,7 @@
     var container, stats;
 
     var camera, scene, renderer, objects;
-    var particleLight, pointLight;
+    var particleLight;
 
     var materials = [];
 
@@ -130,8 +130,8 @@
 
         scene.add(directionalLight);
 
-        pointLight = new THREE.PointLight(0xffffff, 1);
-        scene.add(pointLight);
+        var pointLight = new THREE.PointLight(0xffffff, 1);
+        particleLight.add(pointLight);
 
         //
 
@@ -228,10 +228,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);
 
     }

threejs/tests/webgl/webgl_particles_billboards.ts

@@ -42,10 +42,10 @@
 
         }
 
-        material = new THREE.ParticleSystemMaterial({ size: 35, sizeAttenuation: false, map: sprite, transparent: true });
+        material = new THREE.PointCloudMaterial({ size: 35, sizeAttenuation: false, map: sprite, transparent: true });
         material.color.setHSL(1.0, 0.3, 0.7);
 
-        particles = new THREE.ParticleSystem(geometry, material);
+        particles = new THREE.PointCloud(geometry, material);
         particles.sortParticles = true;
         scene.add(particles);
 

threejs/tests/webgl/webgl_postprocessing.ts

@@ -80,8 +80,6 @@
 
         requestAnimationFrame(animate);
 
-        var time = Date.now();
-
         object.rotation.x += 0.005;
         object.rotation.y += 0.01;
 

threejs/three-tests.ts

@@ -26,12 +26,14 @@ THE SOFTWARE.
 
 // webGL renderer test.
 /// <reference path="./tests/webgl/webgl_animation_cloth.ts" />
+/// <reference path="./tests/webgl/webgl_animation_skinning_morph.ts" />
 /// <reference path="./tests/webgl/webgl_buffergeometry.ts" />
 /// <reference path="./tests/webgl/webgl_camera.ts" />
 /// <reference path="./tests/webgl/webgl_custom_attributes.ts" />
 /// <reference path="./tests/webgl/webgl_geometries.ts" />
 /// <reference path="./tests/webgl/webgl_helpers.ts" />
 /// <reference path="./tests/webgl/webgl_interactive_cubes.ts" />
+/// <reference path="./tests/webgl/webgl_interactive_raycasting_pointcloud.ts" />
 /// <reference path="./tests/webgl/webgl_lensflares.ts" />
 /// <reference path="./tests/webgl/webgl_lights_heimsphere.ts" />
 /// <reference path="./tests/webgl/webgl_lines_colors.ts" />
@@ -54,3 +56,4 @@ THE SOFTWARE.
 /// <reference path="./tests/canvas/canvas_lights_pointlights.ts" />
 /// <reference path="./tests/canvas/canvas_materials.ts" />
 /// <reference path="./tests/canvas/canvas_particles_floor.ts" />
+