/** * @author arodic / https://github.com/arodic */ THREE.TransformControlsGizmo = function () { 'use strict'; THREE.Object3D.call( this ); this.type = 'TransformControlsGizmo'; // shared materials var gizmoMaterial = new THREE.MeshBasicMaterial({ depthTest: false, depthWrite: false, transparent: true, side: THREE.DoubleSide, fog: false }); var gizmoLineMaterial = new THREE.LineBasicMaterial({ depthTest: false, depthWrite: false, transparent: true, linewidth: 1, fog: false }); var matInvisible = gizmoMaterial.clone(); matInvisible.opacity = 0.15; var matRed = gizmoMaterial.clone(); matRed.color.set(0xff0000); var matGreen = gizmoMaterial.clone(); matGreen.color.set(0x00ff00); var matBlue = gizmoMaterial.clone(); matBlue.color.set(0x0000ff); var matWhiteTransperent = gizmoMaterial.clone(); matWhiteTransperent.opacity = 0.25; var matYellowTransparent = matWhiteTransperent.clone(); matYellowTransparent.color.set(0xffff00); var matCyanTransparent = matWhiteTransperent.clone(); matCyanTransparent.color.set(0x00ffff); var matMagentaTransparent = matWhiteTransperent.clone(); matMagentaTransparent.color.set(0xff00ff); var matYellow = gizmoMaterial.clone(); matYellow.color.set(0xffff00); var matLineRed = gizmoLineMaterial.clone(); matLineRed.color.set(0xff0000); var matLineGreen = gizmoLineMaterial.clone(); matLineGreen.color.set(0x00ff00); var matLineBlue = gizmoLineMaterial.clone(); matLineBlue.color.set(0x0000ff); var matLineCyan = gizmoLineMaterial.clone(); matLineCyan.color.set(0x00ffff); var matLineMagenta = gizmoLineMaterial.clone(); matLineMagenta.color.set(0xff00ff); var matLineBlue = gizmoLineMaterial.clone(); matLineBlue.color.set(0x0000ff); var matLineYellow = gizmoLineMaterial.clone(); matLineYellow.color.set(0xffff00); var matLineGray = gizmoLineMaterial.clone(); matLineGray.color.set(0x787878); var matLineYellowTransparent = matLineYellow.clone(); matLineYellowTransparent.opacity = 0.25; // shared objects var arrowGeometry = new THREE.CylinderGeometry( 0, 0.05, 0.2, 12, 1, false); var scaleHandleGeometry = new THREE.BoxGeometry( 0.125, 0.125, 0.125); var lineGeometry = new THREE.BufferGeometry( ); lineGeometry.addAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 1, 0, 0 ], 3)); var CircleGeometry = function(radius, arc) { var geometry = new THREE.BufferGeometry( ); var vertices = []; for (var i = 0; i <= 64 * arc; ++i) { vertices.push(0, Math.cos(i / 32 * Math.PI) * radius, Math.sin(i / 32 * Math.PI) * radius); } geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); return geometry; }; // gizmos var gizmoTranslate = { X: [ [ new THREE.Mesh( arrowGeometry, matRed ), [ 1, 0, 0 ], [ 0, 0, -Math.PI / 2 ], null, 'fwd' ], [ new THREE.Mesh( arrowGeometry, matRed ), [ 1, 0, 0 ], [ 0, 0, Math.PI / 2 ], null, 'bwd' ], [ new THREE.Line( lineGeometry, matLineRed ) ] ], Y: [ [ new THREE.Mesh( arrowGeometry, matGreen ), [ 0, 1, 0 ], null, null, 'fwd' ], [ new THREE.Mesh( arrowGeometry, matGreen ), [ 0, 1, 0 ], [ Math.PI, 0, 0 ], null, 'bwd' ], [ new THREE.Line( lineGeometry, matLineGreen ), null, [ 0, 0, Math.PI / 2 ] ] ], Z: [ [ new THREE.Mesh( arrowGeometry, matBlue ), [ 0, 0, 1 ], [ Math.PI / 2, 0, 0 ], null, 'fwd' ], [ new THREE.Mesh( arrowGeometry, matBlue ), [ 0, 0, 1 ], [ -Math.PI / 2, 0, 0 ], null, 'bwd' ], [ new THREE.Line( lineGeometry, matLineBlue ), null, [ 0, -Math.PI / 2, 0 ] ] ], XYZ: [ [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.1, 0 ), matWhiteTransperent ), [ 0, 0, 0 ], [ 0, 0, 0 ] ] ], XY: [ [ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.295, 0.295 ), matYellowTransparent ), [ 0.15, 0.15, 0 ] ], [ new THREE.Line( lineGeometry, matLineYellow ), [ 0.18, 0.3, 0 ], null, [ 0.125, 1, 1 ] ], [ new THREE.Line( lineGeometry, matLineYellow ), [ 0.3, 0.18, 0 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ] ] ], YZ: [ [ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.295, 0.295 ), matCyanTransparent ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ] ], [ new THREE.Line( lineGeometry, matLineCyan ), [ 0, 0.18, 0.3 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ] ], [ new THREE.Line( lineGeometry, matLineCyan ), [ 0, 0.3, 0.18 ], [ 0, -Math.PI / 2, 0 ], [ 0.125, 1, 1 ] ] ], XZ: [ [ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.295, 0.295 ), matMagentaTransparent ), [ 0.15, 0, 0.15 ], [ -Math.PI / 2, 0, 0 ] ], [ new THREE.Line( lineGeometry, matLineMagenta ), [ 0.18, 0, 0.3 ], null, [ 0.125, 1, 1 ] ], [ new THREE.Line( lineGeometry, matLineMagenta ), [ 0.3, 0, 0.18 ], [ 0, -Math.PI / 2, 0 ], [ 0.125, 1, 1 ] ] ] }; var pickerTranslate = { X: [ [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), matInvisible ), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ] ], Y: [ [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), matInvisible ), [ 0, 0.6, 0 ] ] ], Z: [ [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), matInvisible ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ] ], XYZ: [ [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.2, 0 ), matInvisible ) ] ], XY: [ [ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), matInvisible ), [ 0.2, 0.2, 0 ] ] ], YZ: [ [ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), matInvisible ), [ 0, 0.2, 0.2 ], [ 0, Math.PI / 2, 0 ] ] ], XZ: [ [ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), matInvisible ), [ 0.2, 0, 0.2 ], [ -Math.PI / 2, 0, 0 ] ] ] }; var gizmoRotate = { X: [ [ new THREE.Line( new CircleGeometry( 1, 0.5 ), matLineRed ) ], [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.04, 0 ), matRed ), [ 0, 0, 0.99 ], null, [ 1, 3, 1 ], 'linear' ], [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.03, 0 ), matRed ), [ 0, 0, 1 ], null, [ 4, 1, 4 ], 'radial' ], ], Y: [ [ new THREE.Line( new CircleGeometry( 1, 0.5 ), matLineGreen ), null, [ 0, 0, -Math.PI / 2 ] ], [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.04, 0 ), matGreen ), [ 0, 0, 0.99 ], null, [ 3, 1, 1 ], 'linear' ], [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.03, 0 ), matGreen ), [ 0, 0, 1 ], null, [ 1, 4, 4 ], 'radial' ], ], Z: [ [ new THREE.Line( new CircleGeometry( 1, 0.5 ), matLineBlue ), null, [ 0, Math.PI / 2, 0 ] ], [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.04, 0 ), matBlue ), [ 0.99, 0, 0 ], null, [ 1, 3, 1 ], 'linear' ], [ new THREE.Mesh( new THREE.OctahedronGeometry( 0.03, 0 ), matBlue ), [ 1, 0, 0 ], null, [ 4, 1, 4 ], 'radial' ], ], E: [ [ new THREE.Line( new CircleGeometry( 1.25, 1 ), matLineYellowTransparent ), null, [ 0, Math.PI / 2, 0 ] ], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ 1.17, 0, 0 ], [ 0, 0, -Math.PI / 2 ], [ 1, 1, 0.001 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ -1.17, 0, 0 ], [ 0, 0, Math.PI / 2 ], [ 1, 1, 0.001 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ 0, -1.17, 0 ], [ Math.PI, 0, 0 ], [ 1, 1, 0.001 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.03, 0, 0.15, 4, 1, false ), matLineYellowTransparent ), [ 0, 1.17, 0 ], [ 0, 0, 0 ], [ 1, 1, 0.001 ]], ], XYZE: [ [ new THREE.Line( new CircleGeometry( 0.99, 1 ), matLineGray ), null, [ 0, Math.PI / 2, 0 ] ] ] }; var pickerRotate = { X: [ [ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, -Math.PI / 2, -Math.PI / 2 ] ], ], Y: [ [ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ], ], Z: [ [ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], ], E: [ [ new THREE.Mesh( new THREE.TorusGeometry( 1.25, 0.1, 2, 24 ), matInvisible ) ] ], XYZE: [ [ new THREE.Mesh( new THREE.SphereGeometry( 0.7, 10, 8 ), matInvisible ) ] ] }; var gizmoScale = { X: [ [ new THREE.Mesh( scaleHandleGeometry, matRed ), [ 0.8, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new THREE.Line( lineGeometry, matLineRed ), null, null, [ 0.8, 1, 1 ] ] ], Y: [ [ new THREE.Mesh( scaleHandleGeometry, matGreen ), [ 0, 0.8, 0 ] ], [ new THREE.Line( lineGeometry, matLineGreen ), null, [ 0, 0, Math.PI / 2 ], [ 0.8, 1, 1 ] ] ], Z: [ [ new THREE.Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, 0.8 ], [ Math.PI / 2, 0, 0 ] ], [ new THREE.Line( lineGeometry, matLineBlue ), null, [ 0, -Math.PI / 2, 0 ], [ 0.8, 1, 1 ] ] ], XY: [ [ new THREE.Mesh( scaleHandleGeometry, matYellowTransparent ), [ 0.85, 0.85, 0 ], null, [ 2, 2, 0.2 ] ], [ new THREE.Line( lineGeometry, matLineYellow ), [ 0.855, 0.98, 0 ], null, [ 0.125, 1, 1 ] ], [ new THREE.Line( lineGeometry, matLineYellow ), [ 0.98, 0.855, 0 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ] ] ], YZ: [ [ new THREE.Mesh( scaleHandleGeometry, matCyanTransparent ), [ 0, 0.85, 0.85 ], null, [ 0.2, 2, 2 ] ], [ new THREE.Line( lineGeometry, matLineCyan ), [ 0, 0.855, 0.98 ], [ 0, 0, Math.PI / 2 ], [ 0.125, 1, 1 ] ], [ new THREE.Line( lineGeometry, matLineCyan ), [ 0, 0.98, 0.855 ], [ 0, -Math.PI / 2, 0 ], [ 0.125, 1, 1 ] ] ], XZ: [ [ new THREE.Mesh( scaleHandleGeometry, matMagentaTransparent ), [ 0.85, 0, 0.85 ], null, [ 2, 0.2, 2 ] ], [ new THREE.Line( lineGeometry, matLineMagenta ), [ 0.855, 0, 0.98 ], null, [ 0.125, 1, 1 ] ], [ new THREE.Line( lineGeometry, matLineMagenta ), [ 0.98, 0, 0.855 ], [ 0, -Math.PI / 2, 0 ], [ 0.125, 1, 1 ] ] ], XYZX: [ [ new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ), matWhiteTransperent ), [ 1.1, 0, 0 ] ], ], XYZY: [ [ new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ), matWhiteTransperent ), [ 0, 1.1, 0 ] ], ], XYZZ: [ [ new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ), matWhiteTransperent ), [ 0, 0, 1.1 ] ], ] }; var pickerScale = { X: [ [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.8, 4, 1, false ), matInvisible ), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ] ], Y: [ [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.8, 4, 1, false ), matInvisible ), [ 0, 0.5, 0 ] ] ], Z: [ [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.8, 4, 1, false ), matInvisible ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ] ], XY: [ [ new THREE.Mesh( scaleHandleGeometry, matInvisible ), [ 0.85, 0.85, 0 ], null, [ 3, 3, 0.2 ] ], ], YZ: [ [ new THREE.Mesh( scaleHandleGeometry, matInvisible ), [ 0, 0.85, 0.85 ], null, [ 0.2, 3, 3 ] ], ], XZ: [ [ new THREE.Mesh( scaleHandleGeometry, matInvisible ), [ 0.85, 0, 0.85 ], null, [ 3, 0.2, 3 ] ], ], XYZX: [ [ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 1.1, 0, 0 ] ], ], XYZY: [ [ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 0, 1.1, 0 ] ], ], XYZZ: [ [ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 0, 0, 1.1 ] ], ] }; var setupGizmo = function( gizmoMap ) { var gizmo = new THREE.Object3D(); for ( var name in gizmoMap ) { for ( var i = gizmoMap[ name ].length; i --; ) { var object = gizmoMap[ name ][ i ][ 0 ].clone(); var position = gizmoMap[ name ][ i ][ 1 ]; var rotation = gizmoMap[ name ][ i ][ 2 ]; var scale = gizmoMap[ name ][ i ][ 3 ]; var tag = gizmoMap[ name ][ i ][ 4 ]; object.name = name; object.tag = tag; if (position) { object.position.set(position[ 0 ], position[ 1 ], position[ 2 ]); } if (rotation) { object.rotation.set(rotation[ 0 ], rotation[ 1 ], rotation[ 2 ]); } if (scale) { object.scale.set(scale[ 0 ], scale[ 1 ], scale[ 2 ]); } object.updateMatrix(); var tempGeometry = object.geometry.clone(); tempGeometry.applyMatrix(object.matrix); object.geometry = tempGeometry; object.position.set(0, 0, 0); object.rotation.set(0, 0, 0); object.scale.set(1, 1, 1); gizmo.add(object); } } return gizmo; }; var vec1 = new THREE.Vector3( 0, 0, 0 ); var tempVector = new THREE.Vector3(); var alignVector = new THREE.Vector3( 0, 1, 0 ); var lookAtMatrix = new THREE.Matrix4(); var tempQuaternion = new THREE.Quaternion(); var tempQuaternion2 = new THREE.Quaternion(); var identityEuler = new THREE.Euler(); var unitX = new THREE.Vector3( 1, 0, 0 ); var unitY = new THREE.Vector3( 0, 1, 0 ); var unitZ = new THREE.Vector3( 0, 0, 1 ); this.gizmo = {}; this.picker = {}; this.add( this.gizmo[ "translate" ] = setupGizmo( gizmoTranslate ) ); this.add( this.gizmo[ "rotate" ] = setupGizmo( gizmoRotate ) ); this.add( this.gizmo[ "scale" ] = setupGizmo( gizmoScale ) ); this.add( this.picker[ "translate" ] = setupGizmo( pickerTranslate ) ); this.add( this.picker[ "rotate" ] = setupGizmo( pickerRotate ) ); this.add( this.picker[ "scale" ] = setupGizmo( pickerScale ) ); this.picker[ "translate" ].visible = false; this.picker[ "rotate" ].visible = false; this.picker[ "scale" ].visible = false; this.updateMatrixWorld = function () { var rotation = this.parent.space === "local" ? this.parent._worldRotation : identityEuler; var eye = this.parent._eye var mode = this.parent.mode; var axis = this.parent.axis; this.gizmo[ "translate" ].visible = mode === "translate"; this.gizmo[ "rotate" ].visible = mode === "rotate"; this.gizmo[ "scale" ].visible = mode === "scale"; this.picker[ "translate" ].visible = false; // mode === "translate"; this.picker[ "rotate" ].visible = false; // mode === "rotate"; this.picker[ "scale" ].visible = false; // mode === "scale"; var handles = []; handles = handles.concat( this.picker[ mode ].children ); handles = handles.concat( this.gizmo[ mode ].children ); for ( var i = 0; i < handles.length; i++ ) { var handle = handles[i]; // hide aligned to camera handle.visible = true; handle.scale.set( 1, 1, 1 ); handle.position.set( 0, 0, 0 ); handle.rotation.set( 0, 0, 0 ); if ( mode === 'translate' || mode === 'scale' ) { // Hide translate and scale axis facing the camera if ( handle.name === 'X' || handle.name === 'XYZX' ) { if ( Math.abs( alignVector.set( 1, 0, 0 ).applyEuler( rotation ).dot( eye ) ) > 0.99 ) { handle.scale.set( 1e-3, 1e-3, 1e-3 ); handle.visible = false; } } if ( handle.name === 'Y' || handle.name === 'XYZY' ) { if ( Math.abs( alignVector.set( 0, 1, 0 ).applyEuler( rotation ).dot( eye ) ) > 0.99 ) { handle.scale.set( 1e-3, 1e-3, 1e-3 ); handle.visible = false; } } if ( handle.name === 'Z' || handle.name === 'XYZZ' ) { if ( Math.abs( alignVector.set( 0, 0, 1 ).applyEuler( rotation ).dot( eye ) ) > 0.99 ) { handle.scale.set( 1e-3, 1e-3, 1e-3 ); handle.visible = false; } } if ( handle.name === 'XY' ) { if ( Math.abs( alignVector.set( 0, 0, 1 ).applyEuler( rotation ).dot( eye ) ) < 0.2 ) { handle.scale.set( 1e-3, 1e-3, 1e-3 ); handle.visible = false; } } if ( handle.name === 'YZ' ) { if ( Math.abs( alignVector.set( 1, 0, 0 ).applyEuler( rotation ).dot( eye ) ) < 0.2 ) { handle.scale.set( 1e-3, 1e-3, 1e-3 ); handle.visible = false; } } if ( handle.name === 'XZ' ) { if ( Math.abs( alignVector.set( 0, 1, 0 ).applyEuler( rotation ).dot( eye ) ) < 0.2 ) { handle.scale.set( 1e-3, 1e-3, 1e-3 ); handle.visible = false; } } // Flip translate and scale axis ocluded behind another axis if ( handle.name.search( 'X' ) !== -1 ) { if ( alignVector.set( 1, 0, 0 ).applyEuler( rotation ).dot( eye ) < -0.4 ) { 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.set( 0, 1, 0 ).applyEuler( rotation ).dot( eye ) < -0.4 ) { 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.set( 0, 0, 1 ).applyEuler( rotation ).dot( eye ) < -0.4 ) { if ( handle.tag === 'fwd' ) { handle.visible = false; } else { handle.scale.z = -1; } } else if ( handle.tag === 'bwd' ) { handle.visible = false; } } // Align handles to current local or world rotation handle.quaternion.setFromEuler( rotation ); } else if (mode === 'rotate') { // switch between liner/radial rotation handle affordances if ( handle.name === 'X' ) { if ( Math.abs( alignVector.set( 1, 0, 0 ).applyEuler( rotation ).dot( eye ) ) > 0.3 ) { if ( handle.tag === 'linear' ) { handle.visible = false; } } else if ( handle.tag === 'radial' ) { handle.visible = false; } } if ( handle.name === 'Y' ) { if ( Math.abs( alignVector.set( 0, 1, 0 ).applyEuler( rotation ).dot( eye ) ) > 0.3 ) { if ( handle.tag === 'linear' ) { handle.visible = false; } } else if ( handle.tag === 'radial' ) { handle.visible = false; } } if ( handle.name === 'Z' ) { if ( Math.abs( alignVector.set( 0, 0, 1 ).applyEuler( rotation ).dot( eye ) ) > 0.3 ) { if ( handle.tag === 'linear' ) { handle.visible = false; } } else if ( handle.tag === 'radial' ) { handle.visible = false; } } // Align handles to current local or world rotation tempQuaternion2.setFromEuler( rotation ); alignVector.copy( eye ).applyQuaternion( tempQuaternion.setFromEuler( rotation ).inverse()); if ( handle.name.search( "E" ) !== - 1 ) { alignVector.set( 0, 1, 0 ); handle.quaternion.setFromRotationMatrix( lookAtMatrix.lookAt( eye, vec1, alignVector ) ); } if ( handle.name === 'X' ) { tempQuaternion.setFromAxisAngle( unitX, Math.atan2( -alignVector.y, alignVector.z ) ); tempQuaternion.multiplyQuaternions( tempQuaternion2, tempQuaternion ); handle.quaternion.copy( tempQuaternion ); } if ( handle.name === 'Y' ) { tempQuaternion.setFromAxisAngle( unitY, Math.atan2( alignVector.x, alignVector.z ) ); tempQuaternion.multiplyQuaternions( tempQuaternion2, tempQuaternion ); handle.quaternion.copy( tempQuaternion ); } if ( handle.name === 'Z' ) { tempQuaternion.setFromAxisAngle( unitZ, Math.atan2( alignVector.y, alignVector.x ) ); tempQuaternion.multiplyQuaternions( tempQuaternion2, tempQuaternion ); handle.quaternion.copy( tempQuaternion ); } } // highlight selected axis handle.material._opacity = handle.material._opacity || handle.material.opacity; handle.material._color = handle.material._color || handle.material.color.clone(); handle.material.color.copy( handle.material._color ); handle.material.opacity = handle.material._opacity; if ( axis ) { if ( handle.name === axis ) { handle.material.opacity *= 2.0; handle.material.color.lerp( new THREE.Color( 1, 1, 1 ), 0.5 ); } else if ( axis.split('').some( function( a ) { return handle.name === a; } ) ) { handle.material.opacity *= 2.0; handle.material.color.lerp( new THREE.Color( 1, 1, 1 ), 0.5 ); } else { handle.material.opacity *= 0.15; } } } THREE.Object3D.prototype.updateMatrixWorld.call( this ); }; this.setMode = function() { console.warn( 'THREE.TransformControlsGizmo: setMode function has been depricated.' ); }; }; THREE.TransformControlsGizmo.prototype = Object.assign( Object.create( THREE.Object3D.prototype ), { constructor: THREE.TransformControlsGizmo, isTransformControlsGizmo: true } );