模型替换

components/header/nav.vue

@@ -11,15 +11,15 @@ const availableLocales = computed(() => {
   return (locales.value).filter(i => i.code !== locale.value)
 })
 
-// const flag: any = {
-//   en: 'i-flag-gb-4x3',
-//   zh: 'i-flag-cn-4x3',
-// }
-
 const flag: any = {
-  en: 'En',
+  en: 'i-flag-gb-4x3',
-  zh: '中',
+  zh: 'i-flag-cn-4x3',
 }
+
+// const flag: any = {
+//   en: 'En',
+//   zh: '中',
+// }
 </script>
 
 <template>
@@ -58,8 +58,8 @@ const flag: any = {
       <ABtn
         variant="text"
       >
-        <!-- <span :class="flag[locale.code]" /> -->
+        <span :class="flag[locale.code]" />
-        {{ flag[locale.code] }}
+        <!-- {{ flag[locale.code] }} -->
       </ABtn>
     </LocaleNuxtLink>
   </nav>

components/model/content.vue

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

components/model/model.vue

@@ -3,16 +3,17 @@ import { Model as LingoModel, OrbitCamera, World, useAnimation } from 'lingo3d-v
 
 $defineProps<{
   src: string
+  width:number
 }>()
 
 const anim = useAnimation({ from: 180, to: 0, duration: 5000 })
 </script>
 
 <template>
-  <div class="relative h-96 w-full bg-transparent">
+  <div class="relative h-96 w-500px bg-transparent" style="width:width+'px'">
     <World color="transparent" default-light="studio">
       <LingoModel :src="src" :y="0" :rotation-z="anim" :box-visible="false" />
-      <OrbitCamera active :z="100" :y="80" :zoom="1" auto-rotate enable-damping />
+      <OrbitCamera active :z="100" :y="80" :zoom="0.8" auto-rotate enable-damping />
     </World>
   </div>
 </template>

nuxt.config.ts

@@ -16,8 +16,12 @@ export default defineNuxtConfig({
     '@nuxt/content',
     '@nuxtjs/color-mode',
     '@vite-pwa/nuxt',
+    '@aceforth/nuxt-optimized-images',
     '@nuxt/devtools',
   ],
+  optimizedImages: {
+    optimizeImages: true
+  },
   experimental: {
     // when using generate, payload js assets included in sw precache manifest
     // but missing on offline, disabling extraction it until fixed

package.json

@@ -13,6 +13,7 @@
     "start:generate": "npx serve .output/public"
   },
   "dependencies": {
+    "@aceforth/nuxt-optimized-images": "^1.4.0",
     "@anu-vue/nuxt": "^0.13.1",
     "@jiaminghi/color": "^1.1.3",
     "lingo3d-vue": "1.0.118",
@@ -32,6 +33,8 @@
     "@nuxtjs/i18n": "8.0.0-beta.11",
     "@nuxtjs/strapi": "^1.9.1",
     "@pinia/nuxt": "^0.4.8",
+    "@unocss/eslint-config": "0.52.4",
+    "@unocss/nuxt": "0.52.4",
     "@vite-pwa/nuxt": "^0.0.7",
     "@vue-macros/nuxt": "^1.2.8",
     "@vueuse/nuxt": "^9.13.0",
@@ -40,8 +43,6 @@
     "nuxt": "^3.4.0",
     "pinia": "^2.0.34",
     "typescript": "^4.9.5",
-    "@unocss/nuxt": "0.52.4",
-    "@unocss/eslint-config": "0.52.4",
     "unocss-preset-extra": "^0.5.2",
     "unocss-preset-scrollbar": "^0.2.1",
     "unocss-preset-scrollbar-hide": "^1.0.1"

pages/index.vue

@@ -204,11 +204,9 @@ const sectionNine = useSectionNine()
 
   <!-- Section Nine -->
   <Section class="my-10 flex bg-gradient-pink">
-    <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
+    <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start max-w-720px" />
 
-    <div class="w-96">
+      <ModelContent src="/model/house/Night-City.gltf" :width="300" />
-      <ModelContent src="/model/house/scene.gltf" />
-    </div>
   </Section>
   <Divider />
 </template>

uno.config.ts

@@ -86,7 +86,7 @@ export default defineConfig({
     presetAttributify(),
     presetIcons({
       scale: 1.2,
-      // cdn: 'https://esm.sh/',
+      cdn: 'https://esm.sh/',
       // cdn:'https://cdn.skypack.dev/',
       // cdn:'https://api.iconify.design/',
       extraProperties: presetIconExtraProperties,