イイダリョウのブログ。Three.js入門サイトに私も入門する!!2018-06-11Three.js入門サイトに私も入門する!!JS以前ご紹介した「WebGL」の続きになります。今年こそブラウザ3D事始めんと欲し「書き初め」的に書いた投稿からもうじき半年...。前回tone.jsと同様、今回も便利なライブラリ「Three.js」を使って一刻も早く体験したく。箱を作成ループイベント(アニメ)あらためて復習まとめThree.jsとはWebGLの定番ライブラリに「three.js」がありんす。名前の由来は3Dの3と思われる。library「生JSとライブラリとフレームワークの理解」で書いたようにライブラリにはあらかじめ便利なメソッドがたくさん定義されています。いえばこの記事の後半でもThree.jsのコードを引用していますね。Three.js本体ファイルを読み込むと、このPerspectiveCamera()、WebGLRenderer()などの便利メソッドを実行できるわけです。three.jsの読み込みさっそく初めてみる。「Setting」をクリック「JavaScript」タブをクリック一番下の「QuickAdd」を開く「Three.js」を選択CDNのthree.jsファイルがリンクされます。Close」をクリック!どーですか!とっても・カン・タン・だ!って感じでしょう。時がきた!それだけだ。あとはやるだけだ!Three.js入門サイトにいざ入門!WebGLで3Dを表現するには、2Dで絵を描くのに比べて一筋縄ではいかないことがわかってきました。かい摘んでもざっとこれだけの工程があります。モデリング:造形マテリアル:色や表面の質感ライティング:光の角度、強さカメラ:カメラの位置モーション:動きどんな素敵な造形をしてもカメラやライトを設定しないとまっ暗な倉庫にあるのと同じわけですな。うーむ、こりゃなかなか独学では難しそうです。MEDIAサンプル再現!回る箱!まずは最初の「入門編」のページから取り組もうと思います。MEDIA>まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。id="myCanvas"></canvas>HTMLの方はたったの1行。canvas要素があって#myCanvasというid名がついてますね。CSSは記述全くなし!すべてはJSに書かれているようです。}...いきなりこれだけ見てもちょっとわかんないですね、はい。分解して見ていきませう。イベントリスナまず最初のところ。コメントには「ページ読み込みを待つ」とある。init);まずwindow。これは「JSの基本-前編」でも書いたように、ブラウザ全体を表す最上位のオブジェクトです。その次のaddEventListener()は「JSの基本-後編」でも書いたイベントリスナ。「第1引数の時に第2引数する」という意味になる。第1引数はloadで「読み込んだ時」、第2引数のinitは関数名。イベントリスナで読み込む関数名にはカッコが付かないんでしたね。まとめると「ブラウザを読み込んだ時に、関数initを実行する!」という意味になります。ページが読み込み終わったあとに実行させたいということですね。関数initそのあとには関数init()の設定が書かれています。外側を見るとこんな感じ。}この処理内容の頭にコメントが付いているのでそれをかい摘むとこんなです。}では、関数initの中身を一つずつ見て行きませう。一つ目のコメント「サイズを指定」の中身はこんなです。540;constというのは変数の一種です。お馴染みvar*3、let*4に続く第3の変数。巻き上げもできなければ、再代入(値上書き)もできません。「変数widthに960、変数heightに540」という値を入れ、この値は絶対的な固定値になります。この値は画面のサイズに違いないですな。次「レンダラーを作成」を見てきましょう。WebGLで書いたように「レンダリング」とはデータ情報を画像や映像などに変換することでしたね。height);またconstで変数renderer(レンダラー)を定義しています。値newで予めThree.jsに用意されたTHREEオブジェクトを複製してます。これによって変数rendererはTHREEオブジェクトの「インスタンス」になります。クモのようにコツコツとそこにWebGLRenderer()というメソッドが続きます。THREE.WebGLRenderer(引数)WebGLRenderer()メソッドの中には波括弧{}で連想配列が入ってますね。プロパティ:値})canvasプロパティの値はDOMのdocument.querySelector(セレクタ)です。DOMのセレクタはHTMLにある#myCanvasです。document.querySelector('#myCanvas')})これで、rendererインスタンスと#myCanvasセレクタを紐付けているわけです。インスタンスrendererのsetPixelRatio()、setSize()の二つのメソッドを実行しています。どちらもTHREEオブジェクトに予め定義されているメソッドのようです。height);setPixelRatio()の引数はwindow.devicePixelRatio。「WindowプロパティのdevicePixelRatioは現在のディスプレイにおけるCSS解像度と物理解像度の比を返します。