javascript - 如何让统计框显示在我的 Threejs Canvas 上？

Question

我希望能够查看性能统计信息，例如 this page在开发我的 Three.js 项目时。但我收到错误

"TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not >of type 'Node'."

代码如下:

var container, camera, scene, axis, renderer, geometry, cylinder1, material1, mesh1, stats;

function init() {

  container = document.getElementById( 'canvas' );
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000);
  camera.position.z = 1000;
  scene.add(camera);

  var axis = new THREE.Vector3(1, 0, 0);
  var rad = THREE.Math.degToRad(90);
  var axesHelper = new THREE.AxesHelper( 500 );
  scene.add( axesHelper );

  cylinder1 = new THREE.CylinderGeometry(275, 275, 50, 100);
  material1 = new THREE.MeshBasicMaterial( {color: 'orange', wireframe: true} );
  mesh1 = new THREE.Mesh(cylinder1, material1);
  mesh1.rotateOnAxis(axis, rad);
  mesh1.position.set(0,0,25);
  scene.add(mesh1);

  renderer = new THREE.WebGLRenderer({alpha: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var stats = new Stats();
  stats.showPanel( 1 );
  document.body.appendChild( stats.dom );

  animate();

} init();

    function animate() {

    stats.begin();

    requestAnimationFrame(animate); 
    renderer.render(scene, camera);

    stats.end();

    }

您可以在 codepen 上实时查看问题.

Answer 1

stats.domElement 不是 stats.dom。