React集成Three.js后Canvas无法显示模型紧急求助

我使用React结合Three.js在网站上渲染OBJ模型作为装饰，模型加载正常（控制台输出“loaded Material”），但页面仅显示默认黑屏，已添加PointLight但无效果。查阅大量同类问题并尝试多种代码修复仍未解决，明日需提交项目，恳请帮助。

怀疑的原因 #

• 渲染器因某些原因未更新
• 相机未对准物体
• 材质未应用或光照不足无法被看见

预期与实际效果 #

• 预期：能看到球体和从Blender导入的模型
• 实际：仅显示Three.js默认的黑色背景

代码示例 #

import { useState } from 'react'
import * as THREE from "three";
import { Canvas, useLoader} from '@react-three/fiber'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

import './3dhuman.css'

var scene;
function Human() {

  const scene = new THREE.Scene();
  
  const camera = new THREE.PerspectiveCamera(50, width / height, 1, 10000)
  camera.position.set(0, 10, 0);
  const renderer = new THREE.WebGLRenderer({ antialias: true})
  renderer.setPixelRatio(window.devicePixelRatio);
  
  const controls = new OrbitControls( camera, renderer.domElement );
  var width = 400;
  var height = 500;
  renderer.setSize(width, height)
  var pointlight;

  pointlight = new THREE.PointLight(0xffffff, 1);

  pointlight.position.set(0, 0, 10);

  scene.add(pointlight);

  let ballGeo = new THREE.SphereGeometry(100, 64, 64);

   let ballMat = new THREE.MeshPhysicalMaterial();

  let ballMesh = new THREE.Mesh(ballGeo, ballMat);

  scene.add(ballMesh);
  window.onload = function() {
    document.getElementById('three').appendChild(renderer.domElement)
  };
  
  var mtlLoader = new MTLLoader();

  // load material
  mtlLoader.load("./m.mtl", function(materials) {
    materials.preload();
    console.log("loaded Material");

      // load Object
    var objLoader = new OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load(
      "./s.obj",
      function(object) {
        scene.add(object);
        object.position.set(0,0,0);
        camera.lookAt(object.position);
        console.log(object.position)
        console.log(camera.position)
        renderer.render(scene,camera);
      })});
      
    function animate() {

        requestAnimationFrame( animate );
      
        // required if controls.enableDamping or controls.autoRotate are set to true
        
      
        renderer.render(scene,camera );
        
      
    }
    animate();
    controls.update();
  return (
    <div className="human">
      <div className='background-human'>
        <div className='links'>
          <a href="3d-elements">Home</a>
          <a href="about-us">About us</a>
          <a href="contact-page">contact us</a>
          <a href="your info">Account</a>
        </div>
        <h1>welcome to<span style={{color: 'red', fontSize: '80px'}}>wx</span>developers</h1>
        <h3>We design your sites with our amazign technologies<br></br>and help you reach for more.</h3>
        <div className='canvas-area' id='three'>
          
        </div>
      </div>
    </div>
  )
}

export default Human

内容的提问来源于stack exchange，提问作者Kalkidan Tsegaye