Category: JavaScript
-
Three.jsとは?(環境構築編)
Three.jsとは、Webブラウザ上で3Dグラフィックスを作成するためのJavaScriptライブラリです。Three.jsは、WebGLを基盤としており、WebGLはWebブラウザ上でハードウェアアクセラレーションを利用して3D描画を行うためのAPIです。簡単にいうと、Three.jsを使えば、Webで3Dアニメーションを描画できちゃうよ。というものです。ゲーム開発、AR、VRなどの領域でも活躍できるそうです。今回はThree.jsを触った事がない方向けに、サラッとThree.jsがどのようなものかを理解し、何か作れる記事です。 まずは、three.jsのサンプルを触ってみよう 環境構築するための事前準備 Viteでプロジェクト作成 Viteで最速に環境構築しちゃいます。 自身の作業ディレクトリ内でnpm create vite three-project Vanilla を選択してEnter JavaScript を選択してEnter これでプロジェクトが作成されました。 続いて、 cd three-project で作成したディレクトリ内へ移動し、 npm install でパッケージ達をインストールします。 npm run dev でローカルサーバーを立ち上げます。 画像のような、http://から始まるリンクをコピーしてブラウザで開きましょう。 リンクアクセスして以下のような、Hello Vite!が表示されたら、成功です。 Three.jsをインストール 続いて、Three.jsをプロジェクトにインストールします。 Three.js公式ドキュメントのInstallationに従い、 npm install –save three をターミナルに入力し、Enter これでThree.jsがインストールされます。 サンプルコードを動かしてみる 試しに、main.jsに既存のコードを削除し、Three.jsのREADMEのsampleコードを入力します。 以下のコードに置き換えてください。 保存してブラウザを確認すると、以下のような立体の正方形がぐるぐる回っていたら、正常にThree.jsの読み込みされています。 Join our team！ ご覧いただきありがとうございました。テラドローンではエンジニアを募集しています！一緒にテラドローンで技術のアップデート・社会に役立つプロダクト開発を行っていきたい方ぜひCasual Talk へ気軽にお申し込みください。 次は『Three.js とは?~原理理解編~』 シーン、カメラ、レンダラー、メッシュについて
-
TypeScriptでライブラリのラッパーを作成する
TypeScriptを用いて実装しているプロジェクトの中で使用するライブラリの選定を行った時のこと ライブラリをそのまま呼び出さずにラッパーを作成すると良いとのことで、色々調べながら実装したのでその覚え書きです。 目次 ラッパーとは ラッパーを作ると何が出来るか ライブラリをラップする 実際に作成する まとめ ラッパーとは ラッパー(wrapper)とは、関数やクラス・ライブラリなどを包み込む外側の関数やクラスのことです。 例えば、関数を包み込む関数を作成することをラップすると言います。 今回は、TypeScriptでライブラリ丸ごと全部ラップするものを作成します。 ラッパーを作ると何が出来る？ そもそも、なぜラッパーを作る必要があるのか？作るとどんなメリットがあるのか？について整理していきます。 ラッパーの作成メリットの一つとして、ラッパーを作成することで仕様変更への対応コストが下がるという事が挙げられます。 関数・クラスをラップすると、元の関数に何か変更が生じた際に外側のラッパーに修正を加えるだけでプログラム全体の修正は行わずに済むようになります。 例えば、以下のようなstringとnumberの引数を持つ関数があるとすると const func = (arg1:string, arg2:number) => { // 何かの処理 } hello("hello", 3); ラッパー関数はこのようになります。 const wrap = (arg1:string, arg2:number) => { func(arg1, arg2); } wrap("hello", 3); プロジェクト全体では、func関数は使わずラッパー関数であるwrapを呼び出すようにしておきます。 もしfunc関数に仕様変更が発生した際は、下記のように修正を加えます。 const func = (arg1:string, arg2:number) => { // 何かの処理 } //…