Question

我将一个WebGL图放入div容器中。除了显示在WebGL窗口下方的Stats窗口外，一切正常。

我得到的是：

我的代码：

<html>
<head>
        <style>
#container{ 
        display: block;
        margin: 0 auto;
        width: 700px;
        height: 700px;
           }    
        </style>
</head>


<body>

...

<div id="container">
</div> 

<script>

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

var container, stats;
var camera, controls, scene, renderer;
var cross;
var width = 700, height = 700;

init();
animate();

function init() {

        // Define container
        container = document.getElementById( 'container' );

// Add renderer to container
  container.appendChild( renderer.domElement );

  // Add stats
  stats = new Stats();
  stats.domElement.style.position = 'relative';
  stats.domElement.style.zIndex = 100;
  container.appendChild( stats.domElement );
}
</script>

</body>
</html>

为了在容器的左上方有一个Stats窗口，我必须添加：

stats.domElement.style.bottom = '700px';

如何自然地将Stats窗口放在容器的左上方？即没有这个技巧。

谢谢

Answer 1

好的，您基本上可以使用两种方法来获取它。

第一个：将统计数据添加到 #container 元素，将其作为 body 元素的子元素插入，并使用一些css将其设置为相对于身体。

第二种：保持统计数据并添加此css

.yourStatsClass {
    left: 0;
    top: 0;
}

统计窗口位于容器的底部

1 个答案: