时间戳

首页 > 解决方案 > ThreeJS 渲染器更改父级大小

javascript - 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);
}

标签： javascripthtmlthree.js

解决方案

这是由单元格上的填充引起的。您可以通过 css 解决此问题

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

推荐阅读