수정된 제목: 3D 표면에 2D 이미지를 렌더링하는 데 어려움이 있음

Question

YouTube의 코드 튜토리얼을 작성 중인데 13개의 정이십면체 기하학 구가 화면에 성공적으로 렌더링되는 문제가 발생했습니다. 그러나 비디오는 내가 공 위에 표시하는 2D 이미지를 보이지 않게 만듭니다. 내 콘솔에는 오류가 없습니다. 이 프로젝트는 Three.js와 tailwindcss입니다. 타이프스크립트가 없습니다.

참고: 이것은 나의 첫 번째 thrre.js 프로젝트이며 독학한 경로를 따르는 소프트웨어 개발이 아직 처음입니다. 귀하의 인내심, 이해 및 도움에 감사드립니다. 매우 감사합니다.

주요 질문 공의 측면에 올바르게 렌더링되도록 "tech"의 아이콘 이미지를 어떻게 얻을 수 있습니까?

어느 골프장이나 골프 연습장에서 볼 수 있는 회사 로고가 새겨진 골프공과 비슷하게 보이도록 의도한 것 같습니다.

저는 일주일 넘게 이 문제를 해결하려고 노력했는데 완전히 당황했습니다.

제가 YouTube에서 따랐던 튜토리얼은 여기 있습니다: https://www.youtube.com/watch?v=0fYi8SGA20k&t=6190s

다음은 이 문제와 가장 관련이 있는 코드 파일입니다. 유용하다면 더 많은 정보를 제공해 드리겠습니다. 다음은 공을 표시하는 구성 요소가 포함된 Tech.jsx 파일입니다.

으아아아

다음 단계는 Balls.jsx 파일을 Tech.jsx로 가져오는 것입니다.

으아아아

다음은 표시해야 하는 아이콘을 찾기 위한 탐색 정보가 포함된 index.js 파일의 조각입니다. 이는 가져오기 및 "기술적" 상수가 됩니다. 이 파일은 모두 내 프로젝트에 존재하며 해당 파일을 클릭하면 vscode 창에 표시됩니다.

으아아아

그런 다음 제정신을 유지하기 위해 package.json과 tailwind.config.js가 있습니다.

첫 번째 package.json:

으아아아

마지막으로 tailwind.config.js:

으아아아

` 일반 공에 아이콘을 표시하려고 시도했지만 3D 공의 전체 표면에만 아이콘이 늘어나도록 허용했으며 "정의되지 않은" es 린팅 문제가 여러 개 있었습니다. 또한 Ball.jsx 파일을 완전히 제거하고 보다 기본적인 그리드로 다시 작성하는 작업도 포함됩니다. 이것은 매우 불만족스럽습니다. 그러나 3D 공의 측면에 로고를 표시할 수 있다면 현 시점에서는 큰 승리가 될 것입니다. 앞서 언급했듯이 각 공의 아이콘/로고를 볼 수 있어야 합니다.

Answer 1

Balls.jsx 파일을 업데이트하세요. 제가 한 방법은 다음과 같습니다:

으아악