Question

在开发Three.js项目时，我希望能够像在this page上那样查看性能统计信息。但是我遇到了错误

“ TypeError：无法在'Node'上执行'appendChild'：参数1不是'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。

如何获取统计信息框以显示在threejs画布上？

1 个答案: