Three.JS -- conflict Camera controls with a textbox in a scene

Question

Could you please have a look at the following link.

https://dl.dropbox.com/u/44791710/rotate/rotate.html

I have a problem with camera controls and a textbox. I cannot change the value of the textbox when I use controls. When I remove control lines, the textbox is editable.

Would you please check it. Many Thanks

Answer 1

Try this:

controls = new THREE.TrackballControls( camera, renderer.domElement );

The second argument defaults to document, which I expect is the problem.

(You'll obviously have to change the order of some of your code, too.)

EDIT: For reference, you can also use this construct:

// container
container = document.createElement( 'div' );
document.body.appendChild( container );

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

//controls
controls = new THREE.TrackballControls( camera, container );