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