如何解决使用百分比时混合使用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/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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。