通过局域网搭建本地 https 开发服务器，可在 iphone 上直接访问并实时预览 three.js ar 网站，无需反复上传至远程托管平台，大幅提升开发效率。
通过局域网搭建本地 https 开发服务器，可在 iphone 上直接访问并实时预览 three.js ar 网站，无需反复上传至远程托管平台，大幅提升开发效率。
在开发基于 Three.js 的 WebAR 应用时，频繁部署到线上托管服务（如 GitHub Pages、Vercel 或免费静态主机）不仅耗时，还难以快速验证摄像头权限、AR 渲染性能和手势交互等移动端关键行为。更高效的方式是将本地开发环境直接暴露给 iPhone——前提是确保整个流程满足 WebXR 和 iOS Safari 对安全上下文（secure context）的强制要求：必须通过 HTTPS 提供服务。
✅ 推荐方案：VS Code + Live Server（HTTPS 模式）
-
安装与配置
- 安装 Visual Studio Code 及扩展 Live Server（推荐使用支持 HTTPS 的社区增强版：vscode-liveserver-https）。
- 在项目根目录下生成自签名 SSL 证书（仅用于本地开发）：
# 使用 Git 自带的 OpenSSL（Windows/macOS 均适用） openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes -subj "/CN=localhost"
将生成的 cert.pem 和 key.pem 文件置于项目目录中（如 ./cert/）。
-
启动 HTTPS 本地服务器
- 在 VS Code 中打开项目 → 右键 index.html → 选择 “Open with Live Server (HTTPS)”；
- 或在命令面板（Ctrl+Shift+P / Cmd+Shift+P）中执行 Live Server: Start Server with HTTPS，指定证书路径。
此时服务将运行在类似 https://localhost:5500 的地址，并自动启用热重载（Hot Reload）：保存任意 HTML/JS/CSS 文件后，iPhone 浏览器将自动刷新。
-
从 iPhone 访问
- 确保 iPhone 与开发机处于同一 Wi-Fi 局域网；
- 在 iPhone Safari 中输入开发机的局域网 IP 地址 + 端口 + 协议，例如：
https://192.168.1.161:5500
⚠️ 注意：首次访问会提示“此连接非私密”——点击「详细信息」→「访问不安全网页」（iOS 17+ 可能显示“仍要访问”）。这是自签名证书的正常表现，切勿在生产环境使用。
? 替代方案（无 VS Code 时）
-
Node.js 脚本轻量启动（需全局安装 http-server）：
npm install -g http-server http-server -S -C ./cert/cert.pem -K ./cert/key.pem -p 5500 --cors
-
Python 3（macOS/Linux 内置，Windows 需安装）：
# 需先安装 ssldev 或使用第三方 https-server 包 pip install https-server https-server -p 5500 -c ./cert/cert.pem -k ./cert/key.pem
? 关键注意事项
- iOS Safari 限制：AR 功能（如 navigator.xr.requestSession('immersive-ar')）仅在 HTTPS 下可用，HTTP 会静默失败；
- 摄像头权限：首次访问需手动授予“相机”权限（地址栏右侧图标 → “网站设置” → 启用摄像头）；
- 性能调试：可启用 Safari 开发者工具（macOS Safari → 偏好设置 → 高级 → 勾选“在菜单栏中显示开发菜单”），然后连接 iPhone（设置 → Safari → 高级 → Web 检查器开启），远程调试 Canvas 渲染帧率与内存占用；
- 跨域问题：若 Three.js 加载模型（GLB/GLTF）来自本地文件系统，请统一通过服务器提供资源，避免 file:// 协议导致 CORS 错误。
通过该本地 HTTPS 开发流，你将获得接近真实发布环境的测试体验——代码保存即同步、AR 初始化秒响应、权限与渲染行为可精准复现。告别上传等待，让 WebAR 迭代真正“所见即所得”。
