Three.js 没有将场景渲染到我的 div 中

Question

我正在尝试在 React 中使用 Three.js 编写一个波浪平面。但由于某种原因，浏览器不会渲染画布或父 div (App)。我尝试了更简单的 Three.js 代码，仅使用一个立方体，效果很好。所以导入和重新渲染是正确的。我有点坚持，我希望有人能告诉我我在代码中做错了什么。

import { useEffect, useRef } from "react";
import "./App.css";
import * as THREE from "three";

function App() {
  var mountRef = useRef(null);

  useEffect(() => {
    var vertexHeight = 15000,
      planeDefinition = 100,
      planeSize = 1245000,
      background = "#002135",
      meshColor = "#005e97";

    var camera = new THREE.PerspectiveCamera(
      55,
      window.innerWidth / window.innerHeight,
      1,
      400000
    );
    camera.position.z = 10000;
    camera.position.y = 10000;

    var scene = new THREE.Scene();
    scene.fog = new THREE.Fog(background, 1, 300000);

    var planeGeo = new THREE.PlaneGeometry(
      planeSize,
      planeSize,
      planeDefinition,
      planeDefinition
    );
    var plane = new THREE.Mesh(
      planeGeo,
      new THREE.MeshBasicMaterial({
        color: meshColor,
        wireframe: true,
      })
    );
    plane.rotation.x -= Math.PI * 0.5;

    scene.add(plane);

    var renderer = new THREE.WebGLRenderer({ alpha: false });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(background, 1);

    mountRef.current.appendChild(renderer.domElement);

    updatePlane();

    function updatePlane() {
      for (var i = 0; i < planeGeo.vertices.length; i++) {
        planeGeo.vertices[i].z += Math.random() * vertexHeight - vertexHeight;
        planeGeo.vertices[i]._myZ = planeGeo.vertices[i].z;
      }
    }

    render();

    var count = 0;
    function render() {
      requestAnimationFrame(render);
      // camera.position.z -= 150;
      var x = camera.position.x;
      var z = camera.position.z;
      camera.position.x = x * Math.cos(0.001) + z * Math.sin(0.001) - 10;
      camera.position.z = z * Math.cos(0.001) - x * Math.sin(0.001) - 10;
      camera.lookAt(new THREE.Vector3(0, 8000, 0));

      for (var i = 0; i < planeGeo.vertices.length; i++) {
        z = +planeGeo.vertices[i].z;
        planeGeo.vertices[i].z =
          Math.sin(i + count * 0.00002) *
          (planeGeo.vertices[i]._myZ - planeGeo.vertices[i]._myZ * 0.6);
        plane.geometry.verticesNeedUpdate = true;

        count += 0.1;
      }

      renderer.render(scene, camera);
    }

    window.addEventListener("resize", onWindowResize, false);

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    return () => {
      mountRef.current.removeChild(renderer.domElement);
    };
  }, []);
  return (
    <div className="App">
      <div className="webgl-bg-scene" ref={mountRef}></div>
    </div>
  );
}

export default App;

body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: gray;
}

.App {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.webgl-bg-scene {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  overflow-y: hidden;
  background-color: blue;
}

UPDATE: I figured out that when i delete the following two parts, it will render the plane in the browser. So the mistake have to be there somewhere.

updatePlane();

    function updatePlane() {
      for (var i = 0; i < planeGeo.vertices.length; i++) {
        planeGeo.vertices[i].z += Math.random() * vertexHeight - vertexHeight;
        planeGeo.vertices[i]._myZ = planeGeo.vertices[i].z;
      }
    }
    
   
    
    for (var i = 0; i < planeGeo.vertices.length; i++) {
        var z = +planeGeo.vertices[i].z;
        planeGeo.vertices[i].z =
          Math.sin(i + count * 0.00002) *
          (planeGeo.vertices[i]._myZ - planeGeo.vertices[i]._myZ * 0.6);
        plane.geometry.verticesNeedUpdate = true;

        count += 0.1;
      }