Merge branch 'master' of github.com:C2DH/zoomland

C2DH · Aug 7, 2023 · d6512a4 · d6512a4
2 parents 6af1e1e + fcc4dfd
commit d6512a4
Show file tree

Hide file tree

Showing 43 changed files with 1,464 additions and 821 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
  <meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <link rel="icon" type="image/svg+xml" href="/assets/svg/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/public/assets/models/Butterfly.glb b/public/assets/models/Butterfly.glb
diff --git a/public/assets/models/Map.glb b/public/assets/models/Map.glb
diff --git a/public/assets/models/Ocean.glb b/public/assets/models/Ocean.glb
diff --git a/public/assets/models/WindMill.glb b/public/assets/models/WindMill.glb
diff --git a/public/assets/svg/favicon.svg b/public/assets/svg/favicon.svg
diff --git 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
@@ -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
@@ -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 (
+ <group ref={group} {...props} dispose={null}>
+ <group name="Scene">
+ <mesh
+ name="Body"
+ castShadow
+ receiveShadow
+ geometry={nodes.Body.geometry}
+ material={materials.Body}
+ rotation={[-Math.PI / 4, 0, 0]}
+ scale={[0.86, 0.279, 0.279]}
+ />
+ <mesh
+ name="Left_wing"
+ castShadow
+ receiveShadow
+ geometry={nodes.Left_wing.geometry}
+ material={wingMaterial}
+ position={[0.159, -0.002, -0.269]}
+ rotation={[1.222, 0, Math.PI]}
+ scale={-1}
+ />
+ <mesh
+ name="Right_wing"
+ castShadow
+ receiveShadow
+ geometry={nodes.Right_wing.geometry}
+ material={wingMaterial}
+ position={[0.159, -0.002, 0.269]}
+ rotation={[-1.222, 0, 0]}
+ />
+ </group>
+ </group>
+ )
+}
+
+useGLTF.preload('../assets/models/Butterfly.glb')
+
+export default Butterfly
diff --git a/src/components/Clouds.jsx b/src/components/Clouds.jsx
@@ -9,7 +9,7 @@ const Clouds = ({ count = 30 }) => {
  const items = useRef()
 
  const cloudMaterial = new MeshStandardMaterial({
- // transparent: true,
+ transparent: true,
  depthWrite: false,
  opacity: 0.7,
  })

diff --git a/src/components/DialogueCard.jsx b/src/components/DialogueCard.jsx
@@ -20,7 +20,7 @@ const DialogueCard = ({
  style={{
  position: 'absolute',
  right: '0.7rem',
- top: '3.1rem',
+ top: '0.7rem',
  transformOrigin: 'center center',
  transform: 'scale(0.8) rotate(90deg)',
  }}

diff --git a/src/components/FragmentShader.jsx b/src/components/FragmentShader.jsx
@@ -1,12 +1,8 @@
 const fragmentShader = `
-uniform float u_intensity;
-uniform float u_time;
-varying vec2 vUv;
-varying float vDisplacement;
-void main() {
- float distort = 2.0 * vDisplacement * u_intensity * sin(vUv.y * 2.0 + u_time);
- vec3 color = vec3(abs(vUv - 0.5) * 1.0 * (1.0 - distort), 1.5);
- gl_FragColor = vec4(color, 2);
+precision mediump float;
+void main ()
+{
+ gl_FragColor = vec4(0.0, 0.3, 0.6, 0.5);
 }
 `
 

diff --git a/src/components/Grass.jsx b/src/components/Grass.jsx
@@ -1,15 +1,15 @@
 import { useEffect, useState, useRef } from 'react'
-import { useGLTF } from '@react-three/drei'
+import { useGLTF, MeshDistortMaterial } from '@react-three/drei'
 import instances from '../data/lawn'
-import { Object3D } from 'three'
+import { Object3D, Vector3, DoubleSide } from 'three'
 import { useFrame } from '@react-three/fiber'
 
 const Grass = (props) => {
  const count = instances.length
  const { nodes, materials } = useGLTF('../assets/models/Grass.glb')
  const [o3d] = useState(() => new Object3D())
  const items = useRef()
- const grassRef = useRef()
+
  // const instances = nodes
  // ? {
  // Grass: nodes.Grass1001,
@@ -25,7 +25,8 @@ const Grass = (props) => {
  // grassRef.current.rotation.y = bendFactor * 0.06
  // })
 
- useEffect(() => {
+ const seed = Math.random() + 0.8
+ useFrame((state) => {
  if (!items.current) return
  const mesh = items.current
 
@@ -37,15 +38,22 @@ const Grass = (props) => {
  mesh.setMatrixAt(i, o3d.matrix)
  }
  mesh.instanceMatrix.needsUpdate = true
- }, [])
+
+ mesh.castShadow = true
+ mesh.receiveShadow = true
+ })
 
  return (
  <group {...props} dispose={null}>
- <instancedMesh
- frustumCulled={false}
- ref={items}
- args={[nodes.Grass.geometry, materials['Grass_light'], count]}
- ></instancedMesh>
+ <instancedMesh frustumCulled={false} ref={items} args={[nodes.Grass.geometry, null, count]}>
+ <MeshDistortMaterial
+ side={DoubleSide}
+ color="green"
+ distort={0.5}
+ speed={1}
+ factor={10}
+ ></MeshDistortMaterial>
+ </instancedMesh>
  </group>
  )
 }

diff --git a/src/components/GroundViewSign.jsx b/src/components/GroundViewSign.jsx
@@ -3,20 +3,22 @@ import { useGLTF } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { MeshStandardMaterial } from 'three'
 
-const GroundViewSign = ({ color = 'var(--media-category-color)', ...props }) => {
+const GroundViewSign = ({ animation = true, color = 'var(--media-category-color)', ...props }) => {
  const signRef = useRef()
  const { nodes, materials } = useGLTF('../assets/models/GroundViewSign.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/Header.jsx b/src/components/Header.jsx
@@ -36,7 +36,9 @@ const Header = ({ isMobile = true }) => {
  )}
 
  <Counter />
- <RoundButton Icon={MenuIcon} onClick={menuClickEvent} />
+ <div style={{ position: 'absolute', right: 0 }}>
+ <RoundButton Icon={MenuIcon} onClick={menuClickEvent} />
+ </div>
  </div>
  )
 }

diff --git a/src/components/House.jsx b/src/components/House.jsx
@@ -1,19 +1,70 @@
 import { useGLTF } from '@react-three/drei'
+import { RigidBody } from '@react-three/rapier'
 
-const House = (props) => {
+const House = (props, transparent = true, geometryPosition = [0, 0, 0]) => {
  const { nodes, materials } = useGLTF('../assets/models/House.glb')
 
  return (
- <group {...props} dispose={null}>
- <mesh castShadow receiveShadow geometry={nodes.House_1.geometry} material={materials.Walls} />
- <mesh castShadow receiveShadow geometry={nodes.House_2.geometry} material={materials.Roof} />
- <mesh castShadow receiveShadow geometry={nodes.House_3.geometry} material={materials.Glass} />
- <mesh castShadow receiveShadow geometry={nodes.House_4.geometry} material={materials.Wood} />
- <mesh castShadow receiveShadow geometry={nodes.House_5.geometry} material={materials.Base} />
- <mesh castShadow receiveShadow geometry={nodes.House_6.geometry} material={materials.Roof} />
- <mesh castShadow receiveShadow geometry={nodes.House_7.geometry} material={materials.Roof} />
- <mesh castShadow receiveShadow geometry={nodes.House_8.geometry} material={materials.Roof} />
- </group>
+ <RigidBody colliders={'hull'} type={'fixed'}>
+ <mesh position={geometryPosition}>
+ <cylinderGeometry />
+ <meshStandardMaterial
+ color="green"
+ transparent={transparent}
+ opacity={transparent ? 0 : 0.7}
+ />
+ </mesh>
+ <group {...props} dispose={null}>
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_1.geometry}
+ material={materials.Walls}
+ />
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_2.geometry}
+ material={materials.Roof}
+ />
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_3.geometry}
+ material={materials.Glass}
+ />
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_4.geometry}
+ material={materials.Wood}
+ />
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_5.geometry}
+ material={materials.Base}
+ />
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_6.geometry}
+ material={materials.Roof}
+ />
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_7.geometry}
+ material={materials.Roof}
+ />
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.House_8.geometry}
+ material={materials.Roof}
+ />
+ </group>
+ </RigidBody>
  )
 }
 

diff --git a/src/components/IcescreamTruck.jsx b/src/components/IcescreamTruck.jsx
@@ -1,17 +1,28 @@
 import { useGLTF } from '@react-three/drei'
+import { RigidBody } from '@react-three/rapier'
 
-const IcescreamTruck = (props) => {
+const IcescreamTruck = (props, transparent = true, geometryPosition = [0, 0, 0]) => {
  const { nodes, materials } = useGLTF('../assets/models/IcescreamTruck.glb')
 
  return (
- <group {...props} dispose={null}>
- <mesh
- castShadow
- receiveShadow
- geometry={nodes.Ice_Cream_Truck.geometry}
- material={materials['Ice Cream Truck Material']}
- />
- </group>
+ <RigidBody colliders={'hull'} type={'fixed'}>
+ <mesh position={geometryPosition}>
+ <cylinderGeometry />
+ <meshStandardMaterial
+ color="green"
+ transparent={transparent}
+ opacity={transparent ? 0 : 0.7}
+ />
+ </mesh>
+ <group {...props} dispose={null}>
+ <mesh
+ castShadow
+ receiveShadow
+ geometry={nodes.Ice_Cream_Truck.geometry}
+ material={materials['Ice Cream Truck Material']}
+ />
+ </group>
+ </RigidBody>
  )
 }