Розмір відео: 1280 X 720853 X 480640 X 360
Показувати елементи керування програвачем
Автоматичне відтворення
Автоповтор
import React, { Suspense, useRef, useEffect } from 'react';import { Canvas } from '@react-three/fiber';import { useGLTF, Html } from '@react-three/drei';import * as THREE from 'three'import { useProgress } from '@react-three/drei';const Loading = () => { const { progress } = useProgress(); return Loading {progress.toFixed(2)} %;};const ModelViewer = () => { const gltf = useGLTF('/Soldier.glb'); const modelRef = useRef(); const [movementSpeed, setMovementSpeed] = React.useState(0.1); const handleKeyDown = (event) => { switch (event.key.toLowerCase()) { case 'w': modelRef.current.position.z -= movementSpeed; break; case 's': modelRef.current.position.z += movementSpeed; break; case 'a': modelRef.current.position.x -= movementSpeed; break; case 'd': modelRef.current.position.x += movementSpeed; break; default: break; } }; useEffect(() => { window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, []); return ( {gltf.scene && ( )} );};export default ModelViewer;
import React, { Suspense, useRef, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { useGLTF, Html } from '@react-three/drei';
import * as THREE from 'three'
import { useProgress } from '@react-three/drei';
const Loading = () => {
const { progress } = useProgress();
return Loading {progress.toFixed(2)} %;
};
const ModelViewer = () => {
const gltf = useGLTF('/Soldier.glb');
const modelRef = useRef();
const [movementSpeed, setMovementSpeed] = React.useState(0.1);
const handleKeyDown = (event) => {
switch (event.key.toLowerCase()) {
case 'w':
modelRef.current.position.z -= movementSpeed;
break;
case 's':
modelRef.current.position.z += movementSpeed;
break;
case 'a':
modelRef.current.position.x -= movementSpeed;
break;
case 'd':
modelRef.current.position.x += movementSpeed;
break;
default:
break;
}
};
useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, []);
return (
{gltf.scene && (
)}
);
};
export default ModelViewer;