mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
102.77k stars 35.38k forks source link

Three.js Css3DRenderer Mobile Browser Issue - HTML elements does not take absolute position on moving camera in 360 view #15089

Closed ghost closed 6 years ago

ghost commented 6 years ago
Description of the problem

CSS3dRenderer HTML elements moves with camera in mobile devices. ios (version - 12.0.1) safari browser in portrait mode & chrome (v- 69.0.3497.105) in landscape mode

Check this link on phone :

CSS3dRenderer file - https://codepen.io/sourcecodelabs/pen/wYjyer

//rendering code
//CSS3D Scene
this.scene2 = new this.THREE.Scene();

//CSS3D Renderer
this.renderer2 = new this.CSS3DObject.CSS3DRenderer();

//HTML
 var element  = document.createElement('div');
 element.setAttribute('data-hotspot',id);
 element.className = "pulsating-circle";

var element1  = document.createElement('div');
element1.className = "link-hotspot-tooltip noselect";
element1.innerHTML = title;

element.appendChild(element1);

var div        = new this.CSS3DObject.CSS3DObject(element);
div.position.x = posX;
div.position.y = posY;
div.position.z = posZ;

div.rotation.x = 0;
div.rotation.y = 0;
div.rotation.z = 0;

div.lookAt( new this.THREE.Vector3( 0, 0, 0) ); //to face camera target
this.scene2.add(div);

//CSS3D Renderer
this.renderer2 = new this.CSS3DObject.CSS3DRenderer();

 this.renderer2.setSize(window.innerWidth, window.innerHeight);
this.renderer2.domElement.style.position = 'absolute';
this.renderer2.domElement.style.top = 0;
document.body.appendChild(this.renderer2.domElement);
this.renderer2.render( this.scene2, this.camera );
Three.js version

Three.js version - R87

Browser

Doesn't work in phone browser like

OS
WestLangley commented 6 years ago

Sorry, this is not a help site. You can use the three.js forum if you want, but you will have to update to the latest three.js version, and provide a simple example to demonstrate the issue.