seto-hp

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

avatar.tsx (1132B)

      1 'use client';
      2 
      3 import React from 'react';
      4 import { Canvas, useFrame, useThree } from '@react-three/fiber';
      5 import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
      6 import * as THREE from 'three';
      7 import Model from './Model';
      8 
      9 const Rig = () => {
     10     const { camera } = useThree();
     11     return useFrame(() => {
     12         camera.position.lerp(new THREE.Vector3(0, 2, -2), 0);
     13         camera.lookAt(0, 1, 0);
     14     });
     15 }
     16 
     17 export default function Avatar() {
     18     const gltfCanvasRef = React.useRef<HTMLDivElement>(null)
     19     return (
     20         <div
     21             ref={gltfCanvasRef}
     22             style={{height:500}}
     23         >
     24             <Canvas
     25                 camera={{ position:[0,5,-5]}}
     26             >
     27                 <PerspectiveCamera makeDefault position={[0, 2, -2]} />
     28                 <directionalLight position={[0,10,-5]} color={"0xffffff"} />
     29                 <Model />
     30                 <color attach="background" args={["#ff00ff"]} />
     31                 <gridHelper/>
     32                 <OrbitControls 
     33                     enableZoom={false}
     34                 />
     35                 <Rig />
     36             </Canvas>
     37         </div>
     38     )
     39 }