gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:34:32 25 4
gpt4 key购买 nike

此问题仅在 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 and Firefox css 3d rendering difference

问题: 是否需要将某种测量单位应用于 Chrome 以用于在与 webGL 相同的空间中渲染 3d?

最佳答案

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

three.js r.71

关于javascript - Threejs、CSS3Renderer、混合渲染器大小调整和平移问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31837505/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com