个人中心
gpt4 book ai didi

javascript - 位于容器底部的统计窗口

转载 作者：行者123 更新时间：2023-11-28 07:25:02 24 4
gpt4 key购买 nike

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

这是我得到的:

enter image description here

我的代码:

<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.domElement.style.bottom = '700px';

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

谢谢

最佳答案

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

第一个:将统计信息添加到 #container 元素，将其作为 body 元素的子元素插入并使用一些 css 以将其设置为相对于 body 。

第二个:保持统计数据不变并添加这个css

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

关于javascript - 位于容器底部的统计窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31869889/

24 4 0
文章推荐： javascript - 在 JavaScript 中旋转数组中的元素
文章推荐： c++ - 谁应该拥有迭代器、我的数据类或该类中的实际列表？
文章推荐： javascript - 如何在点击时将 z-index 较高的 div 调用到顶部？
文章推荐： ios - 如何以编程方式将 ImageView 与 ScrollView 的底部对齐？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com