unity如何放到html_Unity内容（WebGL）嵌入HTML页面方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

unity如何放到html_Unity内容（WebGL）嵌入HTML页面方法

2025-11-15

浏览次数：次

返回列表

将Unity项目发布为WebGL后，提取Build和TemplateData中的核心文件，通过script标签引入.loader.js，并在HTML中创建canvas容器，调用createUnityInstance加载游戏内容，确保服务器环境支持HTTP/HTTPS，即可实现嵌入。

unity如何放到html_unity内容（webgl）嵌入html页面方法

Unity WebGL内容嵌入HTML页面的方法

将Unity项目发布为WebGL格式后，可以通过简单的方式将其嵌入到自定义的HTML页面中。这种方法适合需要对页面布局、样式或交互进行额外控制的场景。

1. 导出Unity WebGL项目

在Unity编辑器中完成开发后：

进入File > Build Settings
选择WebGL平台，点击Switch Platform
点击Build按钮，导出项目到指定文件夹

导出后会生成多个文件，包括index.html、Build、TemplateData等目录和文件。

2. 提取核心资源文件

若想将Unity内容嵌入已有HTML页面，需提取以下关键文件：

立即学习“前端免费学习笔记（深入）”；

风车Ai翻译

跨境电商必备AI翻译工具

407 查看详情风车Ai翻译

Build/your_project_name.framework.js
Build/your_project_name.wasm
Build/your_project_name.data
TemplateData/style.css（可选，用于样式）

这些文件是运行Unity WebGL内容所必需的。

3. 在HTML中嵌入Unity内容

创建或修改目标HTML文件，在

中添加一

个容器，并引入Unity加载脚本：

<div id="unity-container" style="width: 960px; height: 600px; margin: auto;">
  <canvas id="unity-canvas"></canvas>
</div>

<script src="Build/your_project_name.loader.js"></script>
<script>
  const container = document.getElementById("unity-container");
  const canvas = document.getElementById("unity-canvas");

  // 设置缩放适配
  canvas.style.width = "100%";
  canvas.style.height = "100%";

  // 加载Unity内容
  createUnityInstance(canvas, {
    dataUrl: "Build/your_project_name.data",
    frameworkUrl: "Build/your_project_name.framework.js",
    codeUrl: "Build/your_project_name.wasm",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "YourCompany",
    productName: "YourGame",
    productVersion: "1.0"
  }).then(unityInstance => {
    // 可选：添加加载进度条处理
    window unityInstance = unityInstance;
  }).catch(errorMessage => {
    alert(errorMessage);
  });
</script>

确保路径正确指向你导出的文件位置。