TypeScriptを始めよう

TypeScript講座

TypeScriptはMiroSoft社が開発したオープンソースのプログラミング言語になります。Javascriptにデータタイプの制限を加え、開発時に起こりうるバグを防ぐために作られました。 TypeScriptを始める前に知っておくべきこと TypeScriptはJavaScriptにコンパイルできる言語ですので基本のJavaScriptが理解できていないとその良さも生かせません。 まずTypeScriptを学ぶ前に下記のJavaScriptの基本だけは知っておくようにしましょう。 TypeScriptってなに? JavaScriptを使い始めると色々な部分で変だな、ふにゃふにゃしているなと思う事がありませんか?特に変数にデータタイプを指定する必要がないので下記のようなコードが実行できてしまいます。 これはJavaScriptはDynamically Typed Language(動的型付け言語)であるからです。 ブラウザがJavaScriptコードを実行する際に勝手にデータタイプを変更してしまうので、できるだけ正解に近いものを返してくれるようになります。 これは使い勝手は良いですが、バグが発生する原因になりがちです。 これらの問題を解決するために作られたのがTypeScriptです。TypeScriptではデータタイプを指定する必要があるので静的型付け言語(static typing)といえます。 静的型付け言語 動的型付け 言語 TypeScriptC/C++C#JavaGoScalaSwift JavaScriptPythonRubyPHP メリット コンパイル時にエラーが出てくれるエラーが事前にわかるのでコンパイル時にデバッグができます。例:・整数型変数なのに文字列を代入しようとしてる・型の違うデータで関数を呼ぼうとしている 記述量が大幅に減るデータ型の記載が不要になるので、書くコード量が減る。 比較的簡単にプログラムが書けるデータタイプを気にしなくてよい。 TypeScriptはJavaScriptのすべての機能を持つ以上に開発時に変更点のフィードバックが分かるのでデベロッパーの強い味方といえます。 なのでVSCodeなどのテキストエディタで.tsのタイプスクリプトファイルの変数のデータタイプを変更しようとすると下記のようにエラーがでます。 TypeScriptの難点 ①TypeScriptをJavaScriptコードにコンパイルしないといけない。→TypeScriptのコードはブラウザが理解できないのでJavaScriptのコードに変換(コンパイル)してあげないといけないです。 ②コードの制限が細かい。→JavaScriptと比べてコードを書く量が増え、データタイプをいちいち宣言しないといけません。スケールの小さいプロジェクトの場合はJavaScriptだけで対応することも検討すべきです。 TypeScriptのプロジェクトを作成する TypeScriptを使用するにあたりNode.jsを使います。まずは使用するマシンにNode.jsがインストールされていることを確認しましょう。 つぎにtypescriptのライブラリをグローバルにインストールします。 テキストエディタ テキストエディタはVSCodeをお勧めします。 ではテキストエディタを開いて、.tsファイル(TypeScriptファイル)を作成しましょう。今回はindex.tsファイルを作成してみます。 ちなみに.tsファイルにはタイプを指定しない普通のJavaScriptを書くこともできます。 ではターミナルを開いて.tsファイルをコンパイルしてみましょう。 VSCodeのターミナルが開けたらtscのコマンドを使ってJavaScriptファイルにコンパイルしてみましょう。 そうすると新しく.jsファイルが作成されたことが確認できます。 データタイプの指定 TypeScriptでデータタイプを指定するには変数の宣言の際に:タイプの形式で記載することができます。 では、再度.tsファイルをコンパイルしてみます。中身を見てみましょう。 変数のletがvarになっていることが分かりますね。これはコンパイル時にES5(ECMAScript)の基準に従って古いブラウザでも実行できるファイルに変換しているからです。なのでアロー関数を使った場合もES5の基準に従って変換してもらえます。 もしES6の基準で.tsファイルをコンパイルしたい場合は–targetフラグを使用してください。 TypeScriptのコンフィグファイル ではターミナル(コマンドプロンプト)から下記のコマンドでTypeScriptのコンフィグファイルを作成してみましょう。 コマンドの実行後にtsconfig.jsonファイルが作成されました。 この中身を見てみると多くのコンフィグがコメントアウトされています。これを必要に応じて設定することができます。説明はコンフィグの右側にあります。ではtargetフラグを見てみます。 では中身を消して””だけ残してみましょう。その後にカーソールが””の中にある際に、コントール+スペースバーを押すとすべてのオプションを見ることができます。 そのほかに、rootDir、outDirで.tsファイルを読み込むディレクトリ、書き出し先を設定できます。これでファイルを指定せずにコンパイルを実行することができます。 また“removeComments”: trueに設定することで.jsファイルにコメントを除くことができます。これは便利ですね。 “noEmit”: trueを設定すると、エラーがある際にはコンパイルが実行されません。 また、TypeScriptに慣れた時点でコンフィグ設定を学ぶことになるので、現段階ですべてを理解する必要はありません。 では、次回以降にTypeScriptのデバッグの仕方、詳しい書き方を説明していきたいと思います。 お疲れ様でした。

DjangoアプリにGoogleでログインできるようにする

Django-allauth

こんにちは。今日はDjangoアプリにGoogleなどのソーシャルメディアアカウントを使ってログインする方法を紹介します。

今回使用するdjango-allauthライブラリを使用することにより、ソーシャルメディアでユーザーをサインアップさせることができます。

詳しいドキュメンテーションはこちらを参照してください。(英語ですが。)

あと、Googleクラウドのサービスは課金されるものになるのでテストが完了したら課金はオフにしておきましょう。(最初に登録した場合は無料のクレジットがもらえるはずですが。)

ちなみに今回はフロントエンドはDjangoのテンプレートを想定していますが、REST APIを使ってログインする方法も今後紹介する予定ですのでお見逃しなく。

Vue3とVuetifyでゲームみたいなメニューを作る

Vue ゲームのスタート画面

今日は前回紹介したVueのUIライブラリのVuetifyを使ってゲームのスタート画面のようなUIを作ってみます。 今日のテーマは、Vueの基礎、JavaScriptの基礎、CSSの基礎の復習や知識を固めるために練習する良い素材になると思います。 完成したコードはGitHubで公開しているので見てみてください。 前回の続きなのでVue+Vuetifyのプロジェクトを用意して早速とりかかりましょう。 もし、Vuetifyを使いたくない方はViteでVueのプロジェクトを作成するだけでも同じことができるのでご安心を。 まずは、使えそうなレイアウトをコピペします。 v-containerは、コンテンツを左右の真ん中と、上下の真ん中に位置させることができるコンポーネントです。 v-rowは、v-colのwrapper(囲うもの)でflexを使って中のcol(カラム)のレイアウトをコントロールすることができます。 v-colはかならずv-rowの直下に位置されます。ここに表示されるコンテンツを入れることになります。 v-sheetは複数のコンポーネントで使えるベースラインになります。 レイアウトの作成 では、ゲームの画面のように左側にメニュー、右側にカードを作成します。 Vueitfyのv-colにはmax-widthが100%で設定されていたため、divに右と左のcolクラスを作成して別々のサイズにしました。 見やすいようにわざと色を付けていますが、後から外します。 背景画像 では、バックグラウンドの画像をPixabayで見つけて貼り付けます。これは商用無料で使える写真を探すときに便利なサイトです。 背景画像のファイルはsrc/assetsに、bg-img.jpgファイルで置いておきます。プロジェクトが大きくなったら、画像をまとめる用のフォルダを作成するべきですが今はOKとします。 ではスタイルに追加します。 このように背景画像が加わり、いい感じになりました。 メニューの作成 メニュー(ナビゲーションバー)を作成します。これは別のコンポーネントを作成してApp.vueにインポートする形にします。 では、components/Menu.vueファイルを作成して下記のように書きます。 次にApp.vueの方でこのコンポーネントをインポートしてあげます。 これでホバーエフェクトのあるメニューができました。次にメニューのタイトルをpropsとして親コンポーネントのApp.vueから子のMenu.vueに渡してあげます。 次に、メニューにガラスのような透明エフェクトをかけたいのでこのCSSツールから作成します。他にもデザインで使えるCSSツールを記事にしているので是非読んでください。 とりあえず、このような感じになりました。 コードはこのようになります。 Menu.vue コンテンツを作成 次に、各メニューをクリックした際に表示される右側のコンテンツのコンポーネントを作成します。ファイルはcomponents/Content.vueの名前にしました。これも同じようにApp.vueにインポートさせます。 コンテンツの中身もpropsでContent.vueに渡してあげるようにします。 次に、メニューボタンをクリックしたときに各コンテンツが切り替わるようにします。 App.vue Content.vueはとりあえずこのようにしておきます。 親のApp.vueからコンテンツのpropsをもらえるようにしておきます。 Content.vue これでクリックするとコンテンツが表示されるようにはなりました。 次にransform: perspective(600px) rotateY(10deg);のCSSを左と右のcolクラスに追加して、3Dに見えるようにします。 最後にボタンがアクティブの際にボタンに色を付けて完了です。 完成したイメージはこちらです。 完成したコードはこちら(GitHub)からどうぞ。

Vue3でVuetifyをインストールしよう

Vuetifyのインストール

Vueを使い始めてUIライブラリを探すと色々出てきますね。PrimeVue、BootstrapVue、Quasar、Buefyなど他にも選択肢はあります。今日はそのうちでも人気のVuetifyのインストールから基本的な使い方まで説明します。 Vue3の良いところ VueはReactと比べて初心者向けという位置づけで認識されがちです。しかし機能的にはReactに劣らず、書くコードの数も減ることがよくあります。個人的な意見になりますが、ReactのようにFacebookのような大企業のブランドがバックアップしていないというだけでマーケティングで負けてしまったように受けられます。 Vueは素晴らしいフレームワークで仕事でReactに縛られるという事がなければVueを使っていくべきだと思います。 なぜVuetify ①無料で使える Vuetifyはソースコードを公開しているオープンソースになります。MITライセンスなので安心して商用で使えます。必要があればソースコードをいじることもOKです。 ②フレキシブルなコンポーネント コンポーネントのカスタマイズがしやすいように作られているため個性を出しやすいです。また、Googleのマテリアルデザインをテーマに作成されているのでスッキリとした見た目でデザインができます。 ③ツールが豊富 FigmaのUIコンポーネントキットが使えます。(Figmaの使い方はこちら) Viteのビルドツールで作成されたVueにVuetifyを実装できます。 TypeScriptとJavaScriptの両方で使えます。 もし、わからに事があればDiscordのコミュニティに参加して質問ができる。などなど ViteでVueプロジェクトの作成 今回はVue CLIではなくViteを使います。Viteがスタンダードになってきているので是非使ってください。 yarnを使ってインストールする場合は次の記事を見てください。 アプリ名は自分の好きなものを付けてください。 ではプロジェクトフォルダに移動してライブラリをインストールします。 YarnでVuetifyをインストール yarnを使っている人は下記のコマンドで一発でVueとVuetifyがインストールできます。 このあとにプロジェクトフォルダに移動してテストサーバーを起動できます。 Vuetifyのインストール ではnpmを使ってVuetifyをインストールします。yarnを使わない人はこちらを使ってください。最初にも書いたようにViteでVueのプロジェクトを先に作成しておいてください。 Vuetifyの設定 では、VuetifyをインストールしたところでVue3で使えるように設定していきます。 ではsrc/main.jsを下記の様に上書きしましょう。 これで全部のコンポーネントをインポートしていますが、好みで必要なコンポーネントだけインポートすることも可能です。 ではテストサーバーを実行しておきましょう。 コンポーネントの使い方 ではsrc/App.vueにVuetifyのコンポーネントを入れてみます。 このようにグローバルでVuetifyのコンポーネントが使えるようになりました。 コンポーネントごとで使えるprosや設定が変わってくるので詳しくはドキュメンテーションを確認するようにしましょう。 スペーシング またスタイルを変更したい場合は下記の様にクラスを追加することでmarginやpaddingを変更することができます。 このようにma-5(マージン オール)のクラスを追加することで簡単にスタイルが変更することができましたね。 詳しいスペースの使い方です。 このma-5は下記の要素が結合したものです。 {property}{direction}-{size} propertyの箇所は: directionの箇所は: sizeの箇所は 4pxずつ増えていきます: Breakpoints(ブレイクポイント) Flexboxを使ったリスポンシブなクラスを設定することができます。 デバイス コード タイプ レンジ エキストラスモール xs モバイル < 600px … Read more

コピペだけ!anime.jsでクールなスライドを作ろう

anime.js スライダー

今日はanime.jsのライブラリを紹介します。このライブラリを使う事で複雑なアニメーションをJavaScriptを使ってよりシンプルに書くことができます。 anime.jsはオープンソースなのでソースコードをGitHubからも見ることができます。CodePenから実際のデモを見ることもできるので見てみてください。 今日の完成プロジェクトはこのようになります。 今日の環境 では、大体どのようなことができるかを理解できたところで早速、基本のコードを書いていきましょう。 プロジェクトの作成 今回はVanilla JavaScriptでプロジェクトを作成しますがビルドツールとしてViteを使います。 anime.jsのインストール では、npmを使ってanime.jsをインストールしましょう。 コードを書こう ではテキストエディタを開いてコードを書いていきます。 Bootstrapを使ってUIを作成したい場合はViteを使ったBootstrapの設定の仕方はこちらの記事を見てください。 では、index.htmlをこのように書いてみます。 次にmain.jsの中身を消して下記のように書いてみましょう。 そうすると、ブラウザがロードされたときに.btnクラスのHTML要素が右に動きましたね。 これが基本になります。 もし、クリックしたらボタンがアニメーションしたいときはこのようになります。 JavaScriptの基本に戻りましょう。 完成するとこのようになりますね。 画像スライダーを作る こちらを参考にしました。 index.htmlはこのようになります。 各gridクラスのdivタグ内に画像ファイルがあることに注目しましょう。 次に、styles.css(styles.scss)を書きます。 最後に、main.jsでスライダーのロジックを作成します。 init()関数でブラウザがDOMContentLoadedのイベントを実行したときにイベントをマウントさせます。 この中でスライダーやナビゲーションのHTML要素を格納し、クリックイベントを実装します。 画像にdelay:の要素を加えていることに注目してください。 完成したコードはこちら(GitHub)からどうぞ。

ViteとBootstrapで最速で開発しよう

ViteとBootstrapでセットアップ

今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。 現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。 しかしnpmを使ってライブラリを管理したい場合に最適になります。 さらにBootstrapのセットアップの仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。 今日の環境 Viteとは ViteはVueの創生者Evan Youとそのチームが作った最新のビルドツールです。特徴としてはWebpack、Gulp、Parcelのバンドリングで使うパッケージがデベロップメント用のサーバーを起動する際(npm start)でかなり遅くなる原因を起こしていたものをすべて取り除きました。さらにコードの量が多くなるにつれ再度バンドルしなおすのでその分時間がかかっていました。 Viteの強みはその速さになります。もちろん、その引き換えにES6で書いたコードが対応していないブラウザではJavaScriptを変換してくれないので動かない可能性がある等の短所があります。 もし、ReactやVueを使いたい方はこちらの記事を参考にしてください。 Bootstrapとは Bootstrapはブートストラップといいます。 HTMLにBootstrapのクラスを入れることで魔法のようにHTMLにCSSが付けられることができます。 Bootstrapは有名なので使っておいて損はありませんね。 では早速プロジェクトの作成にかかります。 Viteのセットアップ では下記のコマンドでViteを使ってJavaScriptのプロジェクトをセットアップします。 では、cd asameshi(もしくは自身のプロジェクト名)に移動してnpm iのコマンドを実行します。 Bootstrapのセットアップ 次にBootstrapをインストールします。popperはBootstrapのドロップダウンやポップオーバー、ツールチップのポジションで使いますが、これらを使う予定がない場合はインストールしなくてOKです。 次にSaasをインストールします。 これで必要なライブラリはインストールできました。 プロジェクトのファイル構成 プロジェクトのルート直下のcounter.jsは削除してください。 次に下記のコマンドで必要なフォルダとファイルを作成します。 プロジェクトのファイル構成はこのようになります。 ※ルート直下のindex.htmlは削除することになります。 Viteのコンフィグ 先ほどのコマンドで作成したvite.config.jsファイルがテストサーバーの起動時に読み込まれるファイルになります。中身が空っぽなので、このファイルにコンフィグを書いていきます。 ここで注意しておきたいのがpathのインポートの仕方です。const path = require(‘path’)でも良いですが、package.jsonの”type”: “module”を削除する必要があります。ES6の書き方でimportを使う方がキレイだと思いますが個人の好みでどうぞ。 次に、先ほど作成したsrc/index.htmlに下記の様に書きます。デフォルトのルート直下のindex.htmlは削除してOKです。 src/index.html Bootstrapのインポート では下記のようにvite.config.jsを書きます。これでbootstrapをインポートします。 次にsrc/scss/styles.scssを開きます。 このようにbootstrapのCSSをインポートしましょう。 次に、Bootstrapで使うJavaScriptをインポートします。 src/js/main.jsに下記を追加しましょう。 もし、プラグインごとに別々にインポートしたい場合は下記のように書いてもOKです。 では、テスト用サーバーを起動するとBootstrapのCSSも読み込まれたことが確認できましたね! 実際のコードはGitHubのリポから見てください。 お疲れ様でした。

Google Map APIを使ってカスタムマップを作成しよう

Google Map APIを使ってみる

今日はGoogle Map(グーグルマップ)のAPIを使ってカスタムマップを作成してみましょう!ワードプレスをお使いの方は簡単にプラグインを使って、カスタムマップを作成することができますね。同じことをマニュアルで行います。 これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。 完成したコードはGitHubから見てください。 注意 クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。もし、一般ユーザー向けにAPIを使用したい場合は、アカウントの登録を完了してください。クレジットカードの登録が必要になります。 2023年の2月時点での参考料金表になります。 今日の環境 サンプルプロジェクトの確認 実際にコードを書く前にどのようなことができるのかデモで確認したい人はこの手順を追ってください。 GoogleマップのGitHubリポをクローンしてGoogleのデモGoogleマップを見てみます。GitとGitHubの使い方はこちらでも説明しています。 これでGoogleマップのデモが開くのでカスタムマーカーを使ったマップもこのように確認することができますね。 Playgroundというボタンをクリックするとコードを見ながら実際にどのように表示されるか試すことができます。 では、早速Google CloudからMAP APIのサービスを使っていきましょう! JavaScriptのプロジェクト作成 では今日はViteを使ってプロジェクトを作成します。Viteはビルドツールで、ReactやVueのアプリケーションを使う際に使う事がほとんどですが、Vanilla JS(普通のJavaScript)でも使う事ができます。 ではコマンドプロンプト(もしくはターミナル)を開いて下記の様に入力していきます。 では、npm i (installのi)のコマンドでプロジェクトができたらテキストエディタを開きましょう。 また、デフォルトのページをテストサーバーで見たい際はnpm run devのコマンドで確認することができます。 viteで作成されたmain.jsがデフォルトのJavaScriptのエントリーポイントになります。 Google Map APIを作る では、コードに入る前にgoogle Cloudを使ってGoogle MapのAPIキーを作成します。まずは、googleクラウドのページにアクセスします。 右上の無料で利用開始をクリックします。 では、フォームを入力していきます。 では、次のページも完了させ登録を完了させてください。 次にコンソールのページが見れるのでそこから、プロジェクトの選択をクリックします。 次に、新しいプロジェクトをクリックします。 次に、プロジェクト名を適当に入れて、作成ボタンを押します。 プロジェクトが作成できたら、メイン画面の右上にプロジェクトを選択するリンクが表示されるのでそれをクリックします。 次にGoogle Cloudの左上のタブから①APIとサービス、②Google Map Platformの二つを探してピンしておきましょう。ピンはホバーしたときに表示される画びょうのアイコンでショートカットのように上部に持ってこられるので今後探す手間が省けます。 カスタムマップの作成 では、Google Cloudからカスタムマップを作成します。 Google Maps Platformからマップ管理を選択します。 次にCREATE MAP IDを選択します。 次に、マップの情報を入力します。 名前は、自分のプロジェクトを適当に入力します。説明も同じように適当に入れます。Map Typeはデスクトップで表示させたい場合は、JavaScriptを選択します。 下にあるRasterとVectorの選択はたデフォルトのRasterを選択します。Vectorでも良いですが、ブラウザによって対応していないものもあるので注意。 … Read more

three.jsを使って360度動画をブラウザ上で再生してみる

ブラウザで360動画を再生しよう

今日は、three.jsを使って360度動画をブラウザ上で再生してみます。 さらにマウスを使ってカメラの方向を変えてみます。 今回使う360動画はmp4形式ですが、OggとWebM形式でもブラウザで再生できます。 完成イメージはこんな感じになります。 GitHubで完成したコードはこちらになります。 動画に使っている動画をそのまま再生すると下記の画像のように伸びたような状態になっています。 three.jsを使ってこれを球体に変換してあげます。 その球体の中央にカメラを置いて360度に見えるようにすることが今日の目的です。 今回はthree.jsのサンプルコードを参考にしています。 今日の環境 コードのクローン ではgitを使って完成したコードを自分の環境にクローン(コピー)しましょう。Gitの使い方はこの動画でも説明しています。 ブラウザでhttp://localhost:5173/にアクセスしても、このままだと何も表示されません。 まずは、自分の360度動画を用意してthree.js-360video直下にvideoフォルダを作成して、その中身sample_video.mp4の名称で動画を入れると動画が再生されます。 もし、ファイルパスや動画名を変えたい場合はindex.htmlの下記の行を変えましょう。 これで動画が再生できるようになりました。 コードの中身を理解 では、コードの中身を説明していきます。main.jsを参照してください。 まずはinit()関数です。 前回の記事でも説明したようにthree.jsに必要な要素を作成しinit(イニシャライズ)させます。 必要な要素はカメラ、シーン、物体:geometry(今回は球体 = SphereGeometry)です。 ここで、球体のgeometryにたいして、videoテクスチャを使用して、360度動画を貼り付けています。 rendererはレンダラーといい、シーンをHTMLにレンダーする役目をします。 ここではHTMLの幅いっぱいにレンダーするように指示しています。 最後に下記のイベントリスナーを加えています。 ではこれらを見ていきます。 onWindowResize関数 onWindowResize()関数では、ブラウザの幅が変わるたびに360動画のサイズを変更するように指示する関数です。 ポインター操作 マウスを使ってカメラの方向を変えます。いわば視線を変える関数になります。 動画の再生 動画の再生は2つの関数からできています。 animateでrequestAnimationFrameとupdateを繰り返しています。 requestAnimationFrameはJavScriptのデフォルトで使えるメソッド(Windowsオブジェクト)になります。これでブラウザが動画をレンダーする際に、update()を繰り返すようにしています。 update関数で使う用語を説明します。 lon:Longitude(経度) lat:Latitude(緯度) phi:poles(極・極座標) theta:equator angle(赤道角) これで、マウスを使って目線を変えるときの位置情報を更新するようにしました。

three.jsを使ってみよう

three.js 使い方

今日はJavaScriptライブラリで3Dオブジェクトを使う事ができるthree.jsを紹介します。 今回は基本としてオブジェクトを作成するところまで説明したいと思います。 環境 three.jsをインストール では、公式ドキュメンテーションに沿ってライブラリをインストールしましょう。 ついでにgsapのライブラリもインストールします。 これはブラウザに関係なくJavaScriptのアニメーションを動かしてくれるヘルパーになります。 Viteを使わなくても良いですが、お勧めなのでVanilla JSでもViteを使ってプロジェクトを作成してみましょう。 これでブラウザからデフォルトのぺージが見れるようになりました。 three.jsを始める前に three.jsでは3Dのオブジェクトが使えます。という事はそれに合わせて3Dを出力するための情報が必要になるわけですね。 必要な情報は: ①シーン(scene):風景。three.jsに何をどこにレンダーするか決めます。 ②キャラクター:モノや、キャラのオブジェクト ③ライト:光の方向や強さなどを調整します。 ④カメラ(camera):対象物に向けます。デフォルトでは、対象物と同じ位置なので離してあげます。 ⑤レンダラー(renderer):シーンをHTMLにレンダーしてくれます。 では、下記の例が基本の例です。 これでHTMLに球体が表示されました。 キャラクター それぞれのメソッドに入れる引数で各パラメータを変えることができます。 上記の例では、SphereGeometry()で球体を呼び出しています。公式ドキュメンテーションでパラメータを変えながら実物をビジュアル化して確認することができます。 キャラクター(物体)のコードの例をおさらいします。 SphereGeometryの部分で形を指定します。 他にBoxGeometry(四角・箱型)や、ConeGeometry(コーン、三角の角)の形までいろいろあります。 このSphereGeometry( 15, 32, 16 )のコンストラクタの使い方を説明します。 今回はSphereGeometry(球体)で説明します。デフォルト値や入る値はそれぞれの形で変わるので参考までに理解して、応用してください。 radius — 半径(デフォルトで1)widthSegments — 水平のラインの数(最小値3、デフォルトで32)多いほどなめらかになります。heightSegments — 垂直のラインの数(最小値2、デフォルトで16)多いほどなめらかになります。phiStart — (水平のスタートする角度、デフォルトで0) 他に、phiLength、thetaStart、thetaLengthなども指定できますが、省きます。 素材 では、形(シェイプ)を決めたところでその素材(マテリアル)を決めます。これにより、光の反射の仕方やテクスチャ(感触)が変わってきます。 例としてMeshNormalMaterialを使うとこのように書けます。 このマテリアルはベクター素材をRGBカラーに変換してくれます。 素材の種類だけでもこんなにあります。 さらに各素材で指定できるパラメータがあるので必要に応じて確認してください。 これで、シェイプ(形)とマテリアル(素材)を合わせて物体を作成してシーンに追加します。 ライト 次にライトを見てみます。ライトの設定で、先ほど作成した対象物の見え方が変わってきます。 例えば、HemisphereLightを使うとこのように見えます。 このHemisphereLightは上空から照らすライトなのでこのような影が生成されます。 他に、AmbientLightを使うとこのようにグローバルに対象物を照らすライトが全体を明るくしてくれます。 AmbientLightだけだと方向の概念がないために、3Dのように見えませんね。 … Read more