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渲染器更改父级大小的主要内容,如果未能解决你的问题,请参考以下文章

如何在渲染之间更改片段着色器颜色?

如何使用 Threejs 更改对象的 zOrder?

ThreeJS-渲染器

threejs 16 渲染器Renderers

threejs 16 渲染器Renderers

ThreeJS——窗口变化自适应渲染