{"action":"closed","issue":{"url":"https://api.github.com/repos/Izzimach/react-three/issues/50","labels_url":"https://api.github.com/repos/Izzimach/react-three/issues/50/labels{/name}","comments_url":"https://api.github.com/repos/Izzimach/react-three/issues/50/comments","events_url":"https://api.github.com/repos/Izzimach/react-three/issues/50/events","html_url":"https://github.com/Izzimach/react-three/issues/50","id":110937371,"number":50,"title":"Limit orbit controls to the rendered canvas","user":{"login":"jonaskello","id":664076,"avatar_url":"https://avatars.githubusercontent.com/u/664076?v=3","gravatar_id":"","url":"https://api.github.com/users/jonaskello","html_url":"https://github.com/jonaskello","followers_url":"https://api.github.com/users/jonaskello/followers","following_url":"https://api.github.com/users/jonaskello/following{/other_user}","gists_url":"https://api.github.com/users/jonaskello/gists{/gist_id}","starred_url":"https://api.github.com/users/jonaskello/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonaskello/subscriptions","organizations_url":"https://api.github.com/users/jonaskello/orgs","repos_url":"https://api.github.com/users/jonaskello/repos","events_url":"https://api.github.com/users/jonaskello/events{/privacy}","received_events_url":"https://api.github.com/users/jonaskello/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-10-12T09:17:50Z","updated_at":"2015-11-19T17:13:21Z","closed_at":"2015-11-19T17:13:21Z","body":"I have a scenario where we have a 3D scene embedded into a larger react app. The problem I am seeing is that orbit controls will take input from the whole document rather than just the 3D scene canvas. Eg. text inputs that are placed at the side of the 3D scene does only respond to orbit controls.\r\n\r\nThe function for OrbitControls looks like it takes a DOM element that will limtit what it takes input from:\r\n\r\n\tTHREE.OrbitControls = function ( object, domElement ) {\r\n\r\n\t\tthis.object = object;\r\n\t\tthis.domElement = ( domElement !== undefined ) ? domElement : document;\r\n\t\t// other code ...\r\n\t}\r\n\r\nHowever in react-three the canvas is not passed in as domElement, so it defaults to the whole document as per the code above. Currently THREEScene.js looks like this:\r\n\r\n    componentDidMount() {\r\n        var renderelement = ReactDOM.findDOMNode(this);\r\n\t\t// other code ....\r\n\t\tthis.mountOrbitControls(props);\r\n\t}\r\nIf we could change it to something like this maybe the orbit controls would be limited to the scene canvas:\r\n\r\n    componentDidMount() {\r\n        var renderelement = ReactDOM.findDOMNode(this);\r\n\t\t// other code ....\r\n\t\tthis.mountOrbitControls(props, renderelement);\r\n\t}\r\n\r\n    mountOrbitControls(props, renderelement) {\r\n        if (props.orbitControls) {\r\n            if (!this.orbitControls) {\r\n                this.orbitControls = new props.orbitControls(this._THREEcamera, renderelement);\r\n            }\r\n        }\r\n    }\r\n\r\nOr is there some other way to limit the orbit controls to only take input from the 3D scene and not the surrounding parts of the document?"}}