Tag: Javacsript

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 とは?~原理理解編~』 シーン、カメラ、レンダラー、メッシュについて