【Three.js】静止画面表示のサンプル

threejs
three.jsをコーディングするなら、コード補完も使えるTypeScriptでの開発が断然おすすめ!
【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

単純なオブジェクトをレンダリングするサンプル。
アニメーションなどはなし。

デモ

JavaScript

TypeScript

【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

threejs
three.jsに限った話ではないが、開発をする上ではできればコード補完(インテリセンス)を効かせたい。
開発効率も上がるし、タイプミス、それに伴うバグを防ぐことができる。
three.jsでもTypeScriptを使うことによって、コード補完を効かせることが可能。
そのためには、ライブラリのオブジェクトの型を定義した型定義ファイル(.d.ts)をソリューションに追加する必要がある。
以下にTypeScriptによるコード補完を使用したthree.js開発環境の構築手順を記す。

型定義ファイルのインポート

TypeScriptからthree.jsのライブラリを参照するためには、型定義ファイルと呼ばれるファイルが必要。
これは、ライブラリ(ここではthree.js)で定義されているオブジェクトの定義情報を記載したファイルのこと。
TypeScriptからこの情報を参照することで、型判定やコード補完を効かせることができるようになる。

型定義ファイルは、GitHub上の「DefinitelyTyped」と呼ばれるリポジトリに配置されている。
上記はコミュニティ主導のリポジトリではあるが、実質TypeScriptの公式リポジトリである。
TypeScriptから参照したいライブラリがある場合、このDefinitelyTypedリポジトリからファイルをCloneやダウンロードすればよい。

ただし、VisualStudioを使って開発を行う場合はNuGetを使用して、もっと簡単に型定義ファイルの設定ができる。
ソリューションエクスプローラーからソリューションを選択し、「右クリック>NuGetパッケージの管理」などからNuGetパッケージマネジャーを起動する。
NuGetパッケージマネジャーの検索バーに「threejs DefinitelyTyped」と入力し、「threejs.TypeScript.DefinitelyTyped」をインストール。
1.threejs.TypeScript.DefinitelyTyped

ソリューション直下に、Scrripts>typings>threejsのようにフォルダが作成され、配下に型定義ファイル(d.ts)が配置されていればOK。
2.インストール確認

TypeScriptから型定義ファイルを参照する

NuGetから型定義ファイルをダウンロードしただけでは、TypeScriptから参照することはできない。

TypeScriptのファイルに以下のように記述することで、型定義ファイルを参照することができるようになる。

また、直接記述する以外にも、参照元TypeScriptファイルに型定義ファイルをドラッグ&ドロップすることでも可能。
こちらの方が記述間違いなども起こらないので、特別な理由がない場合は、こちらを推奨。

また、NuGetからインストールしただけだとビルドが通らないので、以下を実施する必要がある。
three.d.tsをソリューションの直下にコピー、その後TypeScriptに型定義の参照設定の記述をする。
Scripts配下のフォルダーをソリューションから除外する。

three.js本体をソリューションに追加

以下からthree.js本体をダウンロード。
https://threejs.org/

ダウンロード、展開すると大量のファイルがあるが、ひとまず必要なのは、build配下のthree.jsやthree.jsなどのファイルのみ。
それらのファイルをソリューションに追加する。
(ソリューションを右クリック>追加>既存の項目 から上のファイルを選択)

最終的なソリューション構成は以下のような感じになる。
3.ソリューション構成

これでTypeScriptからコード補完を使用しながらthree.jsのコーディングが可能になる。
4.コード補完

参考

Visual StudioとTypeScriptでJavaScriptライブラリを活用する – Build Insider
[TypeScript][WebGL][Three.js] 3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~ ― 準備編 (プログラミング C# – 翔ソフトウェア (Sho’s))

【jQuery】Class属性の追加、削除、切り替えのサンプル

jQuery
jQueryでは直接インラインでスタイルを指定することができるが、これを多用してしまうとどこでスタイルを設定しているのか、スタイルを確認するためにJavaScriptのコードを読まないといけないといった問題が起きる。
そのため、スタイルはCSSで設定し、Class属性を着脱、切り替えることでスタイルを適用する方が良い。
以下は、スタイルを切り替える際のサンプル。

■デモ

  • アイテム1



■HTML

■JavaScript

【jQuery】フォトギャラリーのサンプル

jQuery
jQueryを使ったフォトギャラリーのサンプル。
上の画像をクリックすると、下に拡大表示される。
(サンプルコードでは、リストにマウスオーバー時にサムネイルの色が変わるが、デモでは機能していないので注意)

■デモ


■HTML

■CSS

■JavaScript

【jQuery】基本セレクターのサンプル

jQuery
■デモ

id=listの下にあるa要素のCSSを変更
class=itemの直下にあるa要素のCSSを変更
class=itemの次にある兄弟ノードのp要素のCSSを変更
class=itemの次以降にある兄弟ノードのp要素のCSSを変更
id=list配下すべての要素のstyleをリセット

■HTML

■JavaScript

【jQuery】属性セレクターのサンプル

jQuery
■デモ

  • アイテム1
  • アイテム2
  • アイテム3

id属性を持つli要素にスタイルを設定する。
id属性がitem3であるli要素にスタイルを設定する。
id属性がitem3でないli要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。

■HTML

■JavaScript

【jQuery】複数スタイルを設定するサンプル

jQuery
ハッシュを使用することで、複数のスタイルをまとめて設定することができる。
ハッシュで指定する場合、CSSのプロパティ名は以下のようにキャメルケースとなるため注意。
background-color → backgroundColor

  • アイテム1

複数スタイルをまとめて設定。

■HTML

■JavaScript

【jQuery】要素フィルターのサンプル

jQuery

■デモ

  • アイテム1

全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する
奇数と偶数要素にスタイルを設定する。
n番目の要素にスタイルを設定する。
n番目より前/後ろの要素にスタイルを設定する。
テキストの内容で絞り込む。
特定の子要素を持つ要素を絞り込む。
親要素を起点に合致する最初と最後の要素を取り出す。
n個おきに要素にスタイルを設定する。
唯一の子要素にスタイルを設定する。

■HTML

■JavaScript

【JavaScript】関数内で引数の数をチェックするサンプル

JavaScript
argumentsオブジェクトは関数に渡された引数を全て持つ。
なので、argumentsオブジェクトを使用することで、以下のように引数の数をチェックすることができる。

【JavaScript】関数を引数として渡す-高階関数

JavaScript
JavaScriptでは、関数を変数のように渡すことができる。
これにより、渡した関数によって動的に処理を切り替えることができる。