「サイズを指定」の変数の値(960、540)が入りますね。THREE.Scene();一行ですね。変数sceneをnewでTHREEオブジェクトのインスタンスにして、Scene()(シーン)メソッドが入ります。次は「カメラを作成」です。+1000);変数cameraをTHREEのインスタンス化し、PerspectiveCamera()メソッドが入ります。キヤノンイメージゲートウェイその下では、cameraインスタンスのpositionプロパティのset()メソッド。カメラを置く位置のようです。ここを打ち変えると位置がかわりそうです。箱を作成いよいよ立方体の部分ですね。400);まず変数geometryをTHREEインスタンス化し、BoxGeometry()メソッドを入れています。このメソッドは箱型のジオメトリ(立体)とのこと。400で、幅、高さ、奥行きですね。THREE.MeshNormalMaterial();次に変数materialもTHREEのインスタンス化してMeshNormalMaterial()メソッドを入れています。MeshNormalMaterial()は予め用意されたマテリアルで、ライトを設定しなくても形状が見えるそうです。material);同様に変数boxにTHREEのインスタンスのMesh()メソッドが入っています。引数は2つで上のgeometryとmaterialが入ります。scene.add(box);最後にsceneインスタンスのadd()メソッドを実行。中の引数にはboxインスタンスを代入し、シーンに箱を追加しています。ループイベント(アニメ)その次に唐突にtick()メソッドが書かれていますね。このメソッドはすぐ下に定義されています。}処理内容の中身はこんなです。0.01;boxインスタンスのrotationプロパティのyに0.01を加算。rotationはCSSにもあるように、回転ですね。「箱が0.01回転する」という意味。レンダリング次にrendererインスタンスのrender()メソッドを実行。引数は2つでsceneとcameraが入ります。「シーンとカメラをレンダリング」という意味。requestAnimationFrame(tick);最後の処理はrequestAnimationFrame()メソッド。名前の通りフレームアニメーションですね。引数はには関数tick自体が入ります。まとめると「フレームごとに箱を0.01回転させて、シーンとカメラにレンダリングする」という意味になります。これで、箱が回転するアニメーションになったわけですね。復習では、もう一回コードを見ていきませう。関数tickを定義boxインスタンスを0.01回転rendererインスタンスにシーンとカメラをレンダリングrequestAnimationFrame()メソッドでフレームごとに関数tickを実行どうでしょうか。最初より読めてきたでしょうか。まとめうーむ、箱をシーンに置いて回転させるだけでも随分とコードがあり、パッと見ただけではなかなか内容がイメージできないので、細かく見ていきました。それでもライブラリを使わないともっともっと膨大なコードになると思われます。無からコードだけで3Dアニメが出現するのはなんとも嬉しい体験です。3Dの道は一日にしてならず。引き続きよろしくお願いしまっす!*1:オラワクワクしてくっぞ!*2:コンテンツデリバリネットワークの略。ネットワーク上で共有されるWebコンテンツです。22:40Tweet関連記事2020-01-09【Three.js】マテリアルとライティング設定(入門編に再入門!)Three.jsの続きです。JSフレームワークReact、はじめました。今回は初回...2019-12-25【JS】TypeScriptをGulpでコンパイルしてみるGulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしまし...2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパ...2019-11-29【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)Gulpの続きです。前回はローカルにインストールができました。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。