宽度不同于div容器的100％

Question

我有一个显示3D图形的简单WebGL代码。 效果很好，但是我想为宽度设置一个不同于100％的值； 即我想把webGL动画放在一个小盒子里。

在我的代码下面； 我试图将WebGL放到CSS为“ height”和“ width”的500px框中，但是它不起作用：动画仍然占用宽度的100％：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - trackball controls</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
body {
    color: #000;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
    font-weight: bold;

    background-color: #fff;
    margin: 0px;
    overflow: hidden;
}

.container {
    width: 500px;
    height: 500px;
}

        </style>
    </head>

    <body>
        <center><div id="container"></div></center>
        <script src="three.js/build/three.min.js"></script>

        <script src="three.js/examples/js/controls/TrackballControls.js"></script>

        <script src="three.js/examples/js/Detector.js"></script>
        <script src="three.js/examples/js/libs/stats.min.js"></script>

        <script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container, stats;

var camera, controls, scene, renderer;

var cross;

init();
animate();

function init() {
...
}

function onWindowResize() {
...
}

function animate() {

    requestAnimationFrame( animate );
    controls.update();

    // For displaying
    render();

}

function render() {

    renderer.render( scene, camera );
    stats.update();

}
        </script>
    </body>
</html>

如何规避这个问题？

谢谢

更新1：

好的，很抱歉您对class-id感到困惑。

关于div容器，我在WebGL代码中使用appenChild添加了renderer domElement 。

使用以下代码：

<html lang="en">
    <head>
        <title>three.js webgl - trackball controls</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
body {
    color: #000;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
    font-weight: bold;

    background-color: #fff;
    margin: 0px;
    overflow: hidden;               
}

#container {
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;

}

        </style>
    </head>

    <body>
        <div id="container"></div>
        <script src="three.js/build/three.min.js"></script>

        <script src="three.js/examples/js/controls/TrackballControls.js"></script>

        <script src="three.js/examples/js/Detector.js"></script>
        <script src="three.js/examples/js/libs/stats.min.js"></script>

        <script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

...

</script>
</body>
</html>

我没有获得带有WebGL动画的居中框。 WebGL窗口像这样向右移动（宽度设置为300 px），但没有像我那样居中。

PS：margin-left：auto和margin-right：auto似乎不适合居中。

谢谢。

Answer 1

您的html有多个问题。

您的容器在CSS中定义为类，在html中将其作为ID
div容器中没有任何内容
不推荐使用<center></center>用途margin-left:auto; margin:right:auto; margin-left:auto; margin:right:auto; 在你的CSS。

再试一次，看看你过得如何

Answer 2

1）

画布仍然是页面宽度的100％，因为您可能已在onWindowResize函数中进行了设置。 为了使画布达到特定大小，您需要告诉three.js，而不是CSS。

突出显示，这些几行取决于宽度和高度：

camera = new THREE.PerspectiveCamera(50, width / height, 1, 10000);
renderer.setSize(width, height);

2）

您想设置margin-left: auto; margin-right: auto margin-left: auto; margin-right: auto如果您的容器确实是“容器”，则margin-left: auto; margin-right: auto转到画布。 另外，由于canvas的显示默认为inline ，因此您需要使用display: block 。

实际观看： http : //jsfiddle.net/60uzdyss/

宽度不同于div容器的100％

问题描述

2 个解决方案

解决方案1
1 2015-08-01 04:04:20

解决方案2
1 2015-08-01 20:09:44

宽度不同于div容器的100％

问题描述

2 个解决方案

解决方案1 1 2015-08-01 04:04:20

解决方案2 1 2015-08-01 20:09:44

解决方案1
1 2015-08-01 04:04:20

解决方案2
1 2015-08-01 20:09:44