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

Question

此问题仅在Chrome中发生。

以下是我的尝试：

我使用webGL渲染器使用threejs在3d环境中放置平面几何体。此代码在类中运行，其中场景作为类的成员：

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

位置和旋转与planeMesh匹配，并使用渲染选项添加到场景中：

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