寬度不同於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