#

luxiaotao1123

2024-04-18 778f20cec7a0e52c8839f4c1bcb788121f157782

#

 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",

 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"
  }
}
}

 public/s2wt_kamdo_industrial_divinities-transformed.glb

Binary files differ

 src/pages/base.jsx

New file
@@ -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;

 src/pages/text.jsx

New file
@@ -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')

 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: '*',