I am new in threejs and using it on my nextjs project. here is my array where I have dynamic image name those are all located in my public folder
const test = [{
image_url: "html.png"
},
{
image_url: "css.png"
},
]
now my Geometry look like this:
as I have two data in my array so u can see two icosahedronGeometry. here my jsx code:
{test.map((data,index)=>(<>
<div className='w-28 h-28' key={index} >
<SkillCanvasfrom />
</div>
</>))}
my threejs code:
const Skill = () => {
const [decal] = useTexture(["html.png"])
return (
<>
<Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
<ambientLight intensity={1}/>
<directionalLight position={[0,0,0.5]}/>
<mesh castShadow receiveShadow scale={2.75}>
<icosahedronGeometry args={[1,1]}/>
<meshStandardMaterial color="fff8eb"
polygonOffset
polygonOffsetFactor={-5}
flatShading
/>
<Decal
position={[0,0,1]}
map = {decal}
rotation={[2* Math.PI ,0 ,6.25]}
flatShading
/>
</mesh>
</Float>
</>
)
}
const SkillCanvas = () => {
return(<>
<Canvas >
<OrbitControls enableZoom={false}/>
<Skill />
</Canvas>
</>)
}
export default SkillCanvas
I want to know how to dynamically pass the image name from my array? I tried below code where trying to pass image_name as props
const Skill = (props) => {
const [decal] = useTexture([props.image_url]) ....
then in my SkillCanvas
const SkillCanvas = ({image_url}) => {
return(<>
<Canvas >
<OrbitControls enableZoom={false}/>
<Skill image={image_url} />
</Canvas>
</>)
}
then in my jsx
{test.map((data,index)=>(<>
<div className='w-28 h-28' key={index} >
<SkillCanvasfrom image={data.image_url} />
</div>
</>))}
getting this error
Unhandled Runtime Error
Error: Could not load undefined: undefined