feat: enhance World component with floor interaction and visual indicators

- Added a transparent floor to the World component, allowing for player interaction.
- Implemented hover and click event handlers to update player position and show/hide an indicator.
- Introduced a custom shader for a gradient effect on the hover indicator.
- Removed redundant hover indicator logic from GameCanvas component to streamline functionality.

Author: alvarosabu

components/environments/World.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import type { Group } from 'three'
-
+import { MeshBasicMaterial } from 'three'
 const { getResource } = useResourcePreloader()
+const gameStore = useGameStore()
 
 const { scene: model_dungeon } = getResource('models', 'dungeon')
 const { scene: model_lights } = getResource('models', 'lights')
 const { scene: model_chests } = getResource('models', 'chests')
 const { scene: model_doors } = getResource('models', 'doors')
 const { scene: model_spikes } = getResource('models', 'spikes')
-const { scene: model_visual_blocker } = getResource('models', 'visual_blocker')
+const { scene: model_visual_blocker, nodes: model_visual_blocker_nodes } = getResource('models', 'visual_blocker')
+
+const floor = model_visual_blocker_nodes['room1001'].clone()
 
+floor.material = new MeshBasicMaterial({
+  transparent: true,
+  opacity: 0,
+})
 const model_dungeon_ref = ref()
 const model_lights_ref = ref()
 const model_chests_ref = ref()
@@ -28,9 +35,58 @@ const { stop } = watch(model_visual_blocker_ref, (newValue: Group | undefined) =
   })
   stop()
 })
+
+// Custom shader for gradient cylinder
+const cylinderShader = {
+  uniforms: {
+    color: { value: { r: 1.0, g: 1.0, b: 1.0 } },
+  },
+  vertexShader: `
+    varying float vY;
+    void main() {
+      vY = position.y;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: `
+    uniform vec3 color;
+    varying float vY;
+    void main() {
+      float alpha = 1.0 - (vY + 0.5); // Gradient from bottom to top
+      gl_FragColor = vec4(color, alpha * 0.5); // Semi-transparent
+    }
+  `,
+}
+
+const showIndicator = ref(false)
+const hoverIndicatorRef = shallowRef()
+
+
+const handleFloorClick = (e: ThreeEvent<PointerEvent>) => {
+  const newPosition = { x: e.point.x, y: 0, z: e.point.z }
+  gameStore.setPlayerPosition(gameStore.players[0], newPosition)
+
+}
+
+const handleFloorHover = (e: ThreeEvent<PointerEvent>) => {
+  showIndicator.value = true
+  console.log('hoverIndicatorRef', hoverIndicatorRef.value)
+  if (hoverIndicatorRef.value) {
+    hoverIndicatorRef.value.position.set(e.point.x, 0.2, e.point.z)
+  }
+}
+
+const handleFloorLeave = () => {
+  showIndicator.value = false
+}
+
+watch(hoverIndicatorRef, (newValue) => {
+  console.log('hoverIndicatorRef',newValue)
+})
 </script>
 
 <template>
+  
   <primitive
     v-if="model_dungeon"
     ref="model_dungeon_ref"
@@ -67,4 +123,27 @@ const { stop } = watch(model_visual_blocker_ref, (newValue: Group | undefined) =
     :name="model_visual_blocker"
     :object="model_visual_blocker"
   />
+  <primitive
+    v-if="floor"
+    ref="floor_ref"
+    :name="floor"
+    :object="floor"
+    :position-y="0.1"
+    @click="handleFloorClick"
+    @pointer-move="handleFloorHover"
+    @pointer-leave="handleFloorLeave"
+  />
+ <!-- Hover Indicator -->
+ <TresMesh
+    v-if="showIndicator"
+    ref="hoverIndicatorRef"
+  >
+    <TresCylinderGeometry :args="[0.5, 0.5, 1, 32]" />
+    <TresShaderMaterial
+      transparent
+      :vertex-shader="cylinderShader.vertexShader"
+      :fragment-shader="cylinderShader.fragmentShader"
+      :uniforms="cylinderShader.uniforms"
+    />
+  </TresMesh>
 </template>

components/game/GameCanvas.vue

@@ -25,8 +25,7 @@ const characters = computed(() => {
 
 const { sendMsg } = useMultiplayer(gameStore.isMultiplayer)
 const orbitControlsRef = ref()
-const showIndicator = ref(false)
-const hoverIndicatorRef = shallowRef()
+
 
 useControls('fpsgraph')
 
@@ -48,52 +47,8 @@ const { edgeStrength, pulseSpeed, visibleEdgeColor, blur } = useControls({
   },
 })
 
-// Custom shader for gradient cylinder
-const cylinderShader = {
-  uniforms: {
-    color: { value: { r: 1.0, g: 1.0, b: 1.0 } },
-  },
-  vertexShader: `
-    varying float vY;
-    void main() {
-      vY = position.y;
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
-  `,
-  fragmentShader: `
-    uniform vec3 color;
-    varying float vY;
-    void main() {
-      float alpha = 1.0 - (vY + 0.5); // Gradient from bottom to top
-      gl_FragColor = vec4(color, alpha * 0.5); // Semi-transparent
-    }
-  `,
-}
-
-const handleFloorClick = (e: ThreeEvent<PointerEvent>) => {
-  const newPosition = { x: e.point.x, y: 0, z: e.point.z }
-  if (gameStore.isMultiplayer) {
-    sendMsg({
-      type: 'UPDATE_PLAYER_POSITION',
-      lobbyId: lobbyStore.currentLobbyId,
-      position: [newPosition.x, newPosition.y, newPosition.z],
-    })
-  }
-  else {
-    gameStore.setPlayerPosition(gameStore.players[0], newPosition)
-  }
-}
 
-const handleFloorHover = (e: ThreeEvent<PointerEvent>) => {
-  showIndicator.value = true
-  if (hoverIndicatorRef.value) {
-    hoverIndicatorRef.value.position.set(e.point.x, 0, e.point.z)
-  }
-}
 
-const handleFloorLeave = () => {
-  showIndicator.value = false
-}
 
 const outlineRef = ref()
 
@@ -153,34 +108,27 @@ const { cursor } = useGameCursor()
         />
       </template>
     </Suspense>
-    <!-- Hover Indicator -->
-    <TresMesh
-      v-if="showIndicator"
-      ref="hoverIndicatorRef"
-    >
-      <TresCylinderGeometry :args="[0.5, 0.5, 1, 32]" />
-      <TresShaderMaterial
-        transparent
-        :vertex-shader="cylinderShader.vertexShader"
-        :fragment-shader="cylinderShader.fragmentShader"
-        :uniforms="cylinderShader.uniforms"
-      />
-    </TresMesh>
+   
 
     <!-- Level Items -->
     <template v-if="gameStore.currentLevel">
       <template v-for="item in gameStore.currentLevel.items" :key="item.id">
         <Item :id="item.id" />
       </template>
     </template>
-
+    <!-- <TresMesh
+      v-if="gameStore.currentLevel"
+      :position-y="0.1"
+      :rotation-x="-Math.PI / 2"
+      :scale="100"
+     
+    >
+      <TresPlaneGeometry />
+      <TresMeshBasicMaterial color="red" transparent :opacity="0.2" />
+    </TresMesh> -->
     <!-- World -->
     <Suspense>
-      <World
-        @click="handleFloorClick"
-        @pointer-move="handleFloorHover"
-        @pointer-leave="handleFloorLeave"
-      />
+      <World />
     </Suspense>
 
     <!-- Postprocessing -->

fly.toml

@@ -1,4 +1,4 @@
-# fly.toml app configuration file generated for nuxt-3d-dnd-game on 2025-03-12T14:31:17+01:00
+# fly.toml app configuration file generated for nuxt-3d-dnd-game on 2025-04-03T08:48:37+02:00
 #
 # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
 #