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: (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.

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/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.

• javascript
• css
• three.js
• textselection

• It's not clear what you are asking. What text are you trying to select? – Matthew Cooley Commented Feb 12, 2014 at 15:21
• Hi, i edited, i want user can select and copy any text on my project – Ben Mack Commented Feb 13, 2014 at 2:50
• Do you mean the html-text or any html text or what are you talking about? 3D Text geometry in your scene? – GuyGood Commented Feb 13, 2014 at 12:21

2 Answers 2

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.

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