Web上で3DCGを表現する「three.js」を使ってみた!
こんにちは!Webディレクターの酒主です。
映画、アニメ、ゲームなど、様々な媒体で表現方法として使用されている3DCGですが、最近ではWebGLを使用したサイトや3Dコンテンツも増えてきて、表現の幅を広げています。
3DCG制作の経験が少しある私としては、ちょっと心惹かれるWebGL… でもJavaScriptなんて知らない…
そんな初心者でも、WebGLを簡単に扱える「three.js」というJavaScriptライブラリーがあるらしいので、ご紹介したいと思います。
■「three.js」を入手する!
「three.js」はこちらから入手できます
http://threejs.org/
左側にあるメニューの「download」ボタンから一式を落としてください。
■図形を作成してみる!
three.jsについては、いろんな人が作成方法を紹介しています。
ファイル一式をダウンロードしてきただけではわからないので、記述する内容を調べつつ、回転する球を作成してみようと思います。
まずは、レンダラ―を初期化します。
//レンダラーが2つあります。 //「WebGLRenderer」はthree.jsの全機能が使えますが、 //「CanvasRenderer」は一部機能しか使えません。 //「antialias:true」はアンチエイリアスを有効(ture)にするか、 //無効(false)にするか決められます。 var renderer = new THREE.WebGLRenderer({ antialias:true }); //3Dを表示するエリアを設定します。500px × 500pxにしています。 renderer.setSize(500, 500); //設定したエリアの背景色(「dcdcdc」の部分です。16進数で指定)と、 //透明度(「1.0」と設定しているところ)が設定できます。 renderer.setClearColorHex(0xdcdcdc, 1.0); //レンダラーをDOMに設置します。 document.body.appendChild(renderer.domElement); }
次に、シーンとカメラを作成します。
//シーンを作成します。 var scene = new THREE.Scene(); //カメラの設定です。 //「PerspectiveCamera」は透視投影カメラです。 //「15」と設定しているのは外角です。小さいほど望遠(視野が狭く)になり、 //大きいほど広角(視野が広く)なります。「500 / 500」は画面アスペクト比です。 var camera = new THREE.PerspectiveCamera(15, 500 / 500); //カメラの位置(x,y,z)を設定します。 camera.position = new THREE.Vector3(0, 0, 8); //カメラが写す方向(x,y,z)を設定します。 camera.lookAt(new THREE.Vector3(0, 0, 0)); //シーンにカメラを追加します。 scene.add(camera);
シーンにライトを設定します。
// ライトの光の色(「0xcccccc」の「cccccc」部分。16進数です)を設定します。 var light = new THREE.DirectionalLight(0xcccccc); //ライトが差してくる方向を設定しています。 light.position = new THREE.Vector3(0.577, 0.577, 0.577); //シーンにライトを置きますよーという宣言です。 scene.add(light); //「AmbientLight」は自然光のように全体に光を当てることができます。 //「0x333333」は色の設定になります。 var ambient = new THREE.AmbientLight(0x333333); //シーンにambientを追加します。 scene.add(ambient);
※一部だけに光を当てたい場合は「SpotLight」という設定もあります
表示する3D(球体)を作成します。
//球体(SphereGeometry)を作成します。 //(0.8, 32, 16)は左から、半径、経度方向の分割数、緯度方向の分割数です。 var geometry = new THREE.SphereGeometry(0.8, 32, 16); //球体のマテリアル(貼り付ける画像や質感など)を設定します。 var texture = THREE.ImageUtils.loadTexture('images/metal_00017.jpg'); var material = new THREE.MeshPhongMaterial({ //球体の色(color)、ハイライト(specular)、ハイライトの大きさ(shininess)、 //陰の部分の色(ambient)をそれぞれ設定します。 color: 0xffffff, specular: 0xcccccc, shininess:50, ambient: 0xffffff, //球体のマテリアルに対して、凹凸表現(bumpMap)を追加(bumpScale: 0.005)します。 map: texture, bumpMap: texture, bumpScale: 0.005,}); //設定した球体とマテリアルからメッシュを作成します。 var mesh = new THREE.Mesh(geometry, material); //メッシュをシーンに追加します。 scene.add(mesh);
作成してみた感想
記述するにあたり、3DCGや映像の制作経験があると、なじみのある言葉が多く存在しました。
カメラ(camera)の存在をはじめ、ライト(DirectionalLightやAmbientLight)の設定、マップ(textureやbumpMap)の存在などなど…
モデリングができる人は、自分が作ったモデリングデータを各ソフト(3dsMAXやBlenderなど)からエクスポートで書き出し、呼んでくることができます。(アニメーションなども持ってこられるらしい)
自分の作成したモデルがWeb上で動くなんて、ちょっとわくわくしませんか?
初心者にも簡単にできるので、少しでも興味がある人は触ってみてはいかがでしょうか?
案外、はまってしまうかもしれませんよ!
※自作したモデリングデータを使用したい場合は、専用のエクスポータをアドオンとして追加する必要があります
※three.jsのバージョンによっては、上記記述でうまく動作しない場合があります