Stats.js 在其他 canvas 中显示为 ThreeJS

Question

开始使用 Three.js 并希望在一个小测试场景中显示 Stats.js。

https://codepen.io/B33THR333/pen/ExwLbON

我暂时不想使用模块，但除此之外我几乎使用了与示例中相同的代码：

    var stats = new Stats(); 
    var renderer = new THREE.WebGLRenderer({antialias: true});
    container.appendChild(stats.domElement);
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setPixelRatio( window.devicePixelRatio );
    container.appendChild(renderer.domElement);

统计数据似乎仍然显示在不同的 canvas 中（顶部有空白），我看不出哪里出错了。有人有想法吗？

非常感谢任何输入！

Answer 1

您要将两个单独的元素附加到 container div。如果你想让它们重叠，这样看起来统计 canvas 是渲染器的一部分，你只需要一些基本的 CSS:

#container {
  position: relative;
}

#container > div {
  position: absolute;  
}

Stats.js 在其他 canvas 中显示为 ThreeJS

Stats.js getting displayed in other canvas as ThreeJS

javascript

canvas

three.js