DefectingCat.github.io/components/models/home/computer-model.tsx

'use client';

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Author: david.campuzano (https://sketchfab.com/david.campuzano)
License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
Source: https://sketchfab.com/3d-models/hacker-room-stylized-a0cfe6edf2dd494c8a95addf6bb13a10
Title: Hacker Room - Stylized
*/
import { useGLTF, useTexture } from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import { JSX } from 'react';
import * as THREE from 'three';
import { DRACOLoader, GLTF, GLTFLoader } from 'three-stdlib';

type GLTFResult = GLTF & {
  nodes: {
    computer_computer_mat_0: THREE.Mesh;
    server_server_mat_0: THREE.Mesh;
    vhs_vhsPlayer_mat_0: THREE.Mesh;
    shelf_stand_mat_0: THREE.Mesh;
    keyboard_mat_mat_mat_0: THREE.Mesh;
    arm_arm_mat_0: THREE.Mesh;
    Tv_tv_mat_0: THREE.Mesh;
    table_table_mat_0: THREE.Mesh;
    Cables_cables_mat_0: THREE.Mesh;
    props_props_mat_0: THREE.Mesh;
    screen_screens_0: THREE.Mesh;
    screen_glass_glass_0: THREE.Mesh;
    peripherals_key_mat_0: THREE.Mesh;
  };
  materials: {
    computer_mat: THREE.MeshStandardMaterial;
    server_mat: THREE.MeshStandardMaterial;
    vhsPlayer_mat: THREE.MeshStandardMaterial;
    stand_mat: THREE.MeshStandardMaterial;
    mat_mat: THREE.MeshStandardMaterial;
    arm_mat: THREE.MeshStandardMaterial;
    tv_mat: THREE.MeshStandardMaterial;
    table_mat: THREE.MeshStandardMaterial;
    cables_mat: THREE.MeshStandardMaterial;
    props_mat: THREE.MeshStandardMaterial;
    screens: THREE.MeshStandardMaterial;
    glass: THREE.MeshPhysicalMaterial;
    key_mat: THREE.MeshStandardMaterial;
  };
};

export function Model(props: JSX.IntrinsicElements['group']) {
  const { nodes, materials } = useLoader(
    GLTFLoader,
    '/models/hacker-room/hacker-room.glb',
    (loader) => {
      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath('/libs/draco/');
      loader.setDRACOLoader(dracoLoader);
    },
  ) as unknown as GLTFResult;

  const moniterTexture = useTexture('/texture/desk/monitor.png');
  const screenTexture = useTexture('/texture/desk/screen.png');
  const tableTexture = useTexture('/texture/desk/table.png');

  return (
    <group {...props} dispose={null}>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.computer_computer_mat_0.geometry}
        material={materials.computer_mat}
      >
        <meshMatcapMaterial map={moniterTexture} />
      </mesh>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.server_server_mat_0.geometry}
        material={materials.server_mat}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.vhs_vhsPlayer_mat_0.geometry}
        material={materials.vhsPlayer_mat}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.shelf_stand_mat_0.geometry}
        material={materials.stand_mat}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.keyboard_mat_mat_mat_0.geometry}
        material={materials.mat_mat}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.arm_arm_mat_0.geometry}
        material={materials.arm_mat}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Tv_tv_mat_0.geometry}
        material={materials.tv_mat}
      >
        <meshMatcapMaterial map={moniterTexture} />
      </mesh>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.table_table_mat_0.geometry}
        material={materials.table_mat}
      >
        <meshMatcapMaterial map={tableTexture} />
      </mesh>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cables_cables_mat_0.geometry}
        material={materials.cables_mat}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.props_props_mat_0.geometry}
        material={materials.props_mat}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.screen_screens_0.geometry}
        material={materials.screens}
      >
        <meshMatcapMaterial map={screenTexture} />
      </mesh>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.screen_glass_glass_0.geometry}
        material={materials.glass}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.peripherals_key_mat_0.geometry}
        material={materials.key_mat}
      />
    </group>
  );
}

useGLTF.preload('/models/hacker-room/hacker-room.glb');

export default Model;