I've been working with the TransformControls package (you can find it here: https://github.com/lucascassiano/three-transform-controls). While the transform controls appear to be functioning mostly fine, they are causing two major issues in my application:
1) The mode doesn't change to rotation/scaling/etc. When called, it gives an error stating: "Uncaught TypeError: Cannot read property 'setMode' of undefined".
2) A strange tangle of red lines appears on my screen along with the gizmos (please refer to the attached screenshot). both problems captured in one picture
It seems that the problem lies within the scope of the variables, but I am having trouble pinpointing it.
export default {
name: 'ThreeTest',
data() {
return {
mouse: new THREE.Vector2(),
rayCaster: new THREE.Raycaster(),
spheres: [],
objects: [],
intersectsPoi: null,
transformControls: null
};
},
methods: {
init() {
this.transformControls = new TransformControls(this.camera, this.renderer.domElement );
// EVENT LISTENERS:
map.addEventListener('mousedown', this.transformPoi, false);
this.transformControls.addEventListener( 'change', this.render );
this.transformControls.addEventListener( 'dragging-changed', function ( event ) {
this.controls.enabled = ! event.value;
} );
window.addEventListener( 'keydown', function ( event ) {
switch ( event.keyCode ) {
case 81: // Q
this.transformControls.setSpace( this.transformControls.space === "local" ? "world" : "local" );
break;
case 17: // Ctrl
this.transformControls.setTranslationSnap( 100 );
this.transformControls.setRotationSnap( THREE.Math.degToRad( 15 ) );
break;
case 87: // W
this.transformControls.setMode( "translate" );
break;
case 69: // E
this.transformControls.setMode( "rotate" );
break;
case 82: // R
this.transformControls.setMode( "scale" );
break;
case 187:
case 107: // +, =, num+
this.transformControls.setSize( this.transformControls.size + 0.1 );
break;
case 189:
case 109: // -, _, num-
this.transformControls.setSize( Math.max( this.transformControls.size - 0.1, 0.1 ) );
break;
case 88: // X
this.transformControls.showX = ! this.transformControls.showX;
break;
case 89: // Y
this.transformControls.showY = ! this.transformControls.showY;
break;
case 90: // Z
this.transformControls.showZ = ! this.transformControls.showZ;
break;
case 32: // Spacebar
this.transformControls.enabled = ! this.transformControls.enabled;
break;
}
} );
},
// HELPER FUNCTIONS:
mouseOverScene (event) {
event.preventDefault();
let rect = event.target.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
this.mouse.x = ( x / this.mapWidth) * 2 - 1;
this.mouse.y = - ( y / this.mapHeight ) * 2 + 1;
this.rayCaster.setFromCamera(this.mouse, this.camera);
},
transformPoi (event) {
console.log('I am in');
if (event) {
this.mouseOverScene(event);
};
let intersectsPoi = this.intersectsPoi;
intersectsPoi = this.rayCaster.intersectObjects(this.spheres);
console.log(intersectsPoi);
let selected;
if (intersectsPoi.length > 0 ) {
selected = intersectsPoi[0].object;
console.log(`The intersected is ${selected}`);
this.transformControls.attach( selected );
this.scene.add(this.transformControls);
} else {
this.transformControls.detach( selected );
this.scene.remove(this.transformControls);
};
},
}
EXPECTED RESULT: The modes of the transformControls should change upon pressing the associated keys.
ACTUAL RESULT: Unfortunately, it doesn't work as expected :(