ReactJS集成Google Model Viewer部署AWS Amplify后3D模型无法渲染

我想在React项目中实现兼容Android和iOS的AR功能，对比后选择了Google的Model Viewer（支持的浏览器和系统范围最广）。本地运行一切正常，但通过AWS Amplify部署后，访问HTTPS链接时3D模型无法渲染，错误日志如下：

CachingGLTFLoader.js:151 SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at n.value (GLTFLoader.js:315:21)
    at Object.onLoad (GLTFLoader.js:205:11)
    at three.module.js:39951:38

项目代码如下：

BigMack.js（页面组件） #

// pages/BigMack.js
const BigMack = () => {
    return (
        <div id="card">
            <model-viewer
                alt="big_mack"
                src="gltf/big_mack/scene.gltf"
                shadow-intensity="1"
                ios-src="usdz/big_mack.usdz"
                quick-look-browsers="safari chrome"
                ar-scale="fixed"
                camera-controls ar touch-action="pan-x"
                disable-zoom
            ></model-viewer>
        </div>
    );
};

export default BigMack;

App.js #

// App.js
import React from "react";
import './App.css';
import "@google/model-viewer/dist/model-viewer";
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/Home";
import BigMack from "./pages/BigMack";
import MacBook from "./pages/MacBook";
import Pizza from "./pages/Pizza";
import RobotCleaner from "./pages/RobotCleaner";

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/big-mack" element={<BigMack/>}/>
                <Route path="/macbook-pro" element={<MacBook/>}/>
                <Route path="/pizza" element={<Pizza/>}/>
                <Route path="/robot-cleaner" element={<RobotCleaner/>}/>
            </Routes>
        </Router>
    );
}

export default App;

index.js #

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

public目录结构：

这个错误的核心是：Model Viewer请求模型文件时，服务器返回的不是GLTF/USDZ资源，而是HTML页面（比如404页面），导致解析JSON时遇到<字符报错。按以下步骤解决：

1. 修正模型资源路径
   React项目中，public目录下的资源必须用绝对路径或process.env.PUBLIC_URL变量引用（Create React App规范）。修改model-viewer的路径属性：

src={`${process.env.PUBLIC_URL}/gltf/big_mack/scene.gltf`}
ios-src={`${process.env.PUBLIC_URL}/usdz/big_mack.usdz`}

确保无论部署在哪个路径，都能正确指向public目录里的模型文件。

2. 配置AWS Amplify重写规则
   因为用了React Router的BrowserRouter，Amplify默认会把非根路径的请求当成静态资源处理，返回404页面。在项目根目录创建/修改amplify.yml，添加重写规则：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
rewrite:
  - source: /<*>.gltf
    target: /<*>.gltf
    status: 200
  - source: /<*>.usdz
    target: /<*>.usdz
    status: 200
  - source: /<*>.bin
    target: /<*>.bin
    status: 200
  - source: /<*>
    target: /index.html
    status: 200

该配置优先让模型相关文件返回正确资源，其他路径重定向到index.html，适配单页应用路由。

3. 设置正确的MIME类型
   Amplify默认可能未配置.gltf/.usdz的MIME类型，导致浏览器无法解析。在Amplify控制台的「托管」设置中添加自定义MIME类型：

• .gltf: model/gltf+json
• .usdz: model/vnd.usdz+zip
• .bin: application/octet-stream

4. 重新部署项目
   修改代码和配置后，提交代码触发Amplify自动部署，或在控制台手动重新部署。

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