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