인프런 커뮤니티 질문&답변

let imageInfo = {};
fetch('/img.json')
    .then(response => response.json())
    .then(data => {
        imageInfo = data.images.reduce((acc, img) => {
            acc[img.id] = img;
            return acc;
        }, {});
        fetchAndBuildInfo();
        console.log(imageInfo);
    })
    .catch(error => console.error('Error loading img.json:', error));

const fetchAndBuildInfo = async () => {
    await fetch('/uploaded-images', {
        method: 'GET'
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch images');
            }
            return response.json();
        })
        .then(data => {
            const { fileUrls } = data;
            if (!Array.isArray(fileUrls)) {
                throw new Error('Response does not contain an array of image URLs');
            }
    
            fileUrls.forEach((fileUrl, i) => {
                const frame = new MeshObject({
                    scene,
                    cannonWorld,
                    cannonMaterial: defaultCannonMaterial,
                    mass: 0, // 중력 영향을 받지 않음
                    loader: textureLoader,
                    name: `frame_${i}`,
                    width: frameWidth,
                    height: frameHeight,
                    depth: frameDepth,
                    x: i * frameSpacing - ((fileUrls.length - 1) * frameSpacing) / 2,
                    y: 1.5,
                    z: -9.9,
                    mapSrc: fileUrl
                });
    
                if (frame.cannonBody) {
                    frame.cannonBody.type = CANNON.Body.STATIC; // 고정
                }
                const id = fileUrl.split('/').pop();
                const info = imageInfo[id];
                console.log(`${imageInfo} : ${id} : ${info}`)
                if (info) {
                    createInfoBox(info, frame);
                }
                else 
                console.log("no info");
    
                cannonObjects.push(frame);
            });
        })
        .catch(error => {
            console.error('Error fetching images:', error);
        });
    
}              

three.js를 이용해서 전시회 공간을 만들어보고 있습니다. 앞선 페이지에서 img에 대한 정보를 img.json파일에 저장하면 이를 three.js캔버스 공간에 불러와서 보이게 하고 싶은데 어떤 방법을 써야할까요? 현재 업로드된 파일 개수만큼 액자가 자동생성되게 해놓았는데 이 프레임을 클릭하거나 커서를 갖다대면 그림에 대한 information이 뜨게 하고 싶어요...ㅠㅠㅠ 계속 여기서 헤매고 있습니다.