React集成Babylon.js加载OBJ文件功能实现异常寻求解决方案

核心错误点 #

• 错误使用SceneLoader.Load方法：该方法会创建全新的场景实例，加载的OBJ模型会被放入新场景，你当前渲染的是初始化时的旧场景，自然看不到模型。
• 未引入OBJ格式加载依赖：Babylon核心包默认不内置OBJ格式解析逻辑，需要单独引入加载器。
• 场景缺少光源：你注释掉了 HemisphericLight 的初始化代码，就算模型加载成功，没有光照也会显示为全黑看不到。
• 未处理加载成功后的回调逻辑：你在Loader的成功回调中没有任何资源处理代码，也没有调整相机适配模型大小。

修复步骤 #

1. 安装OBJ加载器依赖：

npm install @babylonjs/loaders

2. 在代码顶部引入OBJ加载器
3. 改用SceneLoader.Append方法将OBJ模型追加到当前已有的场景中
4. 恢复光源初始化代码
5. 模型加载完成后调整相机焦距，适配模型大小

完整修复后的代码 #

import React from "react";
import { FreeCamera, Vector3, HemisphericLight, SceneLoader } from "@babylonjs/core";
import "@babylonjs/loaders/OBJ"; // 引入OBJ加载器
import SceneComponent from 'babylonjs-hook';

interface Viewer3DProps {
    item: File // 明确类型为浏览器File对象
}

const onSceneReadyPrevious = (item: File) => {
  return (scene: any) => {
    // 初始化相机
    const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
    camera.setTarget(Vector3.Zero());
    const canvas = scene.getEngine().getRenderingCanvas();
    camera.attachControl(canvas, true);

    // 初始化光源，必须要有光照才能正常显示模型
    const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    // 加载用户上传的OBJ文件到当前场景
    SceneLoader.Append("", item, scene, function () {
      // 加载成功后自动调整相机位置适配模型大小，可根据需求移除
      scene.createDefaultCameraOrLight(true, true, true);
      scene.activeCamera.attachControl(canvas, false);
    });
  };
}

/**
 * 逐帧渲染回调，若需要旋转加载的模型可在此处扩展逻辑
 */
const onRender = (scene: any) => {
  // 示例：旋转加载后的OBJ模型
  // const objModel = scene.getMeshByName("替换为你的模型名称");
  // if (objModel) {
  //   const deltaTimeInMillis = scene.getEngine().getDeltaTime();
  //   const rpm = 10;
  //   objModel.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
  // }
};

export default (props: Viewer3DProps) => {
  const { item } = props
  return (
    <div style={{ width: '100%', height: '600px' }}>
      <SceneComponent antialias onSceneReady={onSceneReadyPrevious(item)} onRender={onRender} id="my-canvas" />
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Luis Louis