{"action":"created","issue":{"url":"https://api.github.com/repos/mrdoob/three.js/issues/15089","repository_url":"https://api.github.com/repos/mrdoob/three.js","labels_url":"https://api.github.com/repos/mrdoob/three.js/issues/15089/labels{/name}","comments_url":"https://api.github.com/repos/mrdoob/three.js/issues/15089/comments","events_url":"https://api.github.com/repos/mrdoob/three.js/issues/15089/events","html_url":"https://github.com/mrdoob/three.js/issues/15089","id":371889529,"node_id":"MDU6SXNzdWUzNzE4ODk1Mjk=","number":15089,"title":"Three.js Css3DRenderer Mobile Browser Issue - HTML elements does not take absolute position on moving camera in 360 view","user":{"login":"Shweta-SourceCodeLabs","id":44287244,"node_id":"MDQ6VXNlcjQ0Mjg3MjQ0","avatar_url":"https://avatars2.githubusercontent.com/u/44287244?v=4","gravatar_id":"","url":"https://api.github.com/users/Shweta-SourceCodeLabs","html_url":"https://github.com/Shweta-SourceCodeLabs","followers_url":"https://api.github.com/users/Shweta-SourceCodeLabs/followers","following_url":"https://api.github.com/users/Shweta-SourceCodeLabs/following{/other_user}","gists_url":"https://api.github.com/users/Shweta-SourceCodeLabs/gists{/gist_id}","starred_url":"https://api.github.com/users/Shweta-SourceCodeLabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Shweta-SourceCodeLabs/subscriptions","organizations_url":"https://api.github.com/users/Shweta-SourceCodeLabs/orgs","repos_url":"https://api.github.com/users/Shweta-SourceCodeLabs/repos","events_url":"https://api.github.com/users/Shweta-SourceCodeLabs/events{/privacy}","received_events_url":"https://api.github.com/users/Shweta-SourceCodeLabs/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-19T10:01:41Z","updated_at":"2018-10-19T14:54:29Z","closed_at":"2018-10-19T14:54:29Z","author_association":"NONE","body":"##### Description of the problem\r\n\r\nCSS3dRenderer HTML elements moves with camera in **mobile devices**. \r\nios (version - 12.0.1) safari browser in portrait mode & chrome (v- 69.0.3497.105) in landscape mode \r\n\r\n**Check this link on phone** :  https://dev.viewplex.io/tours/ss/41\r\n\r\nCSS3dRenderer file - https://codepen.io/sourcecodelabs/pen/wYjyer\r\n\r\n//rendering code\r\n//CSS3D Scene\r\nthis.scene2 = new this.THREE.Scene();\r\n\r\n//CSS3D Renderer\r\nthis.renderer2 = new this.CSS3DObject.CSS3DRenderer();\r\n\r\n//HTML\r\n var element  = document.createElement('div');\r\n element.setAttribute('data-hotspot',id);\r\n element.className = \"pulsating-circle\";\r\n\r\nvar element1  = document.createElement('div');\r\nelement1.className = \"link-hotspot-tooltip noselect\";\r\nelement1.innerHTML = title;\r\n    \r\nelement.appendChild(element1);\r\n\r\nvar div        = new this.CSS3DObject.CSS3DObject(element);\r\ndiv.position.x = posX;\r\ndiv.position.y = posY;\r\ndiv.position.z = posZ;\r\n\r\ndiv.rotation.x = 0;\r\ndiv.rotation.y = 0;\r\ndiv.rotation.z = 0;\r\n\r\ndiv.lookAt( new this.THREE.Vector3( 0, 0, 0) ); //to face camera target\r\nthis.scene2.add(div);\r\n\r\n//CSS3D Renderer\r\nthis.renderer2 = new this.CSS3DObject.CSS3DRenderer();\r\n        \r\n this.renderer2.setSize(window.innerWidth, window.innerHeight);\r\nthis.renderer2.domElement.style.position = 'absolute';\r\nthis.renderer2.domElement.style.top = 0;\r\ndocument.body.appendChild(this.renderer2.domElement);\r\nthis.renderer2.render( this.scene2, this.camera );\r\n\r\n##### Three.js version\r\n\r\nThree.js version - R87\r\n\r\n##### Browser\r\n\r\nDoesn't work in phone browser like \r\n\r\n- Chrome latest version - 69.0.3497.105 \r\n- Safari \r\n\r\n##### OS\r\n\r\n-  iOS - version 12.0.1"},"comment":{"url":"https://api.github.com/repos/mrdoob/three.js/issues/comments/431390890","html_url":"https://github.com/mrdoob/three.js/issues/15089#issuecomment-431390890","issue_url":"https://api.github.com/repos/mrdoob/three.js/issues/15089","id":431390890,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMTM5MDg5MA==","user":{"login":"WestLangley","id":1000017,"node_id":"MDQ6VXNlcjEwMDAwMTc=","avatar_url":"https://avatars2.githubusercontent.com/u/1000017?v=4","gravatar_id":"","url":"https://api.github.com/users/WestLangley","html_url":"https://github.com/WestLangley","followers_url":"https://api.github.com/users/WestLangley/followers","following_url":"https://api.github.com/users/WestLangley/following{/other_user}","gists_url":"https://api.github.com/users/WestLangley/gists{/gist_id}","starred_url":"https://api.github.com/users/WestLangley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/WestLangley/subscriptions","organizations_url":"https://api.github.com/users/WestLangley/orgs","repos_url":"https://api.github.com/users/WestLangley/repos","events_url":"https://api.github.com/users/WestLangley/events{/privacy}","received_events_url":"https://api.github.com/users/WestLangley/received_events","type":"User","site_admin":false},"created_at":"2018-10-19T14:54:29Z","updated_at":"2018-10-19T14:54:29Z","author_association":"COLLABORATOR","body":"Sorry, this is not a help site. You can use the [three.js forum](http://discourse.threejs.org) if you want, but you will have to update to the latest three.js version, and provide a simple example to demonstrate the issue."}}
{"actor":{"display_login":"WestLangley"}}