こんにちは!daimaです。
本日は、これから
Three.jsを学びたい初心者向けに、
簡単な3Dオブジェクトを
描画する方法をご紹介します。
実装サンプル
See the Pen
three.js test by DAI (@DAIIMANISHI)
on CodePen.
今回作成する3Dモデルです。
ドラッグで立方体の回転、
マウスホイール操作で
カメラのズームイン/アウトが行えます
Three.jsのダウンロード
Three.jsのダウンロードはこちらから。
ページ左側の「download」をクリックすると
ファイルのダウンロードが開始します。
フォルダをダウンロードできたら、
「build」フォルダ内のthree.min.jsと
「examples/js/controls」のOrbitControls.js、
そして、「examples/js」のDetector.jsの
3種のファイルを取り出して
使用したいページに読み込みます。
コード
//この関数に記述していく var main = function(){ //シーンの基本設定 var scene = new THREE.Scene(); var width = 600; var height = 400; var fov = 60; var aspect = width / height;//アスペクト比 var near = 1;//ここから var far = 1000;//ここまでの間に3Dの描画を行う var camera = new THREE.PerspectiveCamera( fov, aspect, near, far); camera.position.set(0,0,10);//カメラの位置。ここでは10手前に引いている var controls = new THREE.OrbitControls(camera); if(!Detector.webgl) Detector.addGetWebGLMessage(); //レンダラーをDOM上に設置する var renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setClearColor(0xFFFFFF, 1); renderer.setSize( width,height ); document.body.appendChild(renderer.domElement); //光源を設定する var directionalLight = new THREE.DirectionalLight( 0xffffff); directionalLight.position.set( 0, 0.7, 0.7); //光源の角度 scene.add(directionalLight); //geometry(形状)とmaterial(素材)を元に物体(Mesh)を作成 var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(0,0,4)); //頂点の作成 geometry.vertices.push(new THREE.Vector3(2,0,0)); geometry.vertices.push(new THREE.Vector3(0,-2,0)); geometry.vertices.push(new THREE.Vector3(-2,0,0)); geometry.vertices.push(new THREE.Vector3(0,2,0)); geometry.vertices.push(new THREE.Vector3(0,0,-2)); geometry.faces.push(new THREE.Face3(0,2,1)); //頂点を結んだ面の作成 geometry.faces.push(new THREE.Face3(0,3,2)); geometry.faces.push(new THREE.Face3(0,4,3)); geometry.faces.push(new THREE.Face3(0,1,4)); geometry.faces.push(new THREE.Face3(5,1,2)); geometry.faces.push(new THREE.Face3(5,2,3)); geometry.faces.push(new THREE.Face3(5,3,4)); geometry.faces.push(new THREE.Face3(5,4,1)); geometry.computeFaceNormals();//法線ベクトルの自動計算 geometry.computeVertexNormals();//シェーディングを滑らかにする //素材と形状からメッシュを作成 var material = new THREE.MeshNormalMaterial(); var mesh = new THREE.Mesh(geometry,material); scene.add(mesh); var wire = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true}); var wireMesh = new THREE.Mesh(geometry,wire);//同じ形状からワイヤーも作成 scene.add(wireMesh); renderer.render(scene,camera);//これまでに作った内容をレンダリング //作成したメッシュをアニメーションさせる (function renderLoop(){ requestAnimationFrame(renderLoop); controls.update(); mesh.rotation.set( 0, mesh.rotation.y + 0.02, mesh.rotation.z + 0.02 ) wireMesh.rotation.set( 0, mesh.rotation.y + 0.02, mesh.rotation.z + 0.02 ) renderer.render(scene,camera); })(); }; //関数mainをDOM構築完了後に読み込む window.addEventListener('DOMContentLoaded',main,false);
- レンダリングを行うRendererオブジェクトを用意する
- カメラの位置や角度を決めるCameraオブジェクトを用意する
- 光の色や強さを決めるDirectionalLightオブジェクトを用意する
- 3D描画する物体のgeometry(形状)とmaterial(表面)を指定する
- 指定したgeometryとmaterialを元に、mesh(物体)を作成
- Rendererオブジェクトでメッシュをレンダリング
Three.jsの実装の流れを
ざっくりとまとめました。
一見複雑ですが、
個別のステップに分けて考えれば
それほど難しくはありません。
多彩な表現力のWebGLを扱いやすくする「Three.js」
こちらでご紹介されているように、
オープンソースの3DCGツール「Blender」で作成した
3Dデータを読み込んで使用することも可能です。
これであれば、逐次
外観を確認しながら作業できるので、
かなり複雑な造形にも耐えられそうですね
Three.jsは三次元の座標を扱うため、
二次元のデザインに慣れきったwebコーダーにとっては
なかなか学習が大変ではありますが、
イベント系のサイトなど、
人目を引くインタラクティブなサイトを作るなら
是非抑えておきたい技術ですね。
参考サイト様
初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>
Three JS:Geometryでオリジナルの形状を作ってみる
コメント