CODEWITHSUNDEEP
javascriptcssgoogle-chromethree.js
Radio
Radio

Reputation: 2853

Threejs, CSS3Renderer, mixed renderer sizing and panning issue

This issue is happening in Chrome only.

Here's what I have tried:

I am using the webGL renderer to place a plane geometry in the 3d environment using threejs. This code runs inside a class with the scene as a member of the class:

var planeMaterial   = new THREE.MeshBasicMaterial({color: 0x000000, transparent:true, opacity:0.5, side: THREE.DoubleSide });
var planeWidth = 1080;
var planeHeight = planeWidth;
var planeGeometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
var planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
this.scene.add(planeMesh);

this works as expected. Nothing out of the ordinary.

I include the CSS3DRenderer.js and add an iframe element.

The class contains a separate scene to hold HTML elements:

// create a new scene to hold CSS
this.cssScene = new THREE.Scene();

I create an element to use within the CSS scene:

//create the iframe to contain the html
var element = document.createElement('img');
element.src = "http://cdn.freshome.com/wp-content/uploads/2013/11/color-wheel.jpg";
var elementWidth = planeHeight;
//Use the planeMesh size
element.style.width  = planeWidth + "px";
element.style.height = planeHeight + "px";
//give it a z-index so we can place it behind our webGL canvas element
element.style.zIndex = "1";

I then create the CSS3DObject to place the element

var cssObject = new THREE.CSS3DObject( element );

position and rotation is matched to the planeMesh and added to the scene with render options:

cssObject.position = planeMesh.position;
cssObject.rotation = planeMesh.rotation;
this.cssScene.add(cssObject);
this.rendererCSS = new THREE.CSS3DRenderer();

this.rendererCSS.setSize( (window.innerWidth), window.innerHeight);
this.rendererCSS.domElement.style.position = 'absolute';
this.rendererCSS.domElement.style.zIndex = 1;
this.rendererCSS.domElement.style.top = 0;
this.rendererCSS.domElement.style.left = 0;
this.rendererCSS.domElement.style.margin = 0;
this.rendererCSS.domElement.style.padding = 0;
this.container.appendChild(this.rendererCSS.domElement);

The result

In Firefox it's fine, Chrome it's not.

The size difference also affects panning of the camera, which causes the CSS3DObject to move away from the planeMesh in Chrome only. Firefox can pan both renderers, webGL and CSS, perfectly in sync.

Here is a screenshot showing the size discrepancy in Chrome, applying a wireframe to the planeMesh, you can see Chrome isn't filling the same space. I've worked out the discrepancy to be approximately 12-13% to small.

Chrome and Firefox css 3d rendering difference

The Question: Is there some unit of measurement I need to apply to Chrome to use for rendering 3d in the same space as webGL?

Upvotes: 0

Views: 940

Answers (1)

WestLangley
WestLangley

Reputation: 104783

If you are using THREE.CSS3DRenderer, and you are having scaling problems, make sure your webpage is not zoomed.

three.js r.71

Upvotes: 1

Related Questions