diff --git a/examples/webgl_points_billboards.html b/examples/webgl_points_billboards.html
index 023cfce2fbc1c54edeb6113f6ebd7f75e61b8817..85dfe3c424a6b03ae1aa138faec31f2e1c1bb3c6 100644
--- a/examples/webgl_points_billboards.html
+++ b/examples/webgl_points_billboards.html
@@ -45,8 +45,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
- var container, stats;
- var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size;
+ var camera, scene, renderer, stats, material;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
@@ -57,34 +56,33 @@
function init() {
- container = document.createElement( 'div' );
- document.body.appendChild( container );
-
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
- geometry = new THREE.Geometry();
+ var geometry = new THREE.BufferGeometry();
+ var vertices = [];
- sprite = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
+ var sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
- for ( i = 0; i < 10000; i ++ ) {
+ for ( var i = 0; i < 10000; i ++ ) {
- var vertex = new THREE.Vector3();
- vertex.x = 2000 * Math.random() - 1000;
- vertex.y = 2000 * Math.random() - 1000;
- vertex.z = 2000 * Math.random() - 1000;
+ var x = 2000 * Math.random() - 1000;
+ var y = 2000 * Math.random() - 1000;
+ var z = 2000 * Math.random() - 1000;
- geometry.vertices.push( vertex );
+ vertices.push( x, y, z );
}
+ geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
material.color.setHSL( 1.0, 0.3, 0.7 );
- particles = new THREE.Points( geometry, material );
+ var particles = new THREE.Points( geometry, material );
scene.add( particles );
//
@@ -92,12 +90,12 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
- container.appendChild( renderer.domElement );
+ document.body.appendChild( renderer.domElement );
//
stats = new Stats();
- container.appendChild( stats.dom );
+ document.body.appendChild( stats.dom );
//
@@ -175,7 +173,7 @@
camera.lookAt( scene.position );
- h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
+ var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
material.color.setHSL( h, 0.5, 0.5 );
renderer.render( scene, camera );
diff --git a/examples/webgl_points_billboards_colors.html b/examples/webgl_points_billboards_colors.html
index 0ac41ca4bfc5b6a709ed8d5299af99acc2b99152..e43c9a04b758b356e2eb7e066b817dfa59098aea 100644
--- a/examples/webgl_points_billboards_colors.html
+++ b/examples/webgl_points_billboards_colors.html
@@ -45,8 +45,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
- var container, stats;
- var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size;
+ var camera, scene, renderer, stats, material;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
@@ -57,39 +56,41 @@
function init() {
- container = document.createElement( 'div' );
- document.body.appendChild( container );
-
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1400;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
- geometry = new THREE.Geometry();
+ var geometry = new THREE.BufferGeometry();
+ var vertices = [];
+ var colors = [];
+
+ var sprite = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
- sprite = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
+ var color = new THREE.Color();
- for ( i = 0; i < 5000; i ++ ) {
+ for ( var i = 0; i < 5000; i ++ ) {
- var vertex = new THREE.Vector3();
- vertex.x = 2000 * Math.random() - 1000;
- vertex.y = 2000 * Math.random() - 1000;
- vertex.z = 2000 * Math.random() - 1000;
+ var x = 2000 * Math.random() - 1000;
+ var y = 2000 * Math.random() - 1000;
+ var z = 2000 * Math.random() - 1000;
- geometry.vertices.push( vertex );
+ color.setHSL( ( x + 1000 ) / 2000, 1, 0.5 );
- colors[ i ] = new THREE.Color( 0xffffff );
- colors[ i ].setHSL( ( vertex.x + 1000 ) / 2000, 1, 0.5 );
+ vertices.push( x, y, z );
+ colors.push( color.r, color.g, color.b );
}
- geometry.colors = colors;
+ geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+ geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
material = new THREE.PointsMaterial( { size: 85, map: sprite, vertexColors: THREE.VertexColors, alphaTest: 0.5, transparent: true } );
material.color.setHSL( 1.0, 0.2, 0.7 );
- particles = new THREE.Points( geometry, material );
+ var particles = new THREE.Points( geometry, material );
scene.add( particles );
//
@@ -97,12 +98,12 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
- container.appendChild( renderer.domElement );
+ document.body.appendChild( renderer.domElement );
//
stats = new Stats();
- container.appendChild( stats.dom );
+ document.body.appendChild( stats.dom );
//
@@ -180,7 +181,7 @@
camera.lookAt( scene.position );
- h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
+ var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
material.color.setHSL( h, 1.0, 0.6 );
renderer.render( scene, camera );
diff --git a/examples/webgl_points_random.html b/examples/webgl_points_random.html
index 61e87da714720c5020e641471007eed94fe0b3f4..5c13ae7928c5ea7a502ea8f60efaab168769c16b 100644
--- a/examples/webgl_points_random.html
+++ b/examples/webgl_points_random.html
@@ -45,8 +45,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
- var container, stats;
- var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, size;
+ var camera, scene, renderer, stats, materials = [], parameters;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
@@ -57,44 +56,43 @@
function init() {
- container = document.createElement( 'div' );
- document.body.appendChild( container );
-
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
- geometry = new THREE.Geometry();
+ var geometry = new THREE.BufferGeometry();
+
+ var vertices = [];
- for ( i = 0; i < 20000; i ++ ) {
+ for ( var i = 0; i < 20000; i ++ ) {
- var vertex = new THREE.Vector3();
- vertex.x = Math.random() * 2000 - 1000;
- vertex.y = Math.random() * 2000 - 1000;
- vertex.z = Math.random() * 2000 - 1000;
+ var x = Math.random() * 2000 - 1000;
+ var y = Math.random() * 2000 - 1000;
+ var z = Math.random() * 2000 - 1000;
- geometry.vertices.push( vertex );
+ vertices.push( x, y, z );
}
+ geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
parameters = [
- [ [1, 1, 0.5], 5 ],
- [ [0.95, 1, 0.5], 4 ],
- [ [0.90, 1, 0.5], 3 ],
- [ [0.85, 1, 0.5], 2 ],
- [ [0.80, 1, 0.5], 1 ]
+ [ [ 1, 1, 0.5 ], 5 ],
+ [ [ 0.95, 1, 0.5 ], 4 ],
+ [ [ 0.90, 1, 0.5 ], 3 ],
+ [ [ 0.85, 1, 0.5 ], 2 ],
+ [ [ 0.80, 1, 0.5 ], 1 ]
];
- for ( i = 0; i < parameters.length; i ++ ) {
+ for ( var i = 0; i < parameters.length; i ++ ) {
- color = parameters[i][0];
- size = parameters[i][1];
+ var size = parameters[ i ][ 1 ];
- materials[i] = new THREE.PointsMaterial( { size: size } );
+ materials[ i ] = new THREE.PointsMaterial( { size: size } );
- particles = new THREE.Points( geometry, materials[i] );
+ var particles = new THREE.Points( geometry, materials[ i ] );
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
@@ -107,10 +105,10 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
- container.appendChild( renderer.domElement );
+ document.body.appendChild( renderer.domElement );
stats = new Stats();
- container.appendChild( stats.dom );
+ document.body.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -187,7 +185,7 @@
camera.lookAt( scene.position );
- for ( i = 0; i < scene.children.length; i ++ ) {
+ for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
@@ -199,12 +197,12 @@
}
- for ( i = 0; i < materials.length; i ++ ) {
+ for ( var i = 0; i < materials.length; i ++ ) {
- color = parameters[i][0];
+ var color = parameters[ i ][ 0 ];
- h = ( 360 * ( color[0] + time ) % 360 ) / 360;
- materials[i].color.setHSL( h, color[1], color[2] );
+ var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
+ materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
}
diff --git a/examples/webgl_points_sprites.html b/examples/webgl_points_sprites.html
index 4b95e121c4961dcb4804ada7bf8acfc99d0145c6..d5a71efa3781715baddca7d3e7f0c8d535125d3a 100644
--- a/examples/webgl_points_sprites.html
+++ b/examples/webgl_points_sprites.html
@@ -46,8 +46,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
- var container, stats;
- var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, sprite, size;
+ var camera, scene, renderer, stats, materials = [], parameters;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
@@ -58,54 +57,53 @@
function init() {
- container = document.createElement( 'div' );
- document.body.appendChild( container );
-
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
- geometry = new THREE.Geometry();
+ var geometry = new THREE.BufferGeometry();
+ var vertices = [];
var textureLoader = new THREE.TextureLoader();
- var sprite1 = textureLoader.load( "textures/sprites/snowflake1.png" );
- var sprite2 = textureLoader.load( "textures/sprites/snowflake2.png" );
- var sprite3 = textureLoader.load( "textures/sprites/snowflake3.png" );
- var sprite4 = textureLoader.load( "textures/sprites/snowflake4.png" );
- var sprite5 = textureLoader.load( "textures/sprites/snowflake5.png" );
+ var sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
+ var sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
+ var sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' );
+ var sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' );
+ var sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' );
for ( i = 0; i < 10000; i ++ ) {
- var vertex = new THREE.Vector3();
- vertex.x = Math.random() * 2000 - 1000;
- vertex.y = Math.random() * 2000 - 1000;
- vertex.z = Math.random() * 2000 - 1000;
+ var x = Math.random() * 2000 - 1000;
+ var y = Math.random() * 2000 - 1000;
+ var z = Math.random() * 2000 - 1000;
- geometry.vertices.push( vertex );
+ vertices.push( x, y, z );
}
+ geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
parameters = [
- [ [1.0, 0.2, 0.5], sprite2, 20 ],
- [ [0.95, 0.1, 0.5], sprite3, 15 ],
- [ [0.90, 0.05, 0.5], sprite1, 10 ],
- [ [0.85, 0, 0.5], sprite5, 8 ],
- [ [0.80, 0, 0.5], sprite4, 5 ]
+ [ [ 1.0, 0.2, 0.5 ], sprite2, 20 ],
+ [ [ 0.95, 0.1, 0.5 ], sprite3, 15 ],
+ [ [ 0.90, 0.05, 0.5 ], sprite1, 10 ],
+ [ [ 0.85, 0, 0.5 ], sprite5, 8 ],
+ [ [ 0.80, 0, 0.5 ], sprite4, 5 ]
];
- for ( i = 0; i < parameters.length; i ++ ) {
+ for ( var i = 0; i < parameters.length; i ++ ) {
- color = parameters[i][0];
- sprite = parameters[i][1];
- size = parameters[i][2];
+ var color = parameters[ i ][ 0 ];
+ var sprite = parameters[ i ][ 1 ];
+ var size = parameters[ i ][ 2 ];
- materials[i] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
- materials[i].color.setHSL( color[0], color[1], color[2] );
+ materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
+ materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
- particles = new THREE.Points( geometry, materials[i] );
+ var particles = new THREE.Points( geometry, materials[i] );
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
@@ -118,10 +116,10 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
- container.appendChild( renderer.domElement );
+ document.body.appendChild( renderer.domElement );
stats = new Stats();
- container.appendChild( stats.dom );
+ document.body.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -198,7 +196,7 @@
camera.lookAt( scene.position );
- for ( i = 0; i < scene.children.length; i ++ ) {
+ for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
@@ -210,12 +208,12 @@
}
- for ( i = 0; i < materials.length; i ++ ) {
+ for ( var i = 0; i < materials.length; i ++ ) {
- color = parameters[i][0];
+ var color = parameters[ i ][ 0 ];
- h = ( 360 * ( color[0] + time ) % 360 ) / 360;
- materials[i].color.setHSL( h, color[1], color[2] );
+ var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
+ materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
}