diff --git a/index.html b/index.html index 703c821..742ed3b 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@
- + diff --git a/public/assets/models/Butterfly.glb b/public/assets/models/Butterfly.glb new file mode 100644 index 0000000..99425a0 Binary files /dev/null and b/public/assets/models/Butterfly.glb differ diff --git a/public/assets/models/Map.glb b/public/assets/models/Map.glb new file mode 100644 index 0000000..c3f5ffa Binary files /dev/null and b/public/assets/models/Map.glb differ diff --git a/public/assets/models/Ocean.glb b/public/assets/models/Ocean.glb index 08cfde5..567de7a 100644 Binary files a/public/assets/models/Ocean.glb and b/public/assets/models/Ocean.glb differ diff --git a/public/assets/models/WindMill.glb b/public/assets/models/WindMill.glb index 70f5ce7..a6c62b1 100644 Binary files a/public/assets/models/WindMill.glb and b/public/assets/models/WindMill.glb differ diff --git a/public/assets/svg/favicon.svg b/public/assets/svg/favicon.svg new file mode 100644 index 0000000..9be8bfd --- /dev/null +++ b/public/assets/svg/favicon.svg @@ -0,0 +1,10 @@ + + diff --git a/src/components/Banjo.jsx b/src/components/Banjo.jsx index df7f5dc..11834b1 100644 --- a/src/components/Banjo.jsx +++ b/src/components/Banjo.jsx @@ -10,7 +10,7 @@ const Banjo = (props) => { useFrame((state, delta) => { const time = state.clock.getElapsedTime() const positionFactor = Math.sin(time * seed) * 0.1 - banjoRef.current.position.y = 10.6 + positionFactor + banjoRef.current.position.y = 12.6 + positionFactor banjoRef.current.rotation.y += 0.005 }) return ( diff --git a/src/components/BirdEyeViewSign.jsx b/src/components/BirdEyeViewSign.jsx index 7cc4087..4a60346 100644 --- a/src/components/BirdEyeViewSign.jsx +++ b/src/components/BirdEyeViewSign.jsx @@ -3,20 +3,21 @@ import { useGLTF } from '@react-three/drei' import { useFrame } from '@react-three/fiber' import { MeshStandardMaterial } from 'three' -const BirdEyeViewSign = ({ color, ...props }) => { +const BirdEyeViewSign = ({ animation = true, color, ...props }) => { const signRef = useRef() const { nodes, materials } = useGLTF('../assets/models/BirdEyeViewSign.glb') const seed = 0.8 // Animate the tree useFrame((state, delta) => { - const time = state.clock.getElapsedTime() - const positionFactor = Math.sin(time * seed) * 0.1 - signRef.current.position.y = 0.5 + positionFactor - signRef.current.rotation.y += 0.005 + if (animation === true) { + const time = state.clock.getElapsedTime() + const positionFactor = Math.sin(time * seed) * 0.1 + signRef.current.position.y = 0.5 + positionFactor + signRef.current.rotation.y += 0.005 + } }) //Pick color - Media #fa953b, History - #306fc5, Hermeneutics - #9e43c8, Digital landscapes - #ed407d, Intro - #7c7c7c - console.log('COLOR_SIGNM', color) const signColor = new MeshStandardMaterial({ ...materials.Media, color: color, diff --git a/src/components/Butterfly.jsx b/src/components/Butterfly.jsx new file mode 100644 index 0000000..2f9086d --- /dev/null +++ b/src/components/Butterfly.jsx @@ -0,0 +1,77 @@ +import React, { useRef, useEffect, useState } from 'react' +import { useAnimations, useGLTF } from '@react-three/drei' +import { useFrame } from '@react-three/fiber' +import { MeshStandardMaterial, DoubleSide } from 'three' + +export function Butterfly(props, color = { color }) { + const group = useRef() + const sockSpin = useRef() + const { nodes, materials, animations } = useGLTF('../assets/models/Butterfly.glb') + const { actions } = useAnimations(animations, group) + + const colors = ['#da5df9', '#f95dca', '#f95d7c', '#f98c5d', '#f9da5d'] + const [currentColor, setCurrentColor] = useState(colors[0]) + + useFrame(() => { + // Update animations + Object.values(actions).map((action) => { + action.play() + return null + }) + }) + + const pickRandomColor = () => { + const randomIndex = Math.floor(Math.random() * colors.length) + setCurrentColor(colors[randomIndex]) + } + + useEffect(() => { + pickRandomColor() + return () => {} + }, [setCurrentColor]) + + const wingMaterial = new MeshStandardMaterial({ + ...materials.Fabric, + color: currentColor, + side: DoubleSide, + }) + + return ( +