Threejs，CSS3Renderer，混合渲染器大小和平移问题

Question

此问题仅在 Chrome 中发生。

这是我尝试过的：

我正在使用 webGL 渲染器在 3d 环境中使用threejs 放置平面几何图形。这段代码在一个类中运行，场景是该类的成员：

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

这按预期工作。没什么特别的。

我包含了CSS3DRenderer.js 并添加了一个 iframe 元素。

该类包含一个单独的场景来保存 HTML 元素：

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

我创建了一个在 CSS 场景中使用的元素：

//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";

然后我创建 CSS3DObject 来放置元素

var cssObject = new THREE.CSS3DObject( element );

位置和旋转与平面网格相匹配，并通过渲染选项添加到场景中：

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

结果

在 Firefox 中很好，在 Chrome 中则不行。

尺寸差异也会影响相机的平移，这会导致 CSS3DObject 仅在 Chrome 中远离 planeMesh。 Firefox 可以完美同步地平移渲染器、webGL 和 CSS。

这是显示 Chrome 中大小差异的屏幕截图，将线框应用于 planeMesh，您可以看到 Chrome 没有填充相同的空间。我计算出的差异大约为 12-13%。

问题： 是否需要对 Chrome 应用某种度量单位才能在与 webGL 相同的空间中渲染 3d？

Answer 1

如果您使用THREE.CSS3DRenderer，并且遇到缩放问题，请确保您的网页未缩放。

three.js r.71