model.js

import * as THREE from 'three'
import React, { memo, useRef } from 'react'
import { useFrame, useLoader } from 'react-three-fiber'
import { TextureLoader } from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { useMemo } from 'react'

const { src: img } = require('../assets/screenshot_1_1.jpg')
const url = `${process.env.PUBLIC_URL}/glb/stripped_down_unwrapped_v7.glb`

const rotationOffsetLeft = Math.PI * -0.04
const rotationOffsetRight = Math.PI * 0.04
const rotationAmount = Math.PI * 0.01
const rotationSpeed = 0.0009

const getRotation = (dir: string) =>
    Math.sin(Date.now() * rotationSpeed) * rotationAmount +
    (dir === 'left' ? rotationOffsetLeft : rotationOffsetRight)

const Model: React.FC<ModelProps> = () => {
    const group = useRef<any>()
    useFrame(() => {
        if (!group.current) {
            return
        }
        group.current.rotation.y = getRotation(direction)
    })

    const { nodes, materials } = useLoader(GLTFLoader, url)

    const texture = useLoader(TextureLoader, img)

    useMemo(() => {
        texture.wrapS = THREE.RepeatWrapping
        texture.wrapT = THREE.RepeatWrapping
        texture.minFilter = THREE.LinearFilter
        texture.repeat.set(2.22, -1)
    }, [texture])

    return (
        <group
            ref={group}
            scale={[0.03, 0.03, 0.03]}
            rotation={[
                direction === 'left' ? Math.PI * 0.99 : Math.PI * 1.01,
                getRotation(direction),
                direction === 'left' ? Math.PI * 0.98 : Math.PI * 1.02,
            ]}
        >
            <mesh
                material={materials['Mat']}
                geometry={nodes['Extrude1'].geometry}
                position={[0.14, -2.63, -379.68]}
                rotation={[Math.PI / 2, 0, 0]}
            />
            <mesh
                material={materials['default']}
                geometry={nodes['Cap1_3'].geometry}
                position={[0.14, -2.63, -379.68]}
                rotation={[Math.PI / 2, 0, 0]}
            />
            <mesh
                geometry={nodes['Extrude1_1'].geometry}
                position={[0.14, -2.63, -379.68]}
                rotation={[Math.PI / 2, 0, 0]}
            >
                <meshStandardMaterial attach='material' color={0x000000} />
            </mesh>
            <mesh
                geometry={nodes['Extrude_1'].geometry}
                position={[0.14, -2.63, -379.68]}
                rotation={[Math.PI / 2, 0, 0]}
            >
                <meshStandardMaterial attach='material' color={0x000000} />
            </mesh>
            <group
                position={[0.14, -2.63, -379.68]}
                rotation={[Math.PI / 2, 0, 0]}
            >
                <mesh
                    material={materials['Metallic']}
                    geometry={nodes['Extrude.2-Cutouts_0'].geometry}
                />
                <mesh geometry={nodes['Extrude.2-Cutouts_1'].geometry}>
                    <meshPhongMaterial
                        attach='material'
                        map={texture}
                        side={THREE.DoubleSide}
                        color={0xffffff}
                        shininess={10}
                    />
                </mesh>
            </group>
        </group>
    )
})

export default Model