Threejs switch from Orbit control to Transform control

Question

I am trying to switch between these controls when I add a new object to the scene. If I set either up in init() it works fine, either orbit or transform on an object to scale,rotate, position.

But say I start with orbit, what I want to happen, is when I load a new object, that it switches to transform control on that mesh. Then I want to be able to assign a button to toggle from orbit to transform.

So far no luck finding a solution, hopefully someone here can...

here is a link to a test page

http://www.vma-3d.com/transformtest.html

It creates a scene and adds a red floor, when it loads the obit control is set, when you click the "Add Object" link it loads an object and the transform controls appear, but as soon as you try to move it, it simply disappears.

This has been driving me nuts and I'm sure its something simple I'm missing ( I hope) any help out there?

here is sample code I am using

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/threejs/THREE.min.js" type="text/javascript"></script> 
<script src="js/threejs/TransformControls.js"></script>
<script src="js/threejs/OrbitControls.js"></script>

<div id='FullPage'> 
    <a href='Javascript:AddObject()'>Add Object</a>
    <div id='MainCanvas'></div>
</div>       

<script> 
 var camera, scene, renderer,floor,control;
 var VMA_Objects = [];

 function init()
 {
    // SCENE
    scene = new THREE.Scene();

    // CAMERA
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 20000);
    scene.add(camera);
    camera.position.set(-2.8,14,426);
    camera.rotation.set(0,0,0);
    camera.lookAt(scene.position);  

    renderer = new THREE.WebGLRenderer( {antialias:true,alpha: true,preserveDrawingBuffer: true } );
    renderer.setSize(window.innerWidth,window.innerHeight);

    Container = document.getElementById( 'MainCanvas' );
    Container.appendChild( renderer.domElement );

    control = new THREE.OrbitControls( camera,renderer.domElement);


    floorMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
    floorGeometry = new THREE.PlaneGeometry(5000,5000, 1, 1);
    floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.rotation.x = Math.PI / 2;
    floor.position.y = -0.5;
    scene.add(floor);
}

function animate() 
{     

    requestAnimationFrame( animate );
    render();       

}


function render() 
{
    control.update();  
    renderer.render( scene, camera );
}

init();

animate();


function AddObject()
{ 

    var num=1;
    var Object_Position = "0,90,0";
    var Object_Rotation= "0,0,0";
    var Object_Scale = "1,1,1";
    Object_Width =320; 
    Object_Height = 180;

    var Object_Material = new THREE.MeshBasicMaterial( {color: 0x0000ff, side: THREE.DoubleSide } );
    var Object_Geometry = new THREE.PlaneGeometry(Object_Width,Object_Height, 1, 1);


    Object_Material.needsUpdate = true;
    VMA_Objects[num] = new THREE.Mesh(Object_Geometry, Object_Material);


    var NewObject_Position = Object_Position.split(",");
    var NewObject_Rotation= Object_Rotation.split(",");
    var NewObject_Scale = Object_Scale.split(",");
    VMA_Objects[num].position.set(NewObject_Position[0],NewObject_Position[1],NewObject_Position[2]);
    VMA_Objects[num].rotation.set(NewObject_Rotation[0],NewObject_Rotation[1],NewObject_Rotation[2]);
    VMA_Objects[num].scale.set(NewObject_Scale[0],NewObject_Scale[1],NewObject_Scale[2]);
    scene.add(VMA_Objects[num]);

    control.enabled=false;      

    control = new THREE.TransformControls( camera, renderer.domElement ); 
    control.attach(VMA_Objects[num] );  
    control.attach(VMA_Objects[num] );
    scene.add( control);
}

</script>

</body>
</html>

This question is someway related http://stackoverflow.com/questions/11304998/switch-threejs-controls-from-trackball-to-flycontrols-and-vice-versa?rq=1 You should change this solution with camera controls that you prefer — danjok, May 20 '14 at 22:28
I did try that before and while it works with those two it does not seem to work with the transform as that is attached to a mesh — MrBodean, May 21 '14 at 00:05

Threejs switch from Orbit control to Transform control

0 Answers0