HOW TO USE useRef To control 3d glb modal

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ธ.ค. 2024

ความคิดเห็น • 1

  • @paradise_hope
    @paradise_hope  6 หลายเดือนก่อน

    // src/ModelViewer.js
    import React,{ useRef} from 'react';
    import { Canvas } from '@react-three/fiber';
    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
    import { Suspense } from 'react';
    import { Html, useGLTF, useProgress } from '@react-three/drei';
    import { useFrame } from '@react-three/fiber';
    // please correct your modal path
    /* const Model = () => {
    const gltf = useGLTF('/Soldier.glb');
    return
    }; */
    const Model = () => {
    const gltf = useGLTF('/Soldier.glb');
    const modelRef = useRef();
    // Animate the model
    useFrame(() => {
    // Example rotation animation (rotates around Y-axis)
    modelRef.current.rotation.y += 0.01;
    });
    return ;
    };
    const Loading = () => {
    const { progress } = useProgress();
    return Loading {progress} %;
    };
    const ModelViewer = () => {
    return (



    );
    };
    export default ModelViewer;