Doing my first steps with Three.js and wanted to display the Stats.js in an little test-scenario.
https://codepen.io/B33THR333/pen/ExwLbON
I didn't want to use modules for now, but besides that i pretty much used the same code as in the examples:
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);
still the Stats seem to be displayed in a different canvas (whitespace on top) and I don't see where I went wrong here. Has anyone an idea?
Would be really thankful for any input!
You're appending two separate elements to your container div. If you want them to overlap so it appears like the stats canvas is part of the renderer, you just need some basic CSS:
#container {
position: relative;
}
#container > div {
position: absolute;
}