From 61f807689d47109f7ad2fb83fd562303f693fe51 Mon Sep 17 00:00:00 2001
From: Sune Bear <hi@sunebear.com>
Date: Sat, 14 Oct 2023 17:24:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B1=95=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=20Cases?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/landing-sketch/gallery.module.ts   | 80 ++++++++++---------
 .../landing-sketch/project-case.object.ts     |  7 +-
 2 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/components/landing-sketch/gallery.module.ts b/components/landing-sketch/gallery.module.ts
index 53a9013..a11fabd 100644
--- a/components/landing-sketch/gallery.module.ts
+++ b/components/landing-sketch/gallery.module.ts
@@ -5,8 +5,8 @@ import { LAYERS } from './common'
 import { Module } from './module'
 import { ProjectCaseOptions, ProjectCaseObject } from './project-case.object'
 
-const CASE_GAP = 1
-const VIEWPORT_SIZE = 2.2
+const CASE_GAP = 1.5
+const VIEWPORT_SIZE = 1.5
 
 const projectCasesConfig: ProjectCaseOptions[] = [
   {
@@ -22,25 +22,25 @@ const projectCasesConfig: ProjectCaseOptions[] = [
     // scale: 0.28,
     // rotation: [ -0.1, -0.52, 0],
     // position: [0, -0, -0.2]
-    scale: 0.6,
+    scale: 0.57,
     rotation: [ -0.1, -0.36, 0],
     position: [0, -0.5, 0]
   },
 
-  {
-    mockupModelUrl: '/cases/rct-dna/mockup.glb',
-    recordVideoUrl: '/cases/rct-dna/record.mp4',
-    recordVideoRatio: 720/720,
-    name: 'rct DNA',
-    meta: {
-      year: 2019
-    },
-    flipY: false,
-    modelSize: 1.1,
-    scale: 0.28,
-    rotation: [ -0.1, -0.3, 0],
-    position: [0, -0.25, 0]
-  },
+  // {
+  //   mockupModelUrl: '/cases/rct-dna/mockup.glb',
+  //   recordVideoUrl: '/cases/rct-dna/record.mp4',
+  //   recordVideoRatio: 720/720,
+  //   name: 'rct DNA',
+  //   meta: {
+  //     year: 2019
+  //   },
+  //   flipY: false,
+  //   modelSize: 1.1,
+  //   scale: 0.28,
+  //   rotation: [ -0.1, -0.3, 0],
+  //   position: [0, -0.25, 0]
+  // },
 
   {
     mockupModelUrl: '/cases/mirrorworld-space/mockup.glb',
@@ -51,10 +51,10 @@ const projectCasesConfig: ProjectCaseOptions[] = [
       year: 2021
     },
     flipY: false,
-    modelSize: 1.6,
-    scale: 0.7,
+    modelSize: 2,
+    scale: 0.85,
     rotation: [ -0.1, -0.4, 0],
-    position: [0, -0.5, 0]
+    position: [0, -0.73, 0]
   },
 
   {
@@ -66,26 +66,26 @@ const projectCasesConfig: ProjectCaseOptions[] = [
       year: 2022
     },
     flipY: false,
-    modelSize: 1.8,
-    scale: 0.4,
+    modelSize: 2.2,
+    scale: 0.88,
     rotation: [ -0.1, -0.45, 0],
-    position: [0, -0.3, 0]
+    position: [0, -0.747, 0]
   },
 
-  {
-    mockupModelUrl: '/cases/affine-landing-v2/mockup.glb',
-    recordVideoUrl: '/cases/affine-landing-v2/record.mp4',
-    recordVideoRatio: 1222/638,
-    name: 'AFFiNE Landing V2',
-    meta: {
-      year: 2023
-    },
-    flipY: false,
-    modelSize: 1.7,
-    scale: 0.7,
-    rotation: [ -0.1, -0.4, 0],
-    position: [0, -0.48, 0]
-  }
+  // {
+  //   mockupModelUrl: '/cases/affine-landing-v2/mockup.glb',
+  //   recordVideoUrl: '/cases/affine-landing-v2/record.mp4',
+  //   recordVideoRatio: 1222/638,
+  //   name: 'AFFiNE Landing V2',
+  //   meta: {
+  //     year: 2023
+  //   },
+  //   flipY: false,
+  //   modelSize: 2.3,
+  //   scale: 0.7,
+  //   rotation: [ -0.1, -0.4, 0],
+  //   position: [0, -0.48, 0]
+  // }
 ]
 
 export class GalleryModule extends Module {
@@ -146,6 +146,12 @@ export class GalleryModule extends Module {
     })
   }
 
+  resize(width: number, height: number) {
+    const { isMobile } = useDevice()
+    const scale = isMobile ? -1 : 0
+    this.group.position.z = scale
+  }
+
   update (delta: number) {
 
   }
diff --git a/components/landing-sketch/project-case.object.ts b/components/landing-sketch/project-case.object.ts
index 1bcb0f6..b33a858 100644
--- a/components/landing-sketch/project-case.object.ts
+++ b/components/landing-sketch/project-case.object.ts
@@ -68,8 +68,11 @@ export class ProjectCaseObject {
     videoElement.autoplay = true
     videoElement.loop = true
     videoElement.muted = true
+    videoElement.crossOrigin = 'anonymous'
     videoElement.src = this.options.recordVideoUrl
-    videoElement.play()
+    setTimeout(() => {
+      videoElement.play()
+    })
     this.videoTexture = new THREE.VideoTexture(videoElement)
     this.videoTexture.flipY = this.options.flipY || false
     // this.videoTexture.magFilter = THREE.NearestFilter
@@ -124,7 +127,7 @@ export class ProjectCaseObject {
       },
       uAlpha: {
         //opacity
-        value: 0.94
+        value: 0.99
       }
     }
     const material = new THREE.ShaderMaterial({