WEBGLの学習メモ③THREE.jsでメッシュに画像を使う
1058 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
THREE.jsで3Dグラフィックを作っているのですがオブジェクト（メッシュ）を作るにはジオメトリとマテリアルが必要ですが今回はマテリアルに画像を使った作成の学習メモになります。
それではメモの開始です。
HTMLとCSS
コードは↓になります。
JavaScript
ページのHTMLの読み込みが終わってから表示されるのとcanvasのサイズ設定とシーン・カメラ・レンダラー・ライトの設定までを説明します。
コードを↓にします。
1行目がHTMLの読み込みが終わったらオブジェクトを表示するための記述です。
3行目・4行目がcanvasを表示する領域の設定です。
8行目がシーンの設定です。
10行目・11行目がカメラの設定です。
13行目がcanvasをHTMLのどこで表示するかの設定です。
14行目〜18行目がレンダラーの設定で16行目で背景を透明にして17行目でオブジェクトの輪郭を滑らかにします。
20行目・21行目は光源の設定です。
次はジオメトリとマテリアルとメッシュの設定ですがコードを↓にします。
23行目が多面体のジオメトリです。
25行目〜38行目がマテリアルに使う画像の設定です。（今のままでは使えず後で使える様にします）
40行目〜45行目がオブジェクトにつける境界線の設定で41行目で境界線が付いて42行目〜44行目が境界線に付く色の設定です。
47行目〜49行目でマテリアルに画像を使っています。
51行目でメッシュを作成して52行目でメッシュに境界線をつけて53行目でシーンにメッシュを置いてオブジェクトの表示をしています。
次はオブジェクトにマウスを乗せた時にオブジェクトが動く設定とオブジェクトを表示する設定ですがコードを↓にします。
56行目〜65行目がマウスの設定です。
70行目〜73行目がカメラが向く方向の設定です。
75行目・76行目がオブジェクトが回転する方向のスピードの設定です。
最後にオブジェクトに使う画像の切り替えと切り替えの際のオブジェクトのリサイズの設定でリサイズの設定が正直よくわかっていませんがコードを↓にします。
82行目〜96行目がオブジェクトのリサイズの設定で98行目〜107行目がオブジェクトに使う画像の切り替えの設定です。
これで完成です。