时间戳

首页 > 解决方案 > 使用百分比时混合使用 WebGL 和 CSS3D 渲染器

three.js - 使用百分比时混合使用 WebGL 和 CSS3D 渲染器

问题描述

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

以下是发生的事情的记录： 换层

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

标签： three.jscss-transformspercentage

解决方案

我没有看到任何变化。也许我只是不知道如何回购这个问题。你能发布一个回购吗？

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/three@0.120.0/build/three.module.js';

import {
  TrackballControls
} from 'https://cdn.jsdelivr.net/npm/three@0.120.0/examples/jsm/controls/TrackballControls.js';
import {
  CSS3DRenderer,
  CSS3DObject
} from 'https://cdn.jsdelivr.net/npm/three@0.120.0/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, y, 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, x, y, z, ry) {
  group.add(new Element(url, x, y, z, ry));
  const material = new THREE.MeshBasicMaterial({
    color,
    transparent: true,
    opacity: 0.5,
  });
  const mesh = new THREE.Mesh(plane, material);
  mesh.position.set(x, y, z);
  mesh.rotation.y = ry;
  group.add(mesh);
}

[
 ['red',   'https://twgljs.org/examples/tiny.html', 0, 0, 240, 0],
 ['green', 'https://twgljs.org/examples/2d-lines.html', 240, 0, 0, Math.PI / 2],
 ['blue', 'https://twgljs.org/examples/kaleidoscope.html', 0, 0, -240, Math.PI],
 ['yellow', 'https://twgljs.org/examples/twgl-cube.html', -240, 0, 0, -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, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

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

推荐阅读