ThreeJS渲染器更改父级大小
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ThreeJS渲染器更改父级大小相关的知识,希望对你有一定的参考价值。
我试图在表格中显示一个固定的550 x 500容器来显示一个3D对象,但出于某种原因,当我调用container.appendChild(renderer.domElement);
时,我的父容器将其大小更改为590 x 501,有关如何解决此问题的任何想法?
html:
<table>
<tbody>
<tr>
<td>
<img src="img/obj/cojin1.jpg" class="img-responsive" alt="">
</td>
<td rowspan="3" id="canvas">
</td>
</tr>
<tr>
<td><img src="img/obj/cojin2.jpg" class="img-responsive" alt=""></td>
</tr>
<tr>
<td><img src="img/obj/cojin3.jpg" class="img-responsive" alt=""></td>
</tr>
</tbody>
</table>
JS:
if (WEBGL.isWebGLAvailable() === false) {
document.body.appendChild(WEBGL.getWebGLErrorMessage());
}
var container, stats, controls, containerWidth, containerHeight;
var camera, scene, renderer, light, textureLoader;
init();
//loadfbx();
//animate();
function init() {
container = document.getElementById('canvas');
containerWidth = 550;
containerHeight = 500;
camera = new THREE.PerspectiveCamera(40, containerWidth / containerHeight, 0.1, 100);
camera.position.set(0, 3, 3);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFFFFF);
renderer = new THREE.WebGLRenderer();
renderer.setSize(containerWidth, containerHeight, false);
container.appendChild(renderer.domElement);
renderer.render(scene, camera);
}
答案
它是由细胞上的填充引起的。你可以通过CSS解决这个问题
<td rowspan="3" id="canvas" style="padding: 0;height: 500px;display: block;">
以上是关于ThreeJS渲染器更改父级大小的主要内容,如果未能解决你的问题,请参考以下文章