前端3D渲染【免费下载链接】react-360Create amazing 360 and VR content using React项目地址https://gitcode.com/gh_mirrors/re/react-360点击查看免费下载本地开发服务器packager只适合开发调试。当你准备把 React 360 应用正式上线时需要通过生产构建把代码打包成可直接部署的静态资源。本文以 docs/publish.md 为核心结合仓库内 scripts/bundle.js、scripts/project-paths.js、CLI 模板生成器addons/react-360-cli/generators与示例应用Samples/BasicAppTemplate等源码实现完整讲解npm run bundle的命令用法、构建产物目录结构、静态资源static_assets的部署策略以及如何通过assetRoot把资源迁移到独立域名或 CDN。读完本文你将掌握如何一键生成生产版 JS 与 HTML、构建产物应如何摆放才能被服务器正确解析、asset()/staticResourceURL()在发布前后的行为差异以及如何用--assets参数在打包时注入自定义 CDN 资源地址。为什么需要生产构建React 360 开发阶段通过 scripts/packager.js 在本地启动开发服务器代码以未压缩、带 source map 的形式按需提供页面通过 Samples/BasicAppTemplate/index.html 中的开发 URL 加载 bundlescript src./client.bundle?platformvr/script script React360.init( index.bundle?platformvrdevtrue, document.getElementById(container), { bridgeFile: NonBlobBridge.js, assetRoot: static_assets/, } ); /script这种模式下 URL 带有?platformvr查询参数bundle 依赖开发服务器动态解析不能直接放到生产服务器上使用。因此 React 360 提供了一条一键命令把所有代码打包成单文件夹的静态版本交给任意 Web 服务器托管即可。一键构建npm run bundle在项目根目录即包含package.json、且其dependencies中声明了react-360的目录执行npm run bundle这条命令在 CLI 生成的项目模板中被定义为node node_modules/react-360/scripts/bundle.js见 addons/react-360-cli/generators/package.json.generator.js。构建过程的核心逻辑位于 scripts/bundle.js主要完成四件事定位项目目录通过 scripts/project-paths.js 从当前目录向上查找包含react-360依赖的package.json也可用环境变量PROJECT_LOCATION显式指定项目位置。找不到项目时直接报错Could not find a React 360 project directory并退出。并行打包两份 JS分别以index.jsReact 应用入口和client.jsReact 360 Web 运行时入口为入口调用 React Native CLI 的bundle命令产出index.bundle.js与client.bundle.js。关键参数包括--platform vr按 VR 平台生成 bundle--dev false关闭开发模式得到生产压缩版本--assets-dest build将打包内联的资源输出到build目录。重写index.html把开发 URLclient.bundle?platformvr、index.bundle?platformvrdevtrue替换为生产文件名client.bundle.js、index.bundle.js并写入构建目录。复制桥接文件从index.html中解析bridgeFile配置默认NonBlobBridge.js将该文件复制到构建目录。构建成功后会看到提示Production versions of JS were successfully built. They can be found at 项目根目录/build构建产物与服务器目录结构npm run bundle会在项目根目录创建build文件夹内容大致如下build/ ├─ index.html # 已改写为指向生产 bundle 的 HTML ├─ index.bundle.js # React 应用index.js的生产压缩包 ├─ client.bundle.js # React 360 运行时client.js的生产压缩包 └─ NonBlobBridge.js # 桥接文件发布时把该目录内容整体复制到服务器再补上static_assets文件夹最终布局与 docs/publish.md 给出的结构一致Web Server ├─ static_assets/ │ ├─ index.html ├─ index.bundle.js ├─ client.bundle.js └─ NonBlobBridge.js关于 bridge 文件的说明copyBridgeFile会优先从项目index.html的bridgeFile: xxx.js配置中解析实际文件名见 scripts/bundle.js。若找不到index.html或桥接文件构建脚本会打印警告提示需要手动复制。静态资源开发与生产的差异docs/static-assets.md 指出应用中的图片、全景图、声音和 3D 模型等资源可以托管在外部服务也可以自行托管。区别在于发布阶段外部托管的资源位置不变可直接引用自行托管的资源在开发static_assets目录与生产服务器其他位置之间可能迁移需要特殊处理。用asset()引用资源而不是写死相对路径为让资源地址在生产期可被改写应避免手写相对 URL统一使用asset()方法。默认情况下它指向static_assets目录运行时可重写为 CDN 地址即使该 URL 是动态生成的// 默认指向 static_assets/myImage.png Image source{asset(myImage.png)} /其底层实现见 Libraries/Utilities/asset.jsasset(localPath)返回{uri: staticAssetURL(localPath)}形式的资源对象而 Libraries/Utilities/staticAssetURL.js 会读取NativeModules.ExternalAssets暴露的assetRoot把本地路径拼接到资源根路径之后从而在运行时完成地址迁移。需要纯字符串路径时用staticResourceURL()asset()返回的是资源对象带uri字段某些场景如直接给 API 传路径字符串只需一个字符串地址此时可用staticResourceURL()它接收本地资源路径并在静态资源位置变化时自动转换。它与asset()共用同一套staticAssetURL底层逻辑只是返回类型不同。指定资源位置assetRoot与--assets初始化时指定assetRoot应用发布后可在初始化ReactInstance时传入assetRoot配置静态资源位置const r360 new ReactInstance( MyReact360App.bundle.js, document.getElementById(container), { // 提供自定义资源根路径 assetRoot: https://mycdn.example.net/myapp/, }, );参考示例 Samples/BasicAppTemplate/client.js初始化逻辑位于ReactInstance中开发模板默认assetRoot: static_assets/见 addons/react-360-cli/generators/index.html.generator.js。打包时用--assets注入如果使用npm run bundle构建可用--assets标志在打包阶段指定自定义资源根npm run bundle -- --assets https://mycdn.example.net/myapp/ # 或使用 yarn yarn bundle --assets https://mycdn.example.net/myapp/构建脚本 scripts/bundle.js 解析--assets参数若末尾没有/会自动补全随后在重写index.html时将assetRoot: static_assets/替换为你提供的值见updateHTML逻辑scripts/bundle.js。若index.html中找不到static_assets/字样脚本会打印Could not find assetRoot警告提醒手动修改。发布检查清单在项目根目录执行npm run bundle确认输出提示构建成功。将build目录下所有文件index.html、index.bundle.js、client.bundle.js、NonBlobBridge.js复制到服务器。若应用使用了static_assets目录中的资源将该目录一并复制到服务器与index.html同级。若资源部署在独立域名或 CDN用--assets重新打包或在客户端初始化时传入assetRoot。访问服务器上的index.html验证页面能正常加载、全景背景与资源正常显示。补充从源码看构建流程的边界与限制buildScript依赖node_modules中 React Native 的 CLIreact-native/local-cli/cli.js可通过环境变量RN_CLI_LOCATION覆盖scripts/bundle.js。因此请确保项目已正确安装依赖。updateHTML与copyBridgeFile在找不到index.html、找不到bridgeFile或写入失败时只会打印警告而不会中断构建scripts/bundle.js发布前需留意终端输出的**警告项必要时手动修正build/index.html中的路径。构建目录若已存在会直接复用不会清空旧产物build目录不存在时由脚本自动创建scripts/bundle.js。赞分享前端3D渲染【免费下载链接】react-360Create amazing 360 and VR content using React项目地址https://gitcode.com/gh_mirrors/re/react-360点击查看免费下载相关推荐3大技术突破洛雪音乐音源聚合方案重构高品质音乐体验3大技术突破洛雪音乐音源聚合方案重构高品质音乐体验 你是否曾经为了听一首歌而在多个音乐平台间反复切换是否因为某个平台没有版权而无法听到心仪的音乐是否对音质音视频mpv-android配置实战指南深度定制你的Android视频播放器mpv android配置实战指南深度定制你的Android视频播放器 你是否在Android设备上观看视频时遇到过卡顿、字幕不同步或画质不佳的问题作为基于音视频移动开发如何构建并发布 Twenty 应用tarball 部署到服务器或上架 npm 市场如何构建并发布 Twenty 应用tarball 部署到服务器或上架 npm 市场 一个 Twenty 应用完成本地开发和测试后有两条官方分发路径把 t企业应用后端前端上一篇从零开始构建AI应用基于NVIDIA Kimi-K2.6-DFlash的完整开发流程 下一篇如何快速上手Smarty5分钟完成第一个模板项目创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考