From 778f20cec7a0e52c8839f4c1bcb788121f157782 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 18 四月 2024 16:25:45 +0800
Subject: [PATCH] #

---
 public/s2wt_kamdo_industrial_divinities-transformed.glb |    0 
 package-lock.json                                       |   63 ++++++++++++++++++++-
 package.json                                            |    4 +
 src/pages/base.jsx                                      |   45 +++++++++++++++
 src/pages/text.jsx                                      |   59 +++++++++++++++++++
 src/router/index.jsx                                    |    4 +
 6 files changed, 170 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 852eca9..ac1d605 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,10 @@
       "dependencies": {
         "@react-three/drei": "9.92.0",
         "@react-three/fiber": "8.15.12",
+        "@react-three/postprocessing": "2.15.11",
         "@tweenjs/tween.js": "^21.0.0",
         "axios": "^1.6.2",
+        "maath": "0.10.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.15.0",
@@ -1102,6 +1104,15 @@
         }
       }
     },
+    "node_modules/@react-three/drei/node_modules/maath": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmmirror.com/maath/-/maath-0.9.0.tgz",
+      "integrity": "sha512-aAR8hoUqPxlsU8VOxkS9y37jhUzdUxM017NpCuxFU1Gk+nMaZASZxymZrV8LRSHzRk/watlbfyNKu6XPUhCFrQ==",
+      "peerDependencies": {
+        "@types/three": ">=0.144.0",
+        "three": ">=0.144.0"
+      }
+    },
     "node_modules/@react-three/fiber": {
       "version": "8.15.12",
       "resolved": "https://registry.npmmirror.com/@react-three/fiber/-/fiber-8.15.12.tgz",
@@ -1156,6 +1167,32 @@
       "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@react-three/postprocessing": {
+      "version": "2.15.11",
+      "resolved": "https://registry.npmmirror.com/@react-three/postprocessing/-/postprocessing-2.15.11.tgz",
+      "integrity": "sha512-XQJxhk/hsbzUCLagd8V4pg28iy+UMkYeFFL7BOdlSM1TgAorNzMim+Wu5zI6fbAaGMpmwk7PCbOZN5YPgD0BRQ==",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "maath": "^0.6.0",
+        "n8ao": "^1.6.6",
+        "postprocessing": "^6.32.1",
+        "three-stdlib": "^2.23.4"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": ">=8.0",
+        "react": ">=18.0",
+        "three": ">= 0.138.0"
+      }
+    },
+    "node_modules/@react-three/postprocessing/node_modules/maath": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/maath/-/maath-0.6.0.tgz",
+      "integrity": "sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==",
+      "peerDependencies": {
+        "@types/three": ">=0.144.0",
+        "three": ">=0.144.0"
       }
     },
     "node_modules/@remix-run/router": {
@@ -3696,9 +3733,9 @@
       }
     },
     "node_modules/maath": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmmirror.com/maath/-/maath-0.9.0.tgz",
-      "integrity": "sha512-aAR8hoUqPxlsU8VOxkS9y37jhUzdUxM017NpCuxFU1Gk+nMaZASZxymZrV8LRSHzRk/watlbfyNKu6XPUhCFrQ==",
+      "version": "0.10.7",
+      "resolved": "https://registry.npmmirror.com/maath/-/maath-0.10.7.tgz",
+      "integrity": "sha512-zQ2xd7dNOIVTjAS+hj22fyj1EFYmOJX6tzKjZ92r6WDoq8hyFxjuGA2q950tmR4iC/EKXoMQdSipkaJVuUHDTg==",
       "peerDependencies": {
         "@types/three": ">=0.144.0",
         "three": ">=0.144.0"
@@ -3794,6 +3831,15 @@
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
         "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/n8ao": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/n8ao/-/n8ao-1.8.1.tgz",
+      "integrity": "sha512-biKUW09KnflZpeWmbCy1gjuiyZsbeG6y+EsqV+1IDqQ1KqEydXc6nUUseZp9ZRbjvEOPnsvsjaTce8Pta0803A==",
+      "peerDependencies": {
+        "postprocessing": ">=6.30.0",
+        "three": ">=0.137"
       }
     },
     "node_modules/nanoid": {
@@ -4228,6 +4274,17 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/postprocessing": {
+      "version": "6.35.3",
+      "resolved": "https://registry.npmmirror.com/postprocessing/-/postprocessing-6.35.3.tgz",
+      "integrity": "sha512-PH0/gqVYpp+vZjmSAohG/xH0u9FpbjfCGsFMsmsZVd8XXSmqJUR7b5C9ZFE/iMrWhe+tiTOFN9WvcEdjLI8LYQ==",
+      "engines": {
+        "node": ">= 0.13.2"
+      },
+      "peerDependencies": {
+        "three": ">= 0.152.0 < 0.164.0"
+      }
+    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/potpack/-/potpack-1.0.2.tgz",
diff --git a/package.json b/package.json
index 0309d17..5e0efba 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,9 @@
     "@tweenjs/tween.js": "^21.0.0",
     "@react-three/drei": "9.92.0",
     "@react-three/fiber": "8.15.12",
+    "@react-three/postprocessing": "2.15.11",
     "axios": "^1.6.2",
+    "maath": "0.10.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
@@ -33,4 +35,4 @@
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.0"
   }
-}
+}
\ No newline at end of file
diff --git a/public/s2wt_kamdo_industrial_divinities-transformed.glb b/public/s2wt_kamdo_industrial_divinities-transformed.glb
new file mode 100644
index 0000000..a84d36e
--- /dev/null
+++ b/public/s2wt_kamdo_industrial_divinities-transformed.glb
Binary files differ
diff --git a/src/pages/base.jsx b/src/pages/base.jsx
new file mode 100644
index 0000000..fc7f556
--- /dev/null
+++ b/src/pages/base.jsx
@@ -0,0 +1,45 @@
+import { useRef, useState } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+import { Environment } from '@react-three/drei'
+
+const Box = (props) => {
+
+    const ref = useRef()
+
+    const [hovered, hover] = useState(false)
+    const [clicked, click] = useState(false)
+
+    useFrame((state, delta) => (ref.current.rotation.x += delta))
+
+    return (
+        <mesh
+            {...props}
+            ref={ref}
+            scale={clicked ? 1.5 : 1}
+            onClick={(event) => click(!clicked)}
+            onPointerOver={(event) => (event.stopPropagation(), hover(true))}
+            onPointerOut={(event) => hover(false)}>
+            <boxGeometry args={[1, 1, 1]} />
+            <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+        </mesh>
+    )
+}
+
+const Base = () => {
+    return (
+        <div style={{ height: '500px', width: '500px' }}>
+            <Canvas>
+                <ambientLight intensity={Math.PI / 2} />
+                <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+                <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+                <Box position={[0, 0, 0]} />
+                <OrbitControls />
+                <Environment preset="city" />
+            </Canvas>
+        </div>
+
+    )
+}
+
+export default Base;
\ No newline at end of file
diff --git a/src/pages/text.jsx b/src/pages/text.jsx
new file mode 100644
index 0000000..3e374d6
--- /dev/null
+++ b/src/pages/text.jsx
@@ -0,0 +1,59 @@
+import { useRef } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { useGLTF, Stage, Grid, OrbitControls, Environment } from '@react-three/drei'
+import { EffectComposer, Bloom, ToneMapping } from '@react-three/postprocessing'
+import { easing } from 'maath'
+
+export default function Text() {
+  return (
+    <Canvas flat shadows camera={{ position: [-15, 0, 10], fov: 25 }}>
+      <fog attach="fog" args={['black', 15, 22.5]} />
+      <Stage intensity={0.5} environment="city" shadows={{ type: 'accumulative', bias: -0.001, intensity: Math.PI }} adjustCamera={false}>
+        {/* <Kamdo rotation={[0, Math.PI, 0]} /> */}
+      </Stage>
+      <Grid renderOrder={-1} position={[0, -1.85, 0]} infiniteGrid cellSize={0.6} cellThickness={0.6} sectionSize={3.3} sectionThickness={1.5} sectionColor={[0.5, 0.5, 10]} fadeDistance={30} />
+      <OrbitControls autoRotate autoRotateSpeed={0.05} enableZoom={false} makeDefault minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} />
+      <EffectComposer disableNormalPass>
+        <Bloom luminanceThreshold={2} mipmapBlur />
+        {/* <ToneMapping /> */}
+      </EffectComposer>
+      <Environment background preset="sunset" blur={0.8} />
+    </Canvas>
+  )
+}
+
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx gltfjsx@6.1.0 s2wt_kamdo_industrial_divinities.glb --transform --simplify
+Author: Hansalex (https://sketchfab.com/Hansalex)
+License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+Source: https://sketchfab.com/3d-models/s2wt-kamdo-industrial-divinities-f503b70ac05e49a38c81100d71599a1b
+Title: S2WT "Kamdo" (Industrial Divinities)
+*/
+
+function Kamdo(props) {
+  const head = useRef()
+  const stripe = useRef()
+  const light = useRef()
+  const { nodes, materials } = useGLTF('/s2wt_kamdo_industrial_divinities-transformed.glb')
+  useFrame((state, delta) => {
+    const t = (1 + Math.sin(state.clock.elapsedTime * 2)) / 2
+    stripe.current.color.setRGB(2 + t * 20, 2, 20 + t * 50)
+    easing.dampE(head.current.rotation, [0, state.pointer.x * (state.camera.position.z > 1 ? 1 : -1), 0], 0.4, delta)
+    light.current.intensity = 1 + t * 4
+  })
+  return (
+    <group {...props}>
+      <mesh castShadow receiveShadow geometry={nodes.body001.geometry} material={materials.Body} />
+      <group ref={head}>
+        <mesh castShadow receiveShadow geometry={nodes.head001.geometry} material={materials.Head} />
+        <mesh castShadow receiveShadow geometry={nodes.stripe001.geometry}>
+          <meshBasicMaterial ref={stripe} toneMapped={false} />
+          <pointLight ref={light} intensity={1} color={[10, 2, 5]} distance={2.5} />
+        </mesh>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/s2wt_kamdo_industrial_divinities-transformed.glb')
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 738bd08..eae2670 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -2,6 +2,8 @@
 
 import App from '@/App'
 import NotFound from '@/pages/not-found'
+import Base from '@/pages/base'
+import Text from '@/pages/text'
 
 // createBrowserRouter -> history
 // createHashRouter -> hash (#)
@@ -9,7 +11,7 @@
 const router = createBrowserRouter([
     {
         path: '/',
-        element: <App />,
+        element: <Text />,
     },
     {
         path: '*',

--
Gitblit v1.9.1