Question

我有一个显示3D图形的简单WebGL代码。它运作良好，但我想设置宽度不同于100％的值;即我想把webGL动画放在一个小盒子里。

在我的代码下面;我试图将WebGL放入一个带有CSS＆＃34; height＆＃34;的500px盒子中。和＆＃34;宽度＆＃34;但它不起作用：动画仍然占据宽度的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：

很抱歉这是一个混淆。

关于div容器，我在appenChild代码中使用WebGL添加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像素），但它没有像我那样居中。

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

感谢。

Answer 1

你的html存在多个问题。

您的容器在您的css中定义为一个类，您在html中将其作为id
div容器中没有任何内容
<center></center>在您的css中使用margin-left:auto; margin:right:auto;。

再试一次，看看你是如何进行的

Answer 2

1）

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

要突出显示，这些情侣线取决于宽度和高度：

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

2）

如果您的容器确实是一个＆＃34;容器，您想要将margin-left: auto; margin-right: auto设置为画布。＆＃34;此外，由于帆布＆＃39;默认情况下显示inline，您需要使用display: block。

查看实际操作：http://jsfiddle.net/60uzdyss/

div容器的宽度不同于100％

2 个答案: