You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native+Expo环境下react-native-filament无法渲染.glb 3D模型

Expo React Native项目中react-native-filament无法渲染.glb模型

我在基于Expo的React Native项目中尝试使用react-native-filament组件实现3D动画功能,应用能够正常构建完成,但.glb格式的3D模型始终无法被渲染出来。

组件实现代码

import {
    FilamentScene,
    FilamentView,
    DefaultLight,
    Model,
    Camera,
    Animator,
} from "react-native-filament";
import Horse from "@/assets/Horse.glb";
import F_Talking from "@/assets/F_Talking1.glb";

function MyScene() {
    return (
        <FilamentScene>
            {/* 🏞️ 渲染3D内容的视图 */}
            <FilamentView style={{ flex: 1 }}>
                {/* 💡 光源,否则场景会是黑色 */}
                <DefaultLight />

                {/* 📦 3D模型 */}
                <Model source={Horse} transformToUnitCube>
                    <Animator
                        // 要播放的动画索引(也可以传入useSharedValue)
                        animationIndex={0}
                        onAnimationsLoaded={(animations) => {
                            // 动画已加载完成
                        }}
                    />
                </Model>
                {/* 📹 用于观察场景并投影到视图的相机 */}
                <Camera />
            </FilamentView>
        </FilamentScene>
    );
}

export default MyScene;

页面渲染代码

import { View } from "react-native";
import HorseScene from "./components/HorseScene";

export default function HorseScreen() {
    return (
        <View style={{ flex: 1 }}>
            <HorseScene />
        </View>
    );
}

截图信息

  • Horse 3D模型页面截图:
    Horse 3D模型页面截图
  • Horse 3D模型页面日志信息截图:
    Horse 3D模型页面日志信息截图

内容的提问来源于stack exchange,提问作者Bello Shehu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 05:36:17