Three.JS - conflict Camera control with a text field in the scene

Question

Could you take a look at the following link.

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

I have a problem with camera controls and textbox. I cannot change the value of a text field when using controls. When I delete the control lines, the text box is edited.

Could you check it out. Thank you very much

Answer 1

Try the following:

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

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

(Obviously, you will also have to reorder some of your codes.)

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 ); 

Answer 2

Click and key events do not fall into the text field. You can remove the following lines in the "control" code:

 event.preventDefault(); event.stopPropagation();