Cannot select text with OrbitControls?

Question

I'm making a Three.js project with OrbitControls.js but i realize that i cannot select (highlight) any text with OrbitControls.

Here the example link: http://threejs.org/examples/#misc_controls_orbit (try select text "orbit control example" on the top of example, we can't do that)

So, How to select (highlight) text with OrbitControl?

(or i have to disable control everytime i want to copy text ?)

Thanks.

Answer 1

By default, OrbitControls listens to mouse events on document, and this is why you cannot use the mouse in the same page for other purposes such as selecting text or opening the context menu. You can change this behavior by specifying a DOM node as the second argument to constructor THREE.OrbitControls. Then OrbitControls listens to mouse events on this DOM node instead of the whole document.

If you have the code like

var renderer = …;
container.appendChild(renderer.domElement);
…
var controls = new THREE.OrbitControls(camera);

then replace the last line with

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

In the case of the example you mentioned, you can move the initialization of controls:

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );

after the initialization of renderer, and add renderer.domElement as the second argument to the constructor THREE.OrbitControls. Now you can select the text on the page.

Answer 2

Create the input:

var identidad = document.createElement( 'INPUT' );

Extend the click event by giving the focus to this element:

identidad.addEventListener( 'click', function ( event ) {
    $(this).focus();
});