使用百分比时混合使用WebGL和CSS3D渲染器

问题描述

当混合使用WebGL和CSS3D渲染器时，调整页面大小时CSS3D层会移位。我花了一段时间才意识到我正在使用百分比来设置WebGL画布，这似乎是问题的根源。当计算的大小（通过百分比计算）为整数时，这两个元素完全对齐，而当计算的大小引入小数时，这两个元素会移位。

以下是发生的情况的记录：

我可以简单地摆脱百分比，而使用整数，但是我想知道是否有更好的解决方案？

解决方法

我没有看到任何变化。也许我只是不知道该如何处理该问题。您可以发布回购吗？

html,body {
  margin: 0;
  height: 100%;
}
#css3d {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#webgl,#blocker {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

<div id="css3d"></div>
<canvas id="webgl"></canvas>
<div id="blocker"></div>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

import {
  TrackballControls
} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/TrackballControls.js';
import {
  CSS3DRenderer,CSS3DObject
} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/renderers/CSS3DRenderer.js';

function Element(url,x,y,z,ry) {
  const div = document.createElement('div');
  div.style.width = '480px';
  div.style.height = '360px';
  div.style.backgroundColor = '#000';

  const iframe = document.createElement('iframe');
  iframe.style.width = '480px';
  iframe.style.height = '360px';
  iframe.style.border = '0px';
  iframe.src = url;
  div.appendChild(iframe);

  const object = new CSS3DObject(div);
  object.position.set(x,z);
  object.rotation.y = ry;

  return object;
}

const css3DContainer = document.querySelector('#css3d');
const css3DRenderer = new CSS3DRenderer();
css3DContainer.appendChild(css3DRenderer.domElement);

const webglCanvas = document.querySelector('#webgl')
const webglRenderer = new THREE.WebGLRenderer({
  canvas: webglCanvas,alpha: true,});

const camera = new THREE.PerspectiveCamera(50,2,1,5000);
camera.position.set(500,350,750);

const scene = new THREE.Scene();

const plane = new THREE.PlaneGeometry(480,360);

const group = new THREE.Group();

function addElementAndPlane(color,url,ry) {
  group.add(new Element(url,ry));
  const material = new THREE.MeshBasicMaterial({
    color,transparent: true,opacity: 0.5,});
  const mesh = new THREE.Mesh(plane,material);
  mesh.position.set(x,z);
  mesh.rotation.y = ry;
  group.add(mesh);
}

[
 ['red','https://twgljs.org/examples/tiny.html',240,0],['green','https://twgljs.org/examples/2d-lines.html',Math.PI / 2],['blue','https://twgljs.org/examples/kaleidoscope.html',-240,Math.PI],['yellow','https://twgljs.org/examples/twgl-cube.html',-Math.PI / 2],].forEach(args => addElementAndPlane(...args));
scene.add(group);

const controls = new TrackballControls(camera,webglCanvas);
controls.rotateSpeed = 4;

window.addEventListener('resize',onWindowResize,false);
onWindowResize();

// Block iframe events when dragging camera

const blocker = document.querySelector('#blocker');
blocker.style.display = 'none';

controls.addEventListener('start',function() {
  blocker.style.display = '';
});
controls.addEventListener('end',function() {
  blocker.style.display = 'none';
});

function onWindowResize() {
  const width = webglCanvas.clientWidth;
  const height = webglCanvas.clientHeight;
  if (webglCanvas.width !== width || webglCanvas.height !== height) {
    webglRenderer.setSize(width,height,false);
    css3DRenderer.setSize(width,false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

function animate() {
  controls.update();
  css3DRenderer.render(scene,camera);
  webglRenderer.render(scene,camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>