Needle Engine 文档
Downloads
  • What is Needle Engine?
  • 用户评价
  • Get an overview

    • Samples and Showcase
    • 我们的愿景 🔮
    • 功能概览
    • 技术概述
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Unity 版 Needle Engine
    • Needle Engine for Blender
    • Needle Engine 作为 Web Component
    • 在您的网站上使用 Needle Engine
    • Needle Cloud
  • Topics

    • Web 项目结构
    • Everywhere Actions
    • Exporting Assets to glTF
    • 框架、打包器、HTML
    • Testing on local devices
    • 部署与优化
  • Advanced

    • 网络
    • VR & AR (WebXR)
    • 使用 Needle Engine 直接从 HTML
    • 编辑器同步
  • Troubleshooting

    • 如何调试
    • 常见问题 (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • 在 Needle Engine 中编写脚本
    • Scripting Introduction for Unity Developers
    • Needle 核心组件
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable and other decorators
    • 自动生成组件
    • Scripting Examples
    • Community Contributions
    • 附加模块
  • Settings and APIs

    • <needle-engine> 配置
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
Downloads
  • What is Needle Engine?
  • 用户评价
  • Get an overview

    • Samples and Showcase
    • 我们的愿景 🔮
    • 功能概览
    • 技术概述
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Unity 版 Needle Engine
    • Needle Engine for Blender
    • Needle Engine 作为 Web Component
    • 在您的网站上使用 Needle Engine
    • Needle Cloud
  • Topics

    • Web 项目结构
    • Everywhere Actions
    • Exporting Assets to glTF
    • 框架、打包器、HTML
    • Testing on local devices
    • 部署与优化
  • Advanced

    • 网络
    • VR & AR (WebXR)
    • 使用 Needle Engine 直接从 HTML
    • 编辑器同步
  • Troubleshooting

    • 如何调试
    • 常见问题 (FAQ) 💡
    • Get Help
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • 在 Needle Engine 中编写脚本
    • Scripting Introduction for Unity Developers
    • Needle 核心组件
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable and other decorators
    • 自动生成组件
    • Scripting Examples
    • Community Contributions
    • 附加模块
  • Settings and APIs

    • <needle-engine> 配置
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
  • Getting Started

    • Downloads
    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Web 项目结构
    • Everywhere Actions
    • Exporting Assets to glTF
    • 框架、打包器、HTML
    • Testing on local devices
    • 部署与优化
    • 如何调试
    • 常见问题 (FAQ) 💡
  • Scripting

    • 在 Needle Engine 中编写脚本
    • Scripting Introduction for Unity Developers
    • Creating and using Components
    • 自动生成组件
    • Scripting Examples
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • 网络
    • 编辑器同步
  • Reference

    • 功能概览
    • 技术概述
    • Needle 核心组件
    • needle.config.json
    • <needle-engine> 配置
    • @serializable and other decorators

在本地设备上测试

使用我们的模板时,Needle Engine 会为您运行一个本地开发服务器。只需按下播放,您的默认浏览器中就会打开一个网站,即可在您的本地设备上进行测试。要在同一网络中的其他设备上进行测试,您可能需要安装一个自签名证书(见下文)。

使用自定义设置 / 框架时,请参阅您的框架文档,了解如何运行安全的本地开发服务器。

提示

我们的本地服务器使用您本地网络中的IP地址(例如 https://192.168.0.123:3000),而不是 localhost:3000。这使您可以从移动设备、VR眼镜和同一网络中的其他机器上快速查看和测试您的项目。

我们使用HTTPS而不是旧的HTTP,因为现代强大的Web API(如WebXR)需要安全连接——S代表“安全”。

设置用于开发的自签名证书

不同的操作系统对本地开发有不同的安全要求。通常,即使使用自动生成的不可信证书,显示网站也能正常工作,但浏览器可能会警告缺少信任,并且某些功能可能无法使用。以下是摘要:

提示

建议在您的开发设备上安装受信任的自签名证书,以获得流畅的开发体验。请在本页底部查找步骤。

默认 – 使用自动生成的不可信证书在浏览器中打开项目时显示证书警告。使用 vite-plugin-basic-ssl npm包。

我们使用WebSocket连接在浏览器和本地开发服务器之间进行通信。WebSocket需要安全连接(HTTPS)才能工作。根据平台,您可能需要为本地开发设置自定义证书。Android和Windows不需要自定义证书,但iOS和MacOS需要。

操作系统在浏览器中查看
(有安全警告)
自动重新加载
Windows(✓)✓
Linux(✓)✓
Android(✓)✓
macOS(✓)❌
iOS(✓ Safari 和 Chrome,页面重新加载后)
❌ Mozilla XR Viewer
❌
Xcode Simulators(✓ 页面重新加载后)❌

使用自签名、受信任的根证书不显示安全警告。您需要在您的设备上安装生成的证书。使用 vite-plugin-mkcert npm包。

操作系统在浏览器中查看自动重新加载
Windows✓✓
Linux✓✓
Android✓✓
macOS✓✓
iOS✓✓

生成自签名开发证书

  • 在Unity/Blender中,点击“Open Workspace”以打开VS Code

  • 检查您在 vite.config.ts 文件中是否使用 vite-plugin-mkcert 而不是 vite-plugin-basic-ssl(后者不会生成我们需要的受信任根证书):

    • 打开 package.json
    • 从 devDependencies 中删除包含 "@vitejs/plugin-basic-ssl" 的行
    • 在VS Code中打开终端并运行 npm install vite-plugin-mkcert --save-dev,这将添加最新版本
    • 打开 vite.config.ts 并将 import basicSsl from '@vitejs/plugin-basic-ssl' 替换为 import mkcert from'vite-plugin-mkcert'
    • 在 plugins: [ 中,将 basicSsl(), 替换为 mkcert(),
    • package.json 现在看起来像这样:
  • 从VS Code的终端运行一次 npm run start

    • 在Windows上,这将打开一个新窗口,引导您创建和安装证书
    • 在MacOS上,终端会提示您输入密码,然后生成并安装证书。
    • 如果您收到错误 Error: Port 3000 is already in use,请关闭可能仍在Unity中运行的服务器。
  • 生成的证书将自动安装在您生成它的机器上。

  • 您可以再次停止终端进程。

  • 从现在起,在Unity/Blender中按下播放将为本地服务器使用生成的证书,并且将不再显示“安全警告”,因为您的浏览器现在信任本地连接。

在您的开发设备上安装证书

在您的开发设备上,您需要_安装_生成的证书并允许操作系统_信任_它。这在不同的操作系统上是不同的。对于每个操作系统,您都需要生成的 rootCA.pem 文件,并将其发送到您要认证的设备。

在Windows上: 在 Users/<your-user>/.vite-plugin-mkcert/rootCA.pem 中找到证书 在MacOS上: 在 Users/<your-user>/.vite-plugin-mkcert/rootCA.pem 中找到证书

将文件发送给自己(例如通过E-Mail、AirDrop、iCloud、USB、Slack等),以便您可以在您的开发设备上访问它。

在Android上安装证书

  1. 打开文件。系统将提示您安装证书。

在iOS / iPadOS / VisionOS上安装证书

  1. 打开文件。
  2. 系统将提示您将描述文件_添加_到您的设备。确认。
  3. 转到“设置”。
  4. 将有一个新的条目“描述文件”。选择它并允许该描述文件在此设备上处于_活动_状态。
  5. 在iOS / iPadOS上,您还需要允许“Root Certificate Trust”。为此,请搜索 Trust 或前往 设置 > 通用 > 关于 > 证书信任设置 并为根证书启用完全信任。

提示

证书会自动安装在您生成它的机器上。对于本地网络中的其他机器,请按照以下步骤操作以建立受信任的连接。

在另一台MacOS机器上安装证书

  1. 打开文件。Keychain Access将打开,允许您安装证书。
  2. 您可能需要将“信任”设置为“始终允许”。

在另一台Windows机器上安装证书

  1. 通过键入 Windows key + certmgr 打开 certmgr(“管理用户证书”)。
  2. 在左侧边栏中,选择“受信任的根证书颁发机构”。
  3. 右键单击“证书”,然后选择“所有任务 > 导入”。
  4. 选择 rootCA.pem 文件(您可能需要将文件类型更改为“所有文件”)并按照说明操作。

此页面由AI自动翻译

Suggest changes
最近更新:: 2025/4/22 08:44
Prev
框架、打包器、HTML
Next
部署与优化