chore: unity页面植入

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

components/model/content.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+$defineProps<{
+  src: string
+}>()
+</script>
+
+<template>
+  <ClientOnly>
+    <Model :src="src" />
+  </ClientOnly>
+</template>

components/model/model.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { Model as LingoModel, OrbitCamera, World, useAnimation } from 'lingo3d-vue'
 
+$defineProps<{
+  src: string
+}>()
+
 const anim = useAnimation({ from: 180, to: 0, duration: 5000 })
 </script>
 
 <template>
-  <div class="relative h-96 w-96 bg-transparent">
+  <div class="relative h-96 w-full bg-transparent">
     <World color="transparent" default-light="studio">
-      <LingoModel src="/model/apple_watch/scene.gltf" :y="0" :rotation-z="anim" :box-visible="false" />
+      <LingoModel :src="src" :y="0" :rotation-z="anim" :box-visible="false" />
       <OrbitCamera active :z="100" :y="80" :zoom="1" auto-rotate enable-damping />
     </World>
   </div>

config/pages/home/use-carousel.ts

@@ -5,7 +5,7 @@ export function useCarousel() {
       description: 'home.carousel.description[0]',
       link: {
         name: 'home.carousel.link[0]',
-        href: '/blog/creatorpartyverse',
+        href: '/release/creatorpartyverse',
       },
       img: '/imgs/Home.Creatorverse.jpg',
     },
@@ -14,7 +14,7 @@ export function useCarousel() {
       description: 'home.carousel.description[1]',
       link: {
         name: 'home.carousel.link[1]',
-        href: '/blog/holowater',
+        href: '/release/holowater',
       },
       img: '/imgs/News/HoloWater/20230524162443.jpg',
     },

config/pages/home/use-section-three.ts

@@ -11,12 +11,12 @@ export function useSectionThree() {
       {
         topic: 'home.sectionThree.contentPrimary.topic[0]',
         img: '/imgs/Home-Stories/ParcelCreatorverse.jpg',
-        href: 'blog/creatorpartyverse',
+        href: 'release/creatorpartyverse',
       },
       {
         topic: 'home.sectionThree.contentPrimary.topic[1]',
         img: '/imgs/Home-Stories/HoloWater.jpg',
-        href: 'blog/holowater',
+        href: 'release/holowater',
       },
     ],
     contentSecondary: [
@@ -24,7 +24,7 @@ export function useSectionThree() {
       {
         topic: 'home.sectionThree.contentSecondary.topic[0]',
         img: '/imgs/Home-Stories/NeverDrinkAlone.jpg',
-        href: 'blog/bar-symphony',
+        href: 'release/bar-symphony',
       }, {
         topic: 'home.sectionThree.contentSecondary.topic[1]',
         img: '/imgs/Home-Stories/RIBAChangan.jpg',

content/en/bar-symphony.md

@@ -36,6 +36,8 @@ publish: "07/10/2022"
   由TOPVERSE设计的元宇宙建筑《创作者聚会（Creator Party-verse）》作为Web 3.0资讯平台深潮TECH FLOW、全球交易量最大（以美元计算）且拥有近2千万全球用户的加密货币交易平台KUCOIN、以及P2E平台FitR三家赛道头部项目方的主阵地，与全球的Web 3.0去中心化网络平台用户一同进行TOKEN2049的元宇宙盛宴。
 
 
+:model-content{src='/model/apple_watch/scene.gltf'}
+
 
 <p align="center">
 <img src="./public/topverse.svg" width="600"/>

content/zh/bar-symphony.md

@@ -30,6 +30,9 @@ publish: "07/10/2022"
 </p>
 此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。
 
+:model-content{src='/model/apple_watch/scene.gltf'}
+
+
 
 <p align="center">
 <img src="./public/topverse.svg" width="600"/>

nuxt.config.ts

@@ -24,6 +24,11 @@ export default defineNuxtConfig({
     inlineSSRStyles: false,
     renderJsonPayloads: true,
   },
+
+  components: [{
+    path: '~/components',
+    global: true,
+  }],
   anu: {
     // initialTheme: 'dark',
     themes: {

package.json

@@ -18,7 +18,9 @@
     "lingo3d-vue": "1.0.118",
     "sass": "^1.62.1",
     "swiper": "^9.2.4",
-    "vue-tsc": "^1.2.0"
+    "unity-webgl": "^3.4.2",
+    "vue-tsc": "^1.2.0",
+    "vue-unity-webgl": "^1.2.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.4",

pages/[...all].vue

@@ -10,7 +10,7 @@ const router = useRouter()
     <div>Not found</div>
     <div class="bg-primary">
       <ABtn>test</ABtn>
-      <button text-sm btn m="3 t8" @click="router.back()">
+      <button btn text-sm m="3 t8" @click="router.back()">
         Back
       </button>
     </div>

pages/index.vue

@@ -34,11 +34,11 @@ const sectionNine = useSectionNine()
 
   <!-- Section Two -->
   <Section ref="sectionTwoEl" class="border-b-2 border-dark/40 border-b-solid from-dark/30 bg-gradient-to-t dark:(border-light-50/10 from-light/5)">
-    <div v-for="(item,i) in sectionTwo.content" :key="i" class="pb-8" >
-      <Typography  :title=" $t(item.title) " />
+    <div v-for="(item, i) in sectionTwo.content" :key="i" class="pb-8">
+      <Typography :title=" $t(item.title) " />
 
       <div class="grid-row grid-cols-2 gap-18 md:(grid-cols-3 gap-10)" :class="`lg:grid-cols-${item.imgs.length} lg:gap-2 `">
-      <!-- <Typography  :title=" $t(item.title) " /> -->
+        <!-- <Typography  :title=" $t(item.title) " /> -->
         <a
           v-for="(img, j) in item.imgs"
           :key="j"
@@ -203,13 +203,11 @@ const sectionNine = useSectionNine()
   <Divider />
 
   <!-- Section Nine -->
-  <Section class="my-10 bg-gradient-pink flex">
+  <Section class="my-10 flex bg-gradient-pink">
     <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
-    
-    <div  >
-      <ClientOnly>
-        <Model />
-      </ClientOnly>
+
+    <div class="w-96">
+      <ModelContent src="/model/apple_watch/scene.gltf" />
     </div>
   </Section>
   <Divider />

pages/land.vue

@@ -1,3 +1,34 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import UnityWebgl from 'unity-webgl'
+
+const canvasRef = ref(null)
+let unityComponent = null
+
+onMounted(() => {
+  if (!unityComponent) {
+    unityComponent = new UnityWebgl(canvasRef.value, {
+      loaderUrl:
+        '/unity/test/Build/Builds.loader.js',
+      dataUrl:
+        '/unity/test/Build/Builds.data',
+      frameworkUrl:
+        '/unity/test/Build/Builds.framework.js',
+      codeUrl:
+        '/unity/test/Build/Builds.wasm',
+    })
+  }
+})
+onBeforeUnmount(() => {
+  if (unityComponent) {
+    unityComponent.destroy()
+    unityComponent = null
+  }
+})
+</script>
+
 <template>
-  asds
+  <div class="h-screen w-screen">
+    <canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" />
+  </div>
 </template>

public/unity/test/StreamingAssets/UnityServicesProjectConfiguration.json

@@ -0,0 +1 @@
+{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.4.0","m_IsReadOnly":true}]}

public/unity/test/TemplateData/style.css

@@ -0,0 +1,16 @@
+body { padding: 0; margin: 0 }
+#unity-container { position: absolute }
+#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
+#unity-container.unity-mobile { width: 100%; height: 100% }
+#unity-canvas { background: #231F20 }
+.unity-mobile #unity-canvas { width: 100%; height: 100% }
+#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
+#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
+#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
+#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
+#unity-footer { position: relative }
+.unity-mobile #unity-footer { display: none }
+#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
+#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
+#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
+#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

public/unity/test/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Unity WebGL Player | TOPOLand</title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+  </head>
+  <body>
+    <div id="unity-container" class="unity-desktop">
+      <canvas id="unity-canvas" width=960 height=600></canvas>
+      <div id="unity-loading-bar">
+        <div id="unity-logo"></div>
+        <div id="unity-progress-bar-empty">
+          <div id="unity-progress-bar-full"></div>
+        </div>
+      </div>
+      <div id="unity-warning"> </div>
+      <div id="unity-footer">
+        <div id="unity-webgl-logo"></div>
+        <div id="unity-fullscreen-button"></div>
+        <div id="unity-build-title">TOPOLand</div>
+      </div>
+    </div>
+    <script>
+      var container = document.querySelector("#unity-container");
+      var canvas = document.querySelector("#unity-canvas");
+      var loadingBar = document.querySelector("#unity-loading-bar");
+      var progressBarFull = document.querySelector("#unity-progress-bar-full");
+      var fullscreenButton = document.querySelector("#unity-fullscreen-button");
+      var warningBanner = document.querySelector("#unity-warning");
+
+      // Shows a temporary message banner/ribbon for a few seconds, or
+      // a permanent error message on top of the canvas if type=='error'.
+      // If type=='warning', a yellow highlight color is used.
+      // Modify or remove this function to customize the visually presented
+      // way that non-critical warnings and error messages are presented to the
+      // user.
+      function unityShowBanner(msg, type) {
+        function updateBannerVisibility() {
+          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
+        }
+        var div = document.createElement('div');
+        div.innerHTML = msg;
+        warningBanner.appendChild(div);
+        if (type == 'error') div.style = 'background: red; padding: 10px;';
+        else {
+          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
+          setTimeout(function() {
+            warningBanner.removeChild(div);
+            updateBannerVisibility();
+          }, 5000);
+        }
+        updateBannerVisibility();
+      }
+
+      var buildUrl = "Build";
+      var loaderUrl = buildUrl + "/Builds.loader.js";
+      var config = {
+        dataUrl: buildUrl + "/Builds.data.unityweb",
+        frameworkUrl: buildUrl + "/Builds.framework.js.unityweb",
+        codeUrl: buildUrl + "/Builds.wasm.unityweb",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "TOPVERSE® Lab",
+        productName: "TOPOLand",
+        productVersion: "0.1",
+        showBanner: unityShowBanner,
+      };
+
+      // By default Unity keeps WebGL canvas render target size matched with
+      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
+      // Set this to false if you want to decouple this synchronization from
+      // happening inside the engine, and you would instead like to size up
+      // the canvas DOM size and WebGL render target sizes yourself.
+      // config.matchWebGLToCanvasSize = false;
+
+      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+        // Mobile device style: fill the whole browser client area with the game canvas:
+
+        var meta = document.createElement('meta');
+        meta.name = 'viewport';
+        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
+        document.getElementsByTagName('head')[0].appendChild(meta);
+        container.className = "unity-mobile";
+
+        // To lower canvas resolution on mobile devices to gain some
+        // performance, uncomment the following line:
+        // config.devicePixelRatio = 1;
+
+        canvas.style.width = window.innerWidth + 'px';
+        canvas.style.height = window.innerHeight + 'px';
+
+        unityShowBanner('WebGL builds are not supported on mobile devices.');
+      } else {
+        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
+
+        canvas.style.width = "960px";
+        canvas.style.height = "600px";
+      }
+
+      loadingBar.style.display = "block";
+
+      var script = document.createElement("script");
+      script.src = loaderUrl;
+      script.onload = () => {
+        createUnityInstance(canvas, config, (progress) => {
+          progressBarFull.style.width = 100 * progress + "%";
+        }).then((unityInstance) => {
+          loadingBar.style.display = "none";
+          fullscreenButton.onclick = () => {
+            unityInstance.SetFullscreen(1);
+          };
+        }).catch((message) => {
+          alert(message);
+        });
+      };
+      document.body.appendChild(script);
+    </script>
+  </body>
+</html>