Threejs3D Code Play

Threejs3D Code Playは、コードを編集し、その結果をインタラクティブな3Dシーンとして確認することで、Three.jsを学習できるアプリです。まずはサンプルコードから始め、HTMLとJavaScriptを変更して、アプリ内で実行してみましょう。

動作するシーンを通して学習

学習実験やあらかじめ定義されたアニメーションシーンを通して、99種類のサンプルを探索できます。シェイプ、マテリアル、ライティング、カメラから始め、パーティクル、シェーダー、インタラクションについて学びましょう。より大規模な学習を始めたい場合は、太陽系、海の波、抽象的なアニメーションシーンを試してみてください。

5つの学習パスでは、基礎、ジオメトリ、色と光、モーション、クリエイティブワークショップの5つのカテゴリにサンプルコードが整理されています。レッスンを完了したらマークし、パスを進め、便利なサンプルをお気に入りに追加し、最近開いたシーンに戻ることができます。

編集、実行、検証

コードエディタでサンプルコードを開くか、Three.jsをインポート済みの新しいプロジェクトを開始できます。構文ハイライト、元に戻す/やり直し、検索/置換、行移動などの機能を利用できます。実行プレビューに切り替えると、現在のコードを確認したり、コンソールメッセージやエラーを調べたりできます。

付属のシーンプレビューでは、ドラッグで回転、ピンチ操作でズームイン/ズームアウトできます。対応シーンでは、ライブコントロールを使用して、色、アニメーション速度、ライティング、ジオメトリ、単色またはグラデーションの背景を自由に操作できます。利用可能なコントロールはシーンによって異なります。

実験を保存

プロジェクトに名前を付けて保存し、「マイプロジェクト」から再度開くことができます。HTMLファイルを開いて既存の作業を続けるか、「名前を付けて保存」を使用して別のコピーを保存できます。

プロジェクトをHTMLまたはZIP形式でエクスポートまたは共有できます。エクスポートには、認識されたThree.jsライブラリが含まれます。カスタムの外部アセットは外部に保存されます。ZIPファイルを解凍し、そのフォルダをHTTP経由で配信すると、アプリ外でプロジェクトを開くことができます。

壁紙をアニメーション化

必要なネイティブサポートを備えた互換性のあるAndroidデバイスでは、アニメーションシーンをシステムライブ壁紙プレビューに送信し、そこで選択を確認できます。利用可能な壁紙の送信先はデバイスによって異なります。

このアプリは、小さな実験を通して3Dコーディングを練習したい学生、趣味で3Dプログラミングを行う人、Web開発者向けに開発されました。付属のサンプルはローカルライブラリを使用します。カスタムのリモートリソースや広告にはインターネット接続が必要な場合があります。アプリには広告が含まれています。