feat: update screen texture

This commit is contained in:
xfy
2025-05-21 16:06:53 +08:00
parent 36e380e424
commit 73f6efadcd
10 changed files with 13 additions and 5 deletions

View File

@ -5,6 +5,7 @@ import { lazy, Suspense, useMemo } from 'react';
import Loading from './loading';
import { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera';
import { useMediaQuery } from 'react-responsive';
import { useTexture } from '@react-three/drei';
const ComputerModel = lazy(
() => import('components/models/home/computer-model'),

View File

@ -7,7 +7,7 @@ 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 } from '@react-three/drei';
import { useGLTF, useTexture } from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import { JSX } from 'react';
import * as THREE from 'three';
@ -59,6 +59,9 @@ export function Model(props: JSX.IntrinsicElements['group']) {
},
) as unknown as GLTFResult;
const moniterTexture = useTexture('/texture/desk/monitor.png');
const screenTexture = useTexture('/texture/desk/screen.png');
return (
<group {...props} dispose={null}>
<mesh
@ -66,7 +69,9 @@ export function Model(props: JSX.IntrinsicElements['group']) {
receiveShadow
geometry={nodes.computer_computer_mat_0.geometry}
material={materials.computer_mat}
/>
>
<meshMatcapMaterial map={moniterTexture} />
</mesh>
<mesh
castShadow
receiveShadow
@ -126,7 +131,9 @@ export function Model(props: JSX.IntrinsicElements['group']) {
receiveShadow
geometry={nodes.screen_screens_0.geometry}
material={materials.screens}
/>
>
<meshMatcapMaterial map={screenTexture} />
</mesh>
<mesh
castShadow
receiveShadow

View File

@ -30,7 +30,7 @@ export function ReactLogo(props: JSX.IntrinsicElements['group']) {
if (isMobile) {
return [5, 3, 0] as const;
}
return [10, 3, 0] as const;
return [9, 1, 0] as const;
}, [isMobile]);
return (

View File

@ -51,7 +51,7 @@ export function Target(props: JSX.IntrinsicElements['group']) {
if (isMobile) {
return [-5, -5, 3] as const;
}
return [-14, -8, 0] as const;
return [-12, -10, 0] as const;
}, [isMobile]);
return (