編集されたタイトル: 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 ファイルを更新します。私がやったことは次のとおりです:

リーリー