three.jsの開発段階でcpu使用率がすぐ100%になってしまう

Question

前提

three.jsでglbファイルを表示してマウスでロテートさせるページを作っています。
使ってるモジュールは
GLTFLoader
OrbitControls
Three.min
です
https://web-creates.com/code/blender-threejs/
このページを参考にしています。というかこのソースコードをそのまま貼り付けても問題が発生します
htmlファイルをlive sereverで起動しています(静的なものではないのでファイル直開きでは難しいものと認識してます)
パソコンはそこまで悪いものではないです(i5 10210U/ 16GB)

発生している問題・エラーメッセージ

ページの表示はできており3dモデルの回転もできるのですが、コンソールにメッセージが無限に出てきてCPU使用率が100%になり、それ以降の開発が難しいです

Ws {isObject3D: true, uuid: '54cf6bb7-981c-4f80-83ac-1036d80655da', name: 'Scene', type: 'Group', parent: ea, …}

というようなオブジェクトで、スクリプトファイルではなくVMからのメッセージです

該当のソースコード

window.addEventListener("DOMContentLoaded", init);

function init() {
  // レンダラーを作成
  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#canvas"),
    alpha: true,
  });
  // ウィンドウサイズ設定
  width = document.getElementById("main_canvas").getBoundingClientRect().width;
  height = document
    .getElementById("main_canvas")
    .getBoundingClientRect().height;
  renderer.setPixelRatio(1);
  renderer.setSize(width, height);
  console.log(window.devicePixelRatio);
  console.log(width + ", " + height);

  // シーンを作成
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x87b8c0); // 背景色

  // カメラを作成
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.set(0, 400, -1000);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);

  // Load GLTF or GLB
  const loader = new THREE.GLTFLoader();
  const url = "3d/test.glb";

  // window size
  const w_height = window.innerHeight;

  let model = null;
  loader.load(
    url,
    function (gltf) {
      model = gltf.scene;
      // model.name = "model_with_cloth";
      model.scale.set(100.0, 100.0, 100.0);
      model.position.set(0, (w_height / 3) * -1, 0);
      scene.add(gltf.scene);

      // model["test"] = 100;
    },
    function (error) {
      console.log("An error happened");
      console.log(error);
    }
  );
  renderer.gammaOutput = true;
  renderer.gammaFactor = 2.2;

  // 平行光源
  const light = new THREE.DirectionalLight(0xffffff);
  light.intensity = 1; // 光の強さ
  light.position.set(3, 10, 1);
  // シーンに追加
  scene.add(light);

  //環境光源(アンビエントライト)：すべてを均等に照らす、影のない、全体を明るくするライト
  const ambient = new THREE.AmbientLight(0xf8f8ff, 0.7);
  scene.add(ambient); //シーンにアンビエントライトを追加

  // 初回実行
  tick();

  function tick() {
    controls.update();

    if (model != null) {
      console.log(model);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(tick);
  }
}

Answer 1

Ws {isObject3D: true, uuid: '54cf6bb7-981c-4f80-83ac-1036d80655da', name: 'Scene', type: 'Group', parent: ea, …}

https://web-creates.com/demo/20211206blender/

にて同様のログがコンソールに出力されていることを確認しました。

ログが無限に出るのは tick() 関数の中でログ出力処理をしていることが原因かと思います。
コメントアウトして CPU 使用率が改善されるか確認してみてください。

  function tick() {
    controls.update();
/*
    if (model != null) {
      console.log(model);
    }
*/
    renderer.render(scene, camera);
    requestAnimationFrame(tick);
  }