WebGLとThree.js学習(一)初識Three.js
2379 ワード
まず、WebGLとは何かを説明します.WebGLはブラウザで3次元効果を実現するための規範です.
WebGLオリジナルのAPIを使用して3 Dプログラムを書くのは非常に苦痛なことですが、幸いなことに、多くの開発者が時間をかけてWebGLオープンソースフレームワークを書いています.その中でthree.jsは非常に優秀なもので、多くの面倒な細部を隠し、開発をより簡単で効率的にしています.次はthree.jsの勉強の旅を始めましょう.
three.jsとは何でしょうか.three.jsはjavascriptを使って3 Dプログラムを書くフレームワークです.数年前、3 Dプログラムを書くには、効率を保証するためにc++(openGL技術)を使ったほうがいいですが、現在、javascriptの計算能力はgoogleのV 8エンジンが急速に強化されているため、3 Dプログラムをしたり、サーバーをしたりしても問題ありません.また、同じことを完了すると、three.jsはc++よりも少ないコードを使用し、より簡単で、よりクールになります.
また、良い3 Dアプリケーションは、テンセントのオープンプラットフォームなど一部の会社のオープンプラットフォームでお金を稼ぐことができます.テンセント開発プラットフォームは広告とアクセス量を通じて料金を徴収し、良い3 Dアプリケーションを書くと、多くのお金を稼ぐことができるかもしれません.
余計なことは言わないで、Three.jsの勉強を始めましょう.
1ダウンロード
まずhttps://github.com/mrdoob/three.js最新のThree.jsバージョンをダウンロードします.
2コードアーキテクチャ
解凍すると、次のファイルディレクトリが得られます.
Buildディレクトリ:three.jsとthree.min.jsの2つのファイルが含まれています.これはthree.jsが最終的に参照したファイルです.
Docsディレクトリ:three.jsのヘルプドキュメントです.各関数のapiが入っていますが、詳細な説明はありません.これらのドキュメントでthree.jsを習得しようとするのは難しい.
Editorディレクトリ:3 D-maxのような簡単な編集プログラムで、3 Dオブジェクトを作成できます.
Examplesディレクトリ:興味深い例demoがありますが、残念ながらドキュメントの紹介はありません.画像学に対する理解が深くない学生は、学習コストが非常に高い.
Srcディレクトリ:ソースコードディレクトリ、中はすべてのソースコードです.
Testディレクトリ:いくつかのテストコードは、ほとんど役に立たない.
Utilsディレクトリ:スクリプト、pythonファイルを格納するツールディレクトリ.例えば、3 D-Max形式のモデルをthree.js特有のjsonモデルに変換する.
.gitignoreファイル:gitツールのフィルタルールファイルで、役に立たない.
CONTRAIBUTING.mdファイル:バグの報告方法、ヘルプの入手方法についての説明ドキュメント.
LICENSEファイル:著作権情報.
README.mdファイル:three.jsを紹介するファイルで、各バージョンの更新内容リストも含まれています.
開発ツール
コンパイラはWebStormを推奨し、デバッグはWebStormでもChromeブラウザでも直接デバッグできます.具体的な方法は以下の通りです.http://zhangyongbluesky.blog.163.com/blog/static/1831941620113155739840/
参照Three.js
htmlファイルを作成し、bodyセクションで次の世代を叩くとThree.jsを参照できます.
Threejsが起動したことを確認するためにChromeブラウザで上のページを開き、F 12キーを押してデバッグウィンドウを開き、Consoleの下にTHREE.REVISIONコマンドを入力すると、現在使用されているthree.jsファイルのバージョンが得られます.
これでThree.jsは実行できます.
THREEはthree.jsオブジェクトであり、エンジンの多くの一般的な属性と方法を含むthree.jsエンジン自体を表すと理解できる.例えばTHREE.REVISIONはコードエンジンのバージョンです.
このブログはまずここまで紹介し、次のブログでは最も基本的なThree.jsの例をいくつか紹介します.
WebGLオリジナルのAPIを使用して3 Dプログラムを書くのは非常に苦痛なことですが、幸いなことに、多くの開発者が時間をかけてWebGLオープンソースフレームワークを書いています.その中でthree.jsは非常に優秀なもので、多くの面倒な細部を隠し、開発をより簡単で効率的にしています.次はthree.jsの勉強の旅を始めましょう.
three.jsとは何でしょうか.three.jsはjavascriptを使って3 Dプログラムを書くフレームワークです.数年前、3 Dプログラムを書くには、効率を保証するためにc++(openGL技術)を使ったほうがいいですが、現在、javascriptの計算能力はgoogleのV 8エンジンが急速に強化されているため、3 Dプログラムをしたり、サーバーをしたりしても問題ありません.また、同じことを完了すると、three.jsはc++よりも少ないコードを使用し、より簡単で、よりクールになります.
また、良い3 Dアプリケーションは、テンセントのオープンプラットフォームなど一部の会社のオープンプラットフォームでお金を稼ぐことができます.テンセント開発プラットフォームは広告とアクセス量を通じて料金を徴収し、良い3 Dアプリケーションを書くと、多くのお金を稼ぐことができるかもしれません.
余計なことは言わないで、Three.jsの勉強を始めましょう.
1ダウンロード
まずhttps://github.com/mrdoob/three.js最新のThree.jsバージョンをダウンロードします.
2コードアーキテクチャ
解凍すると、次のファイルディレクトリが得られます.
Buildディレクトリ:three.jsとthree.min.jsの2つのファイルが含まれています.これはthree.jsが最終的に参照したファイルです.
Docsディレクトリ:three.jsのヘルプドキュメントです.各関数のapiが入っていますが、詳細な説明はありません.これらのドキュメントでthree.jsを習得しようとするのは難しい.
Editorディレクトリ:3 D-maxのような簡単な編集プログラムで、3 Dオブジェクトを作成できます.
Examplesディレクトリ:興味深い例demoがありますが、残念ながらドキュメントの紹介はありません.画像学に対する理解が深くない学生は、学習コストが非常に高い.
Srcディレクトリ:ソースコードディレクトリ、中はすべてのソースコードです.
Testディレクトリ:いくつかのテストコードは、ほとんど役に立たない.
Utilsディレクトリ:スクリプト、pythonファイルを格納するツールディレクトリ.例えば、3 D-Max形式のモデルをthree.js特有のjsonモデルに変換する.
.gitignoreファイル:gitツールのフィルタルールファイルで、役に立たない.
CONTRAIBUTING.mdファイル:バグの報告方法、ヘルプの入手方法についての説明ドキュメント.
LICENSEファイル:著作権情報.
README.mdファイル:three.jsを紹介するファイルで、各バージョンの更新内容リストも含まれています.
開発ツール
コンパイラはWebStormを推奨し、デバッグはWebStormでもChromeブラウザでも直接デバッグできます.具体的な方法は以下の通りです.http://zhangyongbluesky.blog.163.com/blog/static/1831941620113155739840/
参照Three.js
htmlファイルを作成し、bodyセクションで次の世代を叩くとThree.jsを参照できます.
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>Threejsが起動したことを確認するためにChromeブラウザで上のページを開き、F 12キーを押してデバッグウィンドウを開き、Consoleの下にTHREE.REVISIONコマンドを入力すると、現在使用されているthree.jsファイルのバージョンが得られます.
これでThree.jsは実行できます.
THREEはthree.jsオブジェクトであり、エンジンの多くの一般的な属性と方法を含むthree.jsエンジン自体を表すと理解できる.例えばTHREE.REVISIONはコードエンジンのバージョンです.
このブログはまずここまで紹介し、次のブログでは最も基本的なThree.jsの例をいくつか紹介します.