ThreeJS渲染器更改父级大小

Question

我试图在表格中显示一个固定的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);
}

Answer 1

它是由细胞上的填充引起的。你可以通过CSS解决这个问题

<td rowspan="3" id="canvas" style="padding: 0;height: 500px;display: block;">