Search code examples
reactjsthree.jsreact-three-fiberreact-three-drei

can primitive tag react three fiber only be used once for the same model


I have an iphone model and i want to load it to my react project. I use primitive tag from react three fiber R3F which is not a real object that we will be able to see in the scene, but it’s a container supported by R3F. I want to display 2 iphone that'w why i use primitive tag twice for the same model but the first primitive tag doesn't load the model and only the second one. Is is because i only can use it once for the same model? Should i copy the model and

import { useGLTF, OrbitControls, useHelper, useScroll, Html } from '@react-three/drei'
import * as THREE from 'three'
import { useFrame } from '@react-three/fiber'
import { useRef, forwardRef } from 'react'

export default function App() {
    const model = useGLTF('/iphone_14_pro_max.glb');
    const model2 = useGLTF('/iphone_14_pro_max.glb');

    const scroll = useScroll()

    const iphone = useRef()
    const first = useRef()

    useFrame((state, delta) => {
        //kapan pake range kapan pake visible?
        const r1 = scroll.range(0 / 4, 1 / 4)
        const r2 = scroll.range(1 / 4, 1 / 4)
        const r3 = scroll.range(1 / 4, 1 / 4)

        iphone.current.rotation.y = (Math.PI * 0.67) + r1 + r2 + r3 * 3

    })

    return(
        <>
            <directionalLight position={ [ 1, 2, 3 ] } intensity={ 1.5 } />
            <ambientLight intensity={ 0.5 } />

            <primitive ref={iphone} object={model.scene} scale={20} position={ [ 0, -1.5, 0] }>
                <Tagline ref={first} left="PRO" right="BEYOND"></Tagline>
            </primitive>

            <primitive object={model2.scene} scale={15} position={ [ 1, 1, 1] } rotation-y={-45}/> 
        </>
    )
}

const Tagline = forwardRef(({ left, right, ...props }, ref) => {
    return (
      <Html occlude ref={ref} className="homepage" center {...props}>
        <h1>{left}</h1>
        <h1>{right}</h1>
      </Html>
    )
})

Solution

  • I already have an answer that primitive tag can only load one model for each tag. If you want to load the same model then you need to copy it with different name and load it agaian.