Merge pull request #14620 from Mugen87/dev18

PaintViveController: Moved to BufferGeometry.

examples/js/vr/PaintViveController.js

@@ -32,7 +32,7 @@ THREE.PaintViveController = function ( id ) {
 			var x = ( ( j % 256 ) / 256 ) - 0.5;
 			var y = ( Math.floor( j / 256 ) / 256 ) - 0.5;
 
-			swatchColor.setHSL( Math.atan2( y, x ) / PI2, 1,( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
+			swatchColor.setHSL( Math.atan2( y, x ) / PI2, 1, ( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
 
 			data[ i + 0 ] = swatchColor.r * 256;
 			data[ i + 1 ] = swatchColor.g * 256;
@@ -49,7 +49,7 @@ THREE.PaintViveController = function ( id ) {
 
 	// COLOR UI
 
-	var geometry = new THREE.CircleGeometry( 1, 32 );
+	var geometry = new THREE.CircleBufferGeometry( 1, 32 );
 	var material = new THREE.MeshBasicMaterial( { map: generateHueTexture() } );
 	var colorUI = new THREE.Mesh( geometry, material );
 	colorUI.position.set( 0, 0.005, 0.0495 );
@@ -57,7 +57,7 @@ THREE.PaintViveController = function ( id ) {
 	colorUI.scale.setScalar( 0.02 );
 	this.add( colorUI );
 
-	var geometry = new THREE.IcosahedronGeometry( 0.1, 2 );
+	var geometry = new THREE.IcosahedronBufferGeometry( 0.1, 2 );
 	var material = new THREE.MeshBasicMaterial();
 	material.color = color;
 	var ball = new THREE.Mesh( geometry, material );
@@ -72,23 +72,23 @@ THREE.PaintViveController = function ( id ) {
 	this.add( sizeUI );
 
 	var triangleShape = new THREE.Shape();
-	triangleShape.moveTo( 0, -1 );
+	triangleShape.moveTo( 0, - 1 );
 	triangleShape.lineTo( 1, 1 );
-	triangleShape.lineTo( -1, 1 );
+	triangleShape.lineTo( - 1, 1 );
 
-	var geometry = new THREE.ShapeGeometry( triangleShape );
-	var material = new THREE.MeshBasicMaterial( { color: 0x222222, wireframe:true } );
-	var sizeUIOutline = new THREE.Mesh( geometry, material ) ;
+	var geometry = new THREE.ShapeBufferGeometry( triangleShape );
+	var material = new THREE.MeshBasicMaterial( { color: 0x222222, wireframe: true } );
+	var sizeUIOutline = new THREE.Mesh( geometry, material );
 	sizeUIOutline.position.z = 0.001;
-	resizeTriangleGeometry(sizeUIOutline.geometry, 1.0);
+	resizeTriangleGeometry( sizeUIOutline.geometry, 1.0 );
 	sizeUI.add( sizeUIOutline );
 
-	var geometry = new THREE.ShapeGeometry( triangleShape );
-	var material = new THREE.MeshBasicMaterial( {side: THREE.DoubleSide } );
+	var geometry = new THREE.ShapeBufferGeometry( triangleShape );
+	var material = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide } );
 	material.color = color;
-	var sizeUIFill = new THREE.Mesh( geometry, material ) ;
+	var sizeUIFill = new THREE.Mesh( geometry, material );
 	sizeUIFill.position.z = 0.0011;
-	resizeTriangleGeometry(sizeUIFill.geometry, 0.5);
+	resizeTriangleGeometry( sizeUIFill.geometry, 0.5 );
 	sizeUI.add( sizeUIFill );
 
 	sizeUI.visible = false;
@@ -103,21 +103,25 @@ THREE.PaintViveController = function ( id ) {
 		var y = - event.axes[ 1 ] / 2.0;
 
 		if ( mode === MODES.COLOR ) {
+
 			color.setHSL( Math.atan2( y, x ) / PI2, 1, ( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
 
-			ball.position.set(event.axes[ 0 ], event.axes[ 1 ], 0);
+			ball.position.set( event.axes[ 0 ], event.axes[ 1 ], 0 );
+
 		}
 
 		if ( mode === MODES.SIZE ) {
-			var ratio = (0.5 - y);
+
+			var ratio = 0.5 - y;
 			size = ratio * 2;
 
-			resizeTriangleGeometry(sizeUIFill.geometry, ratio);
+			resizeTriangleGeometry( sizeUIFill.geometry, ratio );
+
 		}
 
 	}
 
-	function resizeTriangleGeometry(geometry, ratio) {
+	function resizeTriangleGeometry( geometry, ratio ) {
 
 		var x = 0, y = 0;
 		var fullWidth = 0.75, fullHeight = 1.5;
@@ -127,34 +131,49 @@ THREE.PaintViveController = function ( id ) {
 		var height = fullHeight * ratio;
 		var width = ( Math.tan( angle ) * height ) * 2;
 
-		geometry.vertices[ 0 ].set( x, bottomY, 0 );
-		geometry.vertices[ 1 ].set( x + width / 2, bottomY + height, 0 );
-		geometry.vertices[ 2 ].set( x - width / 2, bottomY + height, 0 );
+		var position = geometry.attributes.position;
 
-		geometry.verticesNeedUpdate = true;
+		position.setXYZ( 0, x, bottomY, 0 );
+		position.setXYZ( 1, x + width / 2, bottomY + height, 0 );
+		position.setXYZ( 2, x - width / 2, bottomY + height, 0 );
+
+		position.needsUpdate = true;
 
 	}
 
-	function onGripsDown( event ) {
+	function onGripsDown() {
 
 		if ( mode === MODES.COLOR ) {
+
 			mode = MODES.SIZE;
 			colorUI.visible = false;
 			sizeUI.visible = true;
 			return;
+
 		}
 
 		if ( mode === MODES.SIZE ) {
+
 			mode = MODES.COLOR;
 			colorUI.visible = true;
 			sizeUI.visible = false;
 			return;
+
 		}
 
 	}
 
-	this.getColor = function () { return color; };
-	this.getSize = function () { return size; };
+	this.getColor = function () {
+
+		return color;
+
+	};
+
+	this.getSize = function () {
+
+		return size;
+
+	 };
 
 	this.addEventListener( 'axischanged', onAxisChanged );
 	this.addEventListener( 'gripsdown', onGripsDown );