記事ディレクトリ
1.データベース
提示：这里是所有学习资料的汇总
1. three.js の基本
Three.js (公式ドキュメント): https://threejs.org/
threejs オンライン ドキュメント (簡易版): http://ourjs.com/wiki/view/three/1.%E4%BA%86%E8%A7 %A3threejs
小さな壊れたステーションの Threejs 学習ビデオ (bruno simon): threejs-learning-video
2. threejs と react フレームワークの組み合わせ:
React 公式 Web サイト: https://reactjs.org/docs/getting-started.html
React Three Fiber (ドキュメント/電子ブック): https://github.com/pmndrs/react-three-fiber
Drei (ドキュメント/電子ブック) : https://github.com/pmndrs/drei
react フレームワークの学習動画 (シリコンバレー):基礎知識
3. 事例動画
(youtube) 基本バージョン:立方体の構築
(youtube) chair には gltf モデルの導入が含まれます: online-chair
(youtube) Earth: global-warming-earth
(youtube) React Three Fiber を使用したシェーダーの操作:ケース
4. 3Dモデルのダウンロード
sketchfab：https://sketchfab.com/feed
2. 名詞の概念
1.threejs：
three.js は JavaScript を使用して 3D プログラムを作成します。
2. React フレームワーク:
React を使用すると、インタラクティブな UI を簡単に作成できます。ネイティブ js の 3 つの欠点を克服: 1. 操作が複雑で効率が悪い、2. 再描画と並べ替えが不要、3. コンポーネント化されていない。
3 3:
@react-three/fiber の便利なヘルプと完全な機能がたくさんあります。drei のインデックスには、グラフィックやカメラなど、作成する必要のないツールがたくさんありますが、マテリアルを直接参照します。これにより、コードがはるかに高速になります。
3、vscode インストール プラグイン
1. GLSLリント
この拡張機能は、GLS (OpenGL Shading Language) のリンティングをサポートしています。OpenGL および OpenGL ES シェーダー バリデーター glslangValidator を使用して、サポートされているすべてのシェーダー タイプを検証します。
2. glsl-リテラル
JavaScript テンプレート テキストに GLSL 構文の強調表示を追加します。
3.glTF ツール
vscode で gltf ファイルを表示すると便利です。