Three.jsとは、Webブラウザ上で3Dグラフィックスを作成するためのJavaScriptライブラリです。Three.jsは、WebGLを基盤としており、WebGLはWebブラウザ上でハードウェアアクセラレーションを利用して3D描画を行うためのAPIです。
簡単にいうと、Three.jsを使えば、Webで3Dアニメーションを描画できちゃうよ。というものです。
ゲーム開発、AR、VRなどの領域でも活躍できるそうです。
今回はThree.jsを触った事がない方向けに、サラッとThree.jsがどのようなものかを理解し、何か作れる記事です。
まずは、three.jsのサンプルを触ってみよう
- three.jsの公式ドキュメントを開く
- 体感する。
サンプル豊富なのと、こんなことまでできるのかとワクワクが止まりませんね。
環境構築するための事前準備
- VS Codeのインストール
- node.jsのインストール（node -vでバージョンが表示されることを確認してください。）
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コードを入力します。
以下のコードに置き換えてください。
import * as THREE from 'three';
// init
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
// animation
function animation( time ) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render( scene, camera );
}保存してブラウザを確認すると、以下のような立体の正方形がぐるぐる回っていたら、正常にThree.jsの読み込みされています。
Join our team！
ご覧いただきありがとうございました。テラドローンではエンジニアを募集しています！一緒にテラドローンで技術のアップデート・社会に役立つプロダクト開発を行っていきたい方
ぜひCasual Talk へ気軽にお申し込みください。
次は『Three.js とは?~原理理解編~』
シーン、カメラ、レンダラー、メッシュについて
masaki_iida
たまにReact触ってます。
TerraInspection、TerraCloud開発担当しております。