TransformControls: Redesigned translation/scale modes and increased line thickness (#22061)

* TransformControls: Redesigned translation/scale modes and increased line thickness

* Editor: Pass devicePixelRatio to TransformControls

* Examples: Pass devicePixelRatio to TransformControls

* Examples: Clean up

* TransformControls: Fixed lineGeometry2

* Revert "Editor: Pass devicePixelRatio to TransformControls"

This reverts commit 8d8a26bdc739f3ba8902f6a571371fa98d5735de.

* Revert "Examples: Pass devicePixelRatio to TransformControls"

* TransformControls: "Backwards compatible" size

* Updated example screenshots

examples/jsm/controls/TransformControls.js

@@ -762,19 +762,17 @@ class TransformControlsGizmo extends Object3D {
 		const gizmoMaterial = new MeshBasicMaterial( {
 			depthTest: false,
 			depthWrite: false,
-			transparent: true,
-			side: DoubleSide,
 			fog: false,
-			toneMapped: false
+			toneMapped: false,
+			transparent: true
 		} );
 
 		const gizmoLineMaterial = new LineBasicMaterial( {
 			depthTest: false,
 			depthWrite: false,
-			transparent: true,
-			linewidth: 1,
 			fog: false,
-			toneMapped: false
+			toneMapped: false,
+			transparent: true
 		} );
 
 		// Make unique material for each axis/color
@@ -782,8 +780,8 @@ class TransformControlsGizmo extends Object3D {
 		const matInvisible = gizmoMaterial.clone();
 		matInvisible.opacity = 0.15;
 
-		const matHelper = gizmoMaterial.clone();
-		matHelper.opacity = 0.33;
+		const matHelper = gizmoLineMaterial.clone();
+		matHelper.opacity = 0.5;
 
 		const matRed = gizmoMaterial.clone();
 		matRed.color.setHex( 0xff0000 );
@@ -794,67 +792,50 @@ class TransformControlsGizmo extends Object3D {
 		const matBlue = gizmoMaterial.clone();
 		matBlue.color.setHex( 0x0000ff );
 
+		const matRedTransparent = gizmoMaterial.clone();
+		matRedTransparent.color.setHex( 0xff0000 );
+		matRedTransparent.opacity = 0.5;
+
+		const matGreenTransparent = gizmoMaterial.clone();
+		matGreenTransparent.color.setHex( 0x00ff00 );
+		matGreenTransparent.opacity = 0.5;
+
+		const matBlueTransparent = gizmoMaterial.clone();
+		matBlueTransparent.color.setHex( 0x0000ff );
+		matBlueTransparent.opacity = 0.5;
+
 		const matWhiteTransparent = gizmoMaterial.clone();
 		matWhiteTransparent.opacity = 0.25;
 
-		const matYellowTransparent = matWhiteTransparent.clone();
+		const matYellowTransparent = gizmoMaterial.clone();
 		matYellowTransparent.color.setHex( 0xffff00 );
-
-		const matCyanTransparent = matWhiteTransparent.clone();
-		matCyanTransparent.color.setHex( 0x00ffff );
-
-		const matMagentaTransparent = matWhiteTransparent.clone();
-		matMagentaTransparent.color.setHex( 0xff00ff );
+		matYellowTransparent.opacity = 0.25;
 
 		const matYellow = gizmoMaterial.clone();
 		matYellow.color.setHex( 0xffff00 );
 
-		const matLineRed = gizmoLineMaterial.clone();
-		matLineRed.color.setHex( 0xff0000 );
-
-		const matLineGreen = gizmoLineMaterial.clone();
-		matLineGreen.color.setHex( 0x00ff00 );
-
-		const matLineBlue = gizmoLineMaterial.clone();
-		matLineBlue.color.setHex( 0x0000ff );
-
-		const matLineCyan = gizmoLineMaterial.clone();
-		matLineCyan.color.setHex( 0x00ffff );
-
-		const matLineMagenta = gizmoLineMaterial.clone();
-		matLineMagenta.color.setHex( 0xff00ff );
-
-		const matLineYellow = gizmoLineMaterial.clone();
-		matLineYellow.color.setHex( 0xffff00 );
-
-		const matLineGray = gizmoLineMaterial.clone();
-		matLineGray.color.setHex( 0x787878 );
-
-		const matLineYellowTransparent = matLineYellow.clone();
-		matLineYellowTransparent.opacity = 0.25;
+		const matGray = gizmoMaterial.clone();
+		matGray.color.setHex( 0x787878 );
 
 		// reusable geometry
 
-		const arrowGeometry = new CylinderGeometry( 0, 0.05, 0.2, 12, 1, false );
+		const arrowGeometry = new CylinderGeometry( 0, 0.04, 0.1, 12 );
+		arrowGeometry.translate( 0, 0.05, 0 );
 
-		const scaleHandleGeometry = new BoxGeometry( 0.125, 0.125, 0.125 );
+		const scaleHandleGeometry = new BoxGeometry( 0.08, 0.08, 0.08 );
+		scaleHandleGeometry.translate( 0, 0.04, 0 );
 
 		const lineGeometry = new BufferGeometry();
 		lineGeometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0,	1, 0, 0 ], 3 ) );
 
-		function CircleGeometry( radius, arc ) {
-
-			const geometry = new BufferGeometry( );
-			const vertices = [];
+		const lineGeometry2 = new CylinderGeometry( 0.0075, 0.0075, 0.5, 3 );
+		lineGeometry2.translate( 0, 0.25, 0 );
 
-			for ( let i = 0; i <= 64 * arc; ++ i ) {
-
-				vertices.push( 0, Math.cos( i / 32 * Math.PI ) * radius, Math.sin( i / 32 * Math.PI ) * radius );
-
-			}
-
-			geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		function CircleGeometry( radius, arc ) {
 
+			const geometry = new TorusGeometry( radius, 0.0075, 3, 64, arc * Math.PI * 2 );
+			geometry.rotateY( Math.PI / 2 );
+			geometry.rotateX( Math.PI / 2 );
 			return geometry;
 
 		}
@@ -875,61 +856,58 @@ class TransformControlsGizmo extends Object3D {
 
 		const gizmoTranslate = {
 			X: [
-				[ new Mesh( arrowGeometry, matRed ), [ 1, 0, 0 ], [ 0, 0, - Math.PI / 2 ], null, 'fwd' ],
-				[ new Mesh( arrowGeometry, matRed ), [ 1, 0, 0 ], [ 0, 0, Math.PI / 2 ], null, 'bwd' ],
-				[ new Line( lineGeometry, matLineRed ) ]
+				[ new Mesh( arrowGeometry, matRed ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
+				[ new Mesh( arrowGeometry, matRed ), [ - 0.5, 0, 0 ], [ 0, 0, Math.PI / 2 ]],
+				[ new Mesh( lineGeometry2, matRed ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]]
 			],
 			Y: [
-				[ new Mesh( arrowGeometry, matGreen ), [ 0, 1, 0 ], null, null, 'fwd' ],
-				[ new Mesh( arrowGeometry, matGreen ), [ 0, 1, 0 ], [ Math.PI, 0, 0 ], null, 'bwd' ],
-				[ new Line( lineGeometry, matLineGreen ), null, [ 0, 0, Math.PI / 2 ]]
+				[ new Mesh( arrowGeometry, matGreen ), [ 0, 0.5, 0 ]],
+				[ new Mesh( arrowGeometry, matGreen ), [ 0, - 0.5, 0 ], [ Math.PI, 0, 0 ]],
+				[ new Mesh( lineGeometry2, matGreen ) ]
 			],
 			Z: [
-				[ new Mesh( arrowGeometry, matBlue ), [ 0, 0, 1 ], [ Math.PI / 2, 0, 0 ], null, 'fwd' ],
-				[ new Mesh( arrowGeometry, matBlue ), [ 0, 0, 1 ], [ - Math.PI / 2, 0, 0 ], null, 'bwd' ],
-				[ new Line( lineGeometry, matLineBlue ), null, [ 0, - Math.PI / 2, 0 ]]
+				[ new Mesh( arrowGeometry, matBlue ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ]],
+				[ new Mesh( arrowGeometry, matBlue ), [ 0, 0, - 0.5 ], [ - Math.PI / 2, 0, 0 ]],
+				[ new Mesh( lineGeometry2, matBlue ), null, [ Math.PI / 2, 0, 0 ]]
 			],
 			XYZ: [
-				[ new Mesh( new OctahedronGeometry( 0.1, 0 ), matWhiteTransparent.clone() ), [ 0, 0, 0 ], [ 0, 0, 0 ]]
+				[ new Mesh( new OctahedronGeometry( 0.1, 0 ), matWhiteTransparent.clone() ), [ 0, 0, 0 ]]
 			],
 			XY: [
-				[ new Mesh( new PlaneGeometry( 0.295, 0.295 ), matYellowTransparent.clone() ), [ 0.15, 0.15, 0 ]],
-				[ new Line( lineGeometry, matLineYellow ), [ 0.18, 0.3, 0 ], null, [ 0.125, 1, 1 ]],
-				[ new Line( lineGeometry, matLineYellow ), [ 0.3, 0.18, 0 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent.clone() ), [ 0.15, 0.15, 0 ]]
 			],
 			YZ: [
-				[ new Mesh( new PlaneGeometry( 0.295, 0.295 ), matCyanTransparent.clone() ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]],
-				[ new Line( lineGeometry, matLineCyan ), [ 0, 0.18, 0.3 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ]],
-				[ new Line( lineGeometry, matLineCyan ), [ 0, 0.3, 0.18 ], [ 0, - Math.PI / 2, 0 ], [ 0.125, 1, 1 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent.clone() ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
 			],
 			XZ: [
-				[ new Mesh( new PlaneGeometry( 0.295, 0.295 ), matMagentaTransparent.clone() ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]],
-				[ new Line( lineGeometry, matLineMagenta ), [ 0.18, 0, 0.3 ], null, [ 0.125, 1, 1 ]],
-				[ new Line( lineGeometry, matLineMagenta ), [ 0.3, 0, 0.18 ], [ 0, - Math.PI / 2, 0 ], [ 0.125, 1, 1 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent.clone() ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
 			]
 		};
 
 		const pickerTranslate = {
 			X: [
-				[ new Mesh( new CylinderGeometry( 0.2, 0, 1, 4, 1, false ), matInvisible ), [ 0.6, 0, 0 ], [ 0, 0, - Math.PI / 2 ]]
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0.3, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ - 0.3, 0, 0 ], [ 0, 0, Math.PI / 2 ]]
 			],
 			Y: [
-				[ new Mesh( new CylinderGeometry( 0.2, 0, 1, 4, 1, false ), matInvisible ), [ 0, 0.6, 0 ]]
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0.3, 0 ]],
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, - 0.3, 0 ], [ 0, 0, Math.PI ]]
 			],
 			Z: [
-				[ new Mesh( new CylinderGeometry( 0.2, 0, 1, 4, 1, false ), matInvisible ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ]]
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, 0.3 ], [ Math.PI / 2, 0, 0 ]],
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, - 0.3 ], [ - Math.PI / 2, 0, 0 ]]
 			],
 			XYZ: [
 				[ new Mesh( new OctahedronGeometry( 0.2, 0 ), matInvisible ) ]
 			],
 			XY: [
-				[ new Mesh( new PlaneGeometry( 0.4, 0.4 ), matInvisible ), [ 0.2, 0.2, 0 ]]
+				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0.15, 0 ]]
 			],
 			YZ: [
-				[ new Mesh( new PlaneGeometry( 0.4, 0.4 ), matInvisible ), [ 0, 0.2, 0.2 ], [ 0, Math.PI / 2, 0 ]]
+				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
 			],
 			XZ: [
-				[ new Mesh( new PlaneGeometry( 0.4, 0.4 ), matInvisible ), [ 0.2, 0, 0.2 ], [ - Math.PI / 2, 0, 0 ]]
+				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
 			]
 		};
 
@@ -955,27 +933,20 @@ class TransformControlsGizmo extends Object3D {
 		};
 
 		const gizmoRotate = {
+			XYZE: [
+				[ new Mesh( CircleGeometry( 0.5, 1 ), matGray ), null, [ 0, Math.PI / 2, 0 ]]
+			],
 			X: [
-				[ new Line( CircleGeometry( 1, 0.5 ), matLineRed ) ],
-				[ new Mesh( new OctahedronGeometry( 0.04, 0 ), matRed ), [ 0, 0, 0.99 ], null, [ 1, 3, 1 ]],
+				[ new Mesh( CircleGeometry( 0.5, 0.5 ), matRed ) ]
 			],
 			Y: [
-				[ new Line( CircleGeometry( 1, 0.5 ), matLineGreen ), null, [ 0, 0, - Math.PI / 2 ]],
-				[ new Mesh( new OctahedronGeometry( 0.04, 0 ), matGreen ), [ 0, 0, 0.99 ], null, [ 3, 1, 1 ]],
+				[ new Mesh( CircleGeometry( 0.5, 0.5 ), matGreen ), null, [ 0, 0, - Math.PI / 2 ]]
 			],
 			Z: [
-				[ new Line( CircleGeometry( 1, 0.5 ), matLineBlue ), null, [ 0, Math.PI / 2, 0 ]],
-				[ new Mesh( new OctahedronGeometry( 0.04, 0 ), matBlue ), [ 0.99, 0, 0 ], null, [ 1, 3, 1 ]],
+				[ new Mesh( CircleGeometry( 0.5, 0.5 ), matBlue ), null, [ 0, Math.PI / 2, 0 ]]
 			],
 			E: [
-				[ new Line( CircleGeometry( 1.25, 1 ), matLineYellowTransparent ), null, [ 0, Math.PI / 2, 0 ]],
-				[ new Mesh( new CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ 1.17, 0, 0 ], [ 0, 0, - Math.PI / 2 ], [ 1, 1, 0.001 ]],
-				[ new Mesh( new CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ - 1.17, 0, 0 ], [ 0, 0, Math.PI / 2 ], [ 1, 1, 0.001 ]],
-				[ new Mesh( new CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ 0, - 1.17, 0 ], [ Math.PI, 0, 0 ], [ 1, 1, 0.001 ]],
-				[ new Mesh( new CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ 0, 1.17, 0 ], [ 0, 0, 0 ], [ 1, 1, 0.001 ]],
-			],
-			XYZE: [
-				[ new Line( CircleGeometry( 1, 1 ), matLineGray ), null, [ 0, Math.PI / 2, 0 ]]
+				[ new Mesh( CircleGeometry( 0.75, 1 ), matYellowTransparent ), null, [ 0, Math.PI / 2, 0 ]]
 			]
 		};
 
@@ -986,89 +957,77 @@ class TransformControlsGizmo extends Object3D {
 		};
 
 		const pickerRotate = {
+			XYZE: [
+				[ new Mesh( new SphereGeometry( 0.25, 10, 8 ), matInvisible ) ]
+			],
 			X: [
-				[ new Mesh( new TorusGeometry( 1, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, - Math.PI / 2, - Math.PI / 2 ]],
+				[ new Mesh( new TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, - Math.PI / 2, - Math.PI / 2 ]],
 			],
 			Y: [
-				[ new Mesh( new TorusGeometry( 1, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ]],
+				[ new Mesh( new TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ]],
 			],
 			Z: [
-				[ new Mesh( new TorusGeometry( 1, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
+				[ new Mesh( new TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
 			],
 			E: [
-				[ new Mesh( new TorusGeometry( 1.25, 0.1, 2, 24 ), matInvisible ) ]
-			],
-			XYZE: [
-				[ new Mesh( new SphereGeometry( 0.7, 10, 8 ), matInvisible ) ]
+				[ new Mesh( new TorusGeometry( 0.75, 0.1, 2, 24 ), matInvisible ) ]
 			]
 		};
 
 		const gizmoScale = {
 			X: [
-				[ new Mesh( scaleHandleGeometry, matRed ), [ 0.8, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
-				[ new Line( lineGeometry, matLineRed ), null, null, [ 0.8, 1, 1 ]]
+				[ new Mesh( scaleHandleGeometry, matRed ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
+				[ new Mesh( lineGeometry2, matRed ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
+				[ new Mesh( scaleHandleGeometry, matRed ), [ - 0.5, 0, 0 ], [ 0, 0, Math.PI / 2 ]],
 			],
 			Y: [
-				[ new Mesh( scaleHandleGeometry, matGreen ), [ 0, 0.8, 0 ]],
-				[ new Line( lineGeometry, matLineGreen ), null, [ 0, 0, Math.PI / 2 ], [ 0.8, 1, 1 ]]
+				[ new Mesh( scaleHandleGeometry, matGreen ), [ 0, 0.5, 0 ]],
+				[ new Mesh( lineGeometry2, matGreen ) ],
+				[ new Mesh( scaleHandleGeometry, matGreen ), [ 0, - 0.5, 0 ], [ 0, 0, Math.PI ]],
 			],
 			Z: [
-				[ new Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, 0.8 ], [ Math.PI / 2, 0, 0 ]],
-				[ new Line( lineGeometry, matLineBlue ), null, [ 0, - Math.PI / 2, 0 ], [ 0.8, 1, 1 ]]
+				[ new Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ]],
+				[ new Mesh( lineGeometry2, matBlue ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ]],
+				[ new Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, - 0.5 ], [ - Math.PI / 2, 0, 0 ]]
 			],
 			XY: [
-				[ new Mesh( scaleHandleGeometry, matYellowTransparent ), [ 0.85, 0.85, 0 ], null, [ 2, 2, 0.2 ]],
-				[ new Line( lineGeometry, matLineYellow ), [ 0.855, 0.98, 0 ], null, [ 0.125, 1, 1 ]],
-				[ new Line( lineGeometry, matLineYellow ), [ 0.98, 0.855, 0 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent ), [ 0.15, 0.15, 0 ]]
 			],
 			YZ: [
-				[ new Mesh( scaleHandleGeometry, matCyanTransparent ), [ 0, 0.85, 0.85 ], null, [ 0.2, 2, 2 ]],
-				[ new Line( lineGeometry, matLineCyan ), [ 0, 0.855, 0.98 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ]],
-				[ new Line( lineGeometry, matLineCyan ), [ 0, 0.98, 0.855 ], [ 0, - Math.PI / 2, 0 ], [ 0.125, 1, 1 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
 			],
 			XZ: [
-				[ new Mesh( scaleHandleGeometry, matMagentaTransparent ), [ 0.85, 0, 0.85 ], null, [ 2, 0.2, 2 ]],
-				[ new Line( lineGeometry, matLineMagenta ), [ 0.855, 0, 0.98 ], null, [ 0.125, 1, 1 ]],
-				[ new Line( lineGeometry, matLineMagenta ), [ 0.98, 0, 0.855 ], [ 0, - Math.PI / 2, 0 ], [ 0.125, 1, 1 ]]
-			],
-			XYZX: [
-				[ new Mesh( new BoxGeometry( 0.125, 0.125, 0.125 ), matWhiteTransparent.clone() ), [ 1.1, 0, 0 ]],
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
 			],
-			XYZY: [
-				[ new Mesh( new BoxGeometry( 0.125, 0.125, 0.125 ), matWhiteTransparent.clone() ), [ 0, 1.1, 0 ]],
-			],
-			XYZZ: [
-				[ new Mesh( new BoxGeometry( 0.125, 0.125, 0.125 ), matWhiteTransparent.clone() ), [ 0, 0, 1.1 ]],
+			XYZ: [
+				[ new Mesh( new BoxGeometry( 0.1, 0.1, 0.1 ), matWhiteTransparent.clone() ) ],
 			]
 		};
 
 		const pickerScale = {
 			X: [
-				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.8, 4, 1, false ), matInvisible ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ]]
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0.3, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ - 0.3, 0, 0 ], [ 0, 0, Math.PI / 2 ]]
 			],
 			Y: [
-				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.8, 4, 1, false ), matInvisible ), [ 0, 0.5, 0 ]]
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0.3, 0 ]],
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, - 0.3, 0 ], [ 0, 0, Math.PI ]]
 			],
 			Z: [
-				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.8, 4, 1, false ), matInvisible ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ]]
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, 0.3 ], [ Math.PI / 2, 0, 0 ]],
+				[ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, - 0.3 ], [ - Math.PI / 2, 0, 0 ]]
 			],
 			XY: [
-				[ new Mesh( scaleHandleGeometry, matInvisible ), [ 0.85, 0.85, 0 ], null, [ 3, 3, 0.2 ]],
+				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0.15, 0 ]],
 			],
 			YZ: [
-				[ new Mesh( scaleHandleGeometry, matInvisible ), [ 0, 0.85, 0.85 ], null, [ 0.2, 3, 3 ]],
+				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]],
 			],
 			XZ: [
-				[ new Mesh( scaleHandleGeometry, matInvisible ), [ 0.85, 0, 0.85 ], null, [ 3, 0.2, 3 ]],
-			],
-			XYZX: [
-				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 1.1, 0, 0 ]],
+				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]],
 			],
-			XYZY: [
-				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 0, 1.1, 0 ]],
-			],
-			XYZZ: [
-				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 0, 0, 1.1 ]],
+			XYZ: [
+				[ new Mesh( new BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 0, 0, 0 ]],
 			]
 		};
 
@@ -1213,7 +1172,7 @@ class TransformControlsGizmo extends Object3D {
 
 			}
 
-			handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 7 );
+			handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 4 );
 
 			// TODO: simplify helpers and consider decoupling from gizmo
 
@@ -1338,9 +1297,8 @@ class TransformControlsGizmo extends Object3D {
 
 				const AXIS_HIDE_TRESHOLD = 0.99;
 				const PLANE_HIDE_TRESHOLD = 0.2;
-				const AXIS_FLIP_TRESHOLD = 0.0;
 
-				if ( handle.name === 'X' || handle.name === 'XYZX' ) {
+				if ( handle.name === 'X' ) {
 
 					if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
 
@@ -1351,7 +1309,7 @@ class TransformControlsGizmo extends Object3D {
 
 				}
 
-				if ( handle.name === 'Y' || handle.name === 'XYZY' ) {
+				if ( handle.name === 'Y' ) {
 
 					if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
 
@@ -1362,7 +1320,7 @@ class TransformControlsGizmo extends Object3D {
 
 				}
 
-				if ( handle.name === 'Z' || handle.name === 'XYZZ' ) {
+				if ( handle.name === 'Z' ) {
 
 					if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
 
@@ -1406,74 +1364,6 @@ class TransformControlsGizmo extends Object3D {
 
 				}
 
-				// Flip translate and scale axis ocluded behind another axis
-
-				if ( handle.name.search( 'X' ) !== - 1 ) {
-
-					if ( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) < AXIS_FLIP_TRESHOLD ) {
-
-						if ( handle.tag === 'fwd' ) {
-
-							handle.visible = false;
-
-						} else {
-
-							handle.scale.x *= - 1;
-
-						}
-
-					} else if ( handle.tag === 'bwd' ) {
-
-						handle.visible = false;
-
-					}
-
-				}
-
-				if ( handle.name.search( 'Y' ) !== - 1 ) {
-
-					if ( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) < AXIS_FLIP_TRESHOLD ) {
-
-						if ( handle.tag === 'fwd' ) {
-
-							handle.visible = false;
-
-						} else {
-
-							handle.scale.y *= - 1;
-
-						}
-
-					} else if ( handle.tag === 'bwd' ) {
-
-						handle.visible = false;
-
-					}
-
-				}
-
-				if ( handle.name.search( 'Z' ) !== - 1 ) {
-
-					if ( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) < AXIS_FLIP_TRESHOLD ) {
-
-						if ( handle.tag === 'fwd' ) {
-
-							handle.visible = false;
-
-						} else {
-
-							handle.scale.z *= - 1;
-
-						}
-
-					} else if ( handle.tag === 'bwd' ) {
-
-						handle.visible = false;
-
-					}
-
-				}
-
 			} else if ( this.mode === 'rotate' ) {
 
 				// Align handles to current local or world rotation

examples/misc_controls_transform.html

@@ -83,7 +83,7 @@
 					switch ( event.keyCode ) {
 
 						case 81: // Q
-							control.setSpace( control.space === "local" ? "world" : "local" );
+							control.setSpace( control.space === 'local' ? 'world' : 'local' );
 							break;
 
 						case 16: // Shift
@@ -93,15 +93,15 @@
 							break;
 
 						case 87: // W
-							control.setMode( "translate" );
+							control.setMode( 'translate' );
 							break;
 
 						case 69: // E
-							control.setMode( "rotate" );
+							control.setMode( 'rotate' );
 							break;
 
 						case 82: // R
-							control.setMode( "scale" );
+							control.setMode( 'scale' );
 							break;
 
 						case 67: // C

examples/webgl_modifier_curve.html

@@ -15,13 +15,12 @@
 		</div>
 
 		<script type="module">
-			import * as THREE from "../build/three.module.js";
-			import { TransformControls } from "./jsm/controls/TransformControls.js";
-			import Stats from "./jsm/libs/stats.module.js";
-			import { Flow } from "./jsm/modifiers/CurveModifier.js";
+			import * as THREE from '../build/three.module.js';
+			import { TransformControls } from './jsm/controls/TransformControls.js';
+			import Stats from './jsm/libs/stats.module.js';
+			import { Flow } from './jsm/modifiers/CurveModifier.js';
 
-			const ACTION_SELECT = 1,
-				ACTION_NONE = 0;
+			const ACTION_SELECT = 1, ACTION_NONE = 0;
 			const curveHandles = [];
 			const mouse = new THREE.Vector2();
 
@@ -72,7 +71,7 @@
 				const curve = new THREE.CatmullRomCurve3(
 					curveHandles.map( ( handle ) => handle.position )
 				);
-				curve.curveType = "centripetal";
+				curve.curveType = 'centripetal';
 				curve.closed = true;
 
 				const points = curve.getPoints( 50 );
@@ -97,12 +96,9 @@
 				//
 
 				const loader = new THREE.FontLoader();
+				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
-				loader.load( "fonts/helvetiker_regular.typeface.json", function (
-					font
-				) {
-
-					const geometry = new THREE.TextGeometry( "Hello three.js!", {
+					const geometry = new THREE.TextGeometry( 'Hello three.js!', {
 						font: font,
 						size: 0.2,
 						height: 0.05,
@@ -139,7 +135,7 @@
 
 				rayCaster = new THREE.Raycaster();
 				control = new TransformControls( camera, renderer.domElement );
-				control.addEventListener( "dragging-changed", function ( event ) {
+				control.addEventListener( 'dragging-changed', function ( event ) {
 
 					if ( ! event.value ) {
 
@@ -154,7 +150,7 @@
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 
-				window.addEventListener( "resize", onWindowResize );
+				window.addEventListener( 'resize', onWindowResize );
 
 			}
 

examples/webgl_modifier_curve_instanced.html

@@ -15,13 +15,12 @@
 		</div>
 
 		<script type="module">
-			import * as THREE from "../build/three.module.js";
-			import { TransformControls } from "./jsm/controls/TransformControls.js";
-			import Stats from "./jsm/libs/stats.module.js";
-			import { InstancedFlow } from "./jsm/modifiers/CurveModifier.js";
+			import * as THREE from '../build/three.module.js';
+			import { TransformControls } from './jsm/controls/TransformControls.js';
+			import Stats from './jsm/libs/stats.module.js';
+			import { InstancedFlow } from './jsm/modifiers/CurveModifier.js';
 
-			const ACTION_SELECT = 1,
-				ACTION_NONE = 0;
+			const ACTION_SELECT = 1, ACTION_NONE = 0;
 			const curveHandles = [];
 			const mouse = new THREE.Vector2();
 
@@ -77,7 +76,7 @@
 					} );
 
 					const curve = new THREE.CatmullRomCurve3( curveVertices );
-					curve.curveType = "centripetal";
+					curve.curveType = 'centripetal';
 					curve.closed = true;
 
 					const points = curve.getPoints( 50 );
@@ -110,12 +109,9 @@
 				//
 
 				const loader = new THREE.FontLoader();
+				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
-				loader.load( "fonts/helvetiker_regular.typeface.json", function (
-					font
-				) {
-
-					const geometry = new THREE.TextGeometry( "Hello three.js!", {
+					const geometry = new THREE.TextGeometry( 'Hello three.js!', {
 						font: font,
 						size: 0.2,
 						height: 0.05,
@@ -165,7 +161,7 @@
 
 				rayCaster = new THREE.Raycaster();
 				control = new TransformControls( camera, renderer.domElement );
-				control.addEventListener( "dragging-changed", function ( event ) {
+				control.addEventListener( 'dragging-changed', function ( event ) {
 
 					if ( ! event.value ) {
 
@@ -184,7 +180,7 @@
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 
-				window.addEventListener( "resize", onWindowResize );
+				window.addEventListener( 'resize', onWindowResize );
 
 			}
 

examples/webgl_shadowmap_progressive.html

@@ -22,9 +22,10 @@
 			import { ProgressiveLightMap } from './jsm/misc/ProgressiveLightMap.js';
 
 			// ShadowMap + LightMap Res and Number of Directional Lights
-			let shadowMapRes = 512, lightMapRes = 1024, lightCount = 8;
-			let camera, scene, renderer, dirLights = [], controls, control, control2,
-				object = new THREE.Mesh(), lightOrigin = null, progressiveSurfacemap, lightmapObjects = [];
+			const shadowMapRes = 512, lightMapRes = 1024, lightCount = 8;
+			let camera, scene, renderer, controls, control, control2,
+				object = new THREE.Mesh(), lightOrigin = null, progressiveSurfacemap;
+			const dirLights = [], lightmapObjects = [];
 			const params = { 'Enable': true, 'Blur Edges': true, 'Blend Window': 200,
 							 'Light Radius': 50, 'Ambient Weight': 0.5, 'Debug Lightmap': false };
 			init();
@@ -43,7 +44,7 @@
 				// camera
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 100, 200 );
-				camera.name = "Camera";
+				camera.name = 'Camera';
 
 				// scene
 				scene = new THREE.Scene();
@@ -71,7 +72,7 @@
 				// create 8 directional lights to speed up the convergence
 				for ( let l = 0; l < lightCount; l ++ ) {
 
-					let dirLight = new THREE.DirectionalLight( 0xffffff, 1.0 / lightCount );
+					const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0 / lightCount );
 					dirLight.name = 'Dir. Light ' + l;
 					dirLight.position.set( 200, 200, 200 );
 					dirLight.castShadow = true;
@@ -89,11 +90,13 @@
 				}
 
 				// ground
-				let groundMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 600, 600 ),
-					new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: true } ) );
+				const groundMesh = new THREE.Mesh(
+					new THREE.PlaneBufferGeometry( 600, 600 ),
+					new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: true } )
+				);
 				groundMesh.position.y = - 0.1;
 				groundMesh.rotation.x = - Math.PI / 2;
-				groundMesh.name = "Ground Mesh";
+				groundMesh.name = 'Ground Mesh';
 				lightmapObjects.push( groundMesh );
 				scene.add( groundMesh );
 
@@ -104,7 +107,7 @@
 
 						if ( child.isMesh ) {
 
-							child.name = "Loaded Mesh";
+							child.name = 'Loaded Mesh';
 							child.castShadow = true;
 							child.receiveShadow = true;
 							child.material = new THREE.MeshPhongMaterial();
@@ -131,7 +134,7 @@
 					} );
 					control2.attach( object );
 					scene.add( control2 );
-					let lightTarget = new THREE.Group();
+					const lightTarget = new THREE.Group();
 					lightTarget.position.set( 0, 20, 0 );
 					for ( let l = 0; l < dirLights.length; l ++ ) {
 
@@ -141,14 +144,23 @@
 
 					object.add( lightTarget );
 
-					if ( typeof TESTING !== 'undefined' ) { for ( let i = 0; i < 300; i ++ ) { render(); }; };
+					if ( typeof TESTING !== 'undefined' ) {
+
+						for ( let i = 0; i < 300; i ++ ) {
+
+							render();
+
+						}
+
+					}
+
 				}
 
 				const manager = new THREE.LoadingManager( loadModel );
 				const loader = new GLTFLoader( manager );
 				loader.load( 'models/gltf/ShadowmappableMesh.glb', function ( obj ) {
 
-					object = obj.scene.children[0];
+					object = obj.scene.children[ 0 ];
 
 				} );
 
@@ -194,7 +206,12 @@
 				if ( params[ 'Enable' ] ) {
 
 					progressiveSurfacemap.update( camera, params[ 'Blend Window' ], params[ 'Blur Edges' ] );
-					if(!progressiveSurfacemap.firstUpdate) { progressiveSurfacemap.showDebugLightmap( params[ 'Debug Lightmap' ] ); }
+
+					if ( ! progressiveSurfacemap.firstUpdate ) {
+
+						progressiveSurfacemap.showDebugLightmap( params[ 'Debug Lightmap' ] );
+
+					}
 
 				}
 
@@ -205,18 +222,21 @@
 					// Sometimes they will be uniformly sampled from the upper hemisphere
 					if ( Math.random() > params[ 'Ambient Weight' ] ) {
 
-						dirLights[ l ].position.set( lightOrigin.position.x + ( Math.random() * params[ 'Light Radius' ] ),
-													lightOrigin.position.y + ( Math.random() * params[ 'Light Radius' ] ),
-													lightOrigin.position.z + ( Math.random() * params[ 'Light Radius' ] ) );
+						dirLights[ l ].position.set(
+							lightOrigin.position.x + ( Math.random() * params[ 'Light Radius' ] ),
+							lightOrigin.position.y + ( Math.random() * params[ 'Light Radius' ] ),
+							lightOrigin.position.z + ( Math.random() * params[ 'Light Radius' ] ) );
 
 					} else {
 
 						// Uniform Hemispherical Surface Distribution for Ambient Occlusion
-						let lambda = Math.acos( 2 * Math.random() - 1 ) - ( 3.14159 / 2.0 );
-						let phi = 2 * 3.14159 * Math.random();
-						dirLights[ l ].position.set( ( ( Math.cos( lambda ) * Math.cos( phi ) ) * 300 ) + object.position.x,
-											 Math.abs( ( Math.cos( lambda ) * Math.sin( phi ) ) * 300 ) + object.position.y + 20,
-													   ( Math.sin( lambda )                     * 300 ) + object.position.z );
+						const lambda = Math.acos( 2 * Math.random() - 1 ) - ( 3.14159 / 2.0 );
+						const phi = 2 * 3.14159 * Math.random();
+						dirLights[ l ].position.set(
+							        ( ( Math.cos( lambda ) * Math.cos( phi ) ) * 300 ) + object.position.x,
+							Math.abs( ( Math.cos( lambda ) * Math.sin( phi ) ) * 300 ) + object.position.y + 20,
+							          ( Math.sin( lambda ) * 300 ) + object.position.z
+						);
 
 					}