如何使用 threejs 和 svelte 渲染 3d obj 文件？

问：

我正在使用 threejs 和 svelte，我想在屏幕上渲染带有 obj 扩展名的 3d 文件。 当我运行代码时，我确认对象已 100% 加载，但屏幕上只可见黑色背景。 我错过了什么吗？ 这是我的代码，欢迎任何建议。谢谢

<script lang="ts">
  import { onMount } from 'svelte';
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

  let container: HTMLElement;
  let camera: THREE.PerspectiveCamera;
  let renderer: THREE.WebGLRenderer;

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

  onMount(() => {
    const scene: THREE.Scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    // scene.add(new THREE.AxesHelper(5));

    const ambientLight: THREE.AmbientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    const directionalLight: THREE.DirectionalLight = new THREE.DirectionalLight(
      0xffffff,
      0.5,
    );
    directionalLight.position.set(0, 1, 1);
    scene.add(directionalLight);

    camera = new THREE.PerspectiveCamera(
      50,
      window.innerWidth / window.innerHeight,
      0.1,
      1000,
    );
    camera.position.z = 5;
    camera.position.y = 10;

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

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

    // const material: THREE.MeshLambertMaterial = new THREE.MeshLambertMaterial({
    //   color: 0xffffff,
    // });

    const objLoader: OBJLoader = new OBJLoader();
    objLoader.load(
      '/3Dmesh.obj',
      (object: THREE.Object3D) => {
        // object.traverse((child: THREE.Object3D) => {
        //   if (child instanceof THREE.Mesh) {
        //     (child as THREE.Mesh).material = material;
        //   }
        // });

        console.log('object', object);

        const box = new THREE.Box3().setFromObject(object);
        const center = box.getCenter(new THREE.Vector3());

        object.position.x += object.position.x - center.x;
        object.position.y += object.position.y - center.y;
        object.position.z += object.position.z - center.z;

        scene.add(object);
      },
      (xhr: ProgressEvent) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
      },
      (error: ErrorEvent) => {
        console.log(error);
      },
    );

    camera.position.z = 50;
    window.addEventListener('resize', onWindowResize, false);

    function animate(): void {
      requestAnimationFrame(animate);
      controls.update();
      render();
    }

    function render(): void {
      renderer.render(scene, camera);
    }

    animate();

    return () => {
      window.removeEventListener('resize', onWindowResize, false);
    };
  });
</script>

<svelte:window on:resize={onWindowResize} />

<div bind:this={container}></div>

下面是一个 3d 结果