Dando mis primeros pasos con Three.js y quería mostrar Stats.js en un pequeño escenario de prueba.
https://codepen.io/B33THR333/pen/ExwLbON
No quería usar módulos por ahora, pero además de eso, usé prácticamente el mismo código que en los ejemplos:
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);Aún así, las estadísticas parecen mostrarse en un lienzo diferente (espacio en blanco en la parte superior) y no veo dónde me equivoqué aquí. ¿Alguien tiene una idea?
Estaría muy agradecido por cualquier entrada!
Está agregando dos elementos separados a su container div. Si desea que se superpongan para que parezca que el lienzo de estadísticas es parte del renderizador, solo necesita un poco de CSS básico:
#container { position: relative; } #container > div { position: absolute; }