update

Author: anig1scur

src/app.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Songti SC", "STSong", serif;
+  --font-serif: "Songti SC", "STSong", serif;
 }
 
 body {
@@ -10,7 +10,7 @@ body {
 #photo-overlay-container {
   @apply absolute w-full h-full pointer-events-none overflow-hidden left-0 top-0;
 }
-
+ 
 .draggable-photo {
       --shadow-offset: 5px;
       --shadow-color: #eee;

src/components/WikiHeader.svelte

@@ -21,6 +21,11 @@
     scroll();
   }
 
+  $: if (!currentPage) {
+    visible = false;
+    showModal = false;
+  }
+
   async function scroll() {
     if (!textEl) return;
     gsap.killTweensOf(textEl);
@@ -77,7 +82,7 @@
     >
       {@html Scroll}
     </button>
-    <div class="relative overflow-hidden flex-1 h-full">
+    <div class="relative overflow-hidden flex-1 h-full -ml-2 -mr-2">
       <div
         bind:this={textEl}
         class="absolute whitespace-nowrap text-sm lg:text-base will-change-transform top-0 left-12 h-full flex items-center"
@@ -100,13 +105,13 @@
 {/if}
 {#if showModal}
   <div
-    class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-lg"
+    class="fixed inset-0 z-50 bg-black/60 flex items-center justify-center backdrop-blur-lg  will-change-transform will-change-opacity"
     id="wiki-modal"
-    transition:fade={{duration: 150}}
+    transition:fade={{duration: 200}}
   >
     <div
       class="rounded-lg px-4 md:px-20 text-[var(--textColor)] text-center overflow-y-auto py-6 max-h-[90vh]"
-      transition:fly={{y: 20, duration: 300}}
+      transition:fly={{y: 20, duration: 200}}
     >
       <div class="space-y-4 text-2xl lg:text-4xl leading-9 md:leading-14 font-sans italic">
         {#each lines as line}

src/lib/BookScene.ts

@@ -37,8 +37,8 @@ export class BookScene {
   private normalCameraZ: number = 6;
   private closedCameraZ: number = 4;
 
-  private initialCameraOffset = isDev() ? new THREE.Vector3(0, 0, 0) : new THREE.Vector3(5, -5, -4);
-  private initialCameraUp = isDev() ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(-2, 3, 3);
+  private initialCameraOffset = isDev() ? new THREE.Vector3(0, 0, 0) : new THREE.Vector3(4, -4, -2);
+  private initialCameraUp = isDev() ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(-2, 4, 3);
   // FIXME: mobile dev 视角有问题
 
   public openingAnimationStatus: 'none' | 'playing' | 'played' = isDev() ? 'played' : 'none';
@@ -81,11 +81,14 @@ export class BookScene {
 
     this.camera.position.add(this.initialCameraOffset);
     this.camera.up.copy(this.initialCameraUp);
-    this.camera.lookAt(0, 0, 0);
+
+    this.camera.lookAt(
+      isDev() ? new THREE.Vector3(0, 0, 0) :
+        this.isMobile ? new THREE.Vector3(1.2, 0, 0) : new THREE.Vector3(0, 2, -2));
 
     // helper
-    // const axesHelper = new THREE.AxesHelper(5);
-    // this.scene.add(axesHelper);
+    const axesHelper = new THREE.AxesHelper(5);
+    this.scene.add(axesHelper);
 
   }
 
@@ -166,16 +169,16 @@ export class BookScene {
     const targetLookAt = new THREE.Vector3(config.pageWidth / 2, targetCameraY, 0);
     const targetUp = new THREE.Vector3(0, 1, 0);
 
-    const currentLookAt = new THREE.Vector3(0, 0, 0);
+    const currentLookAt = this.camera.getWorldDirection(new THREE.Vector3()).clone().add(this.camera.position);
     const currentUp = this.camera.up.clone();
 
     const tl = gsap.timeline({
       onComplete: () => {
         this.openingAnimationStatus = 'played';
       },
       onUpdate: () => {
-        this.camera.up.copy(currentUp);
         this.camera.lookAt(currentLookAt);
+        this.camera.up.copy(currentUp);
       },
       defaults: {
         duration: 2.5,

src/utils/env.ts

@@ -1,7 +1,8 @@
 
 export function isDev() {
+  // return false;
   try {
-    return import.meta.env.DEV;
+    return import.meta.env.DEV ;
   } catch {
     return false;
   }