我有一个iphone模型,我想把它加载到我的react项目。我使用了来自react 3 fiber R3F的原始标签,它不是我们在场景中能够看到的真实物体,但它是R3F支持的容器。我想显示2个iphone这就是为什么我对同一个模型使用两次原始标签但第一个原始标签不加载模型,只有第二个。是因为我只能在同一个型号上使用一次吗?我是否应该复制模型和
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>
)
})
我已经有了一个答案,primitive
标记只能为每个标记加载一个模型。如果你想加载相同的模型,那么你需要用不同的名字复制它,然后再次加载。