three.js r73 Google Chrome 46.0.2490.86 m |
■three.jsで3D [ サンプルページの表示 ] | Prev Top Next | |
|
最近仕事ばっかりやっててすっかり趣味プロご無沙汰でしたが、ちょっとだけ3Dやります。
ということでthree.jsやります。フレームワーク使わないでWebGLプログラミングは既にやってるので今更感が半端ないですがまあいいでしょう。
まずは three.js をthree.js公式サイトのdownloadリンクからダウンロードします。
ダウンロードしたら解凍します。いろいろファイルがありますが、使うファイルは three.js または three.min.js です。
次に開発ですが、TypeScriptを使用します。ソースをアップしますのでTypeScriptのソースを全コピーして PlayGround サイトでJavaScriptにコンパイルしてください。
JavaScriptソースを使用して実行します。
class myThree { private renderer = null; private camera = null; private mesh = null; private rotation = new THREE.Vector3( 0, 0, 0 ); private scene = null; private _width: number = 600; private _height: number = 400; public get width(){ return this._width } public set width( value:number ) { this.dispose(); this._width = value; this.changeScene( document.getElementById("light").selectedIndex, document.getElementById("mesh").selectedIndex ); } public get height(){ return this._height } public set height( value:number ) { this.dispose(); this._height = value; this.changeScene( document.getElementById("light").selectedIndex, document.getElementById("mesh").selectedIndex ); } // レンダラ―作成 private createRenderer() { var renderer = new THREE.WebGLRenderer(); renderer.setSize( this.width, this.height ); renderer.setClearColor(0xf0f0ff); return renderer; } // カメラ作成 private createCamera() { const fov:number = 60; const aspect:number = this.width / this.height; const znear:number = 1.0; const zfar:number = 1000.0; var camera = new THREE.PerspectiveCamera( fov, aspect, znear, zfar ); // カメラ視点 camera.position.set( 0.0, 0.0, 50.0 ); // カメラの注視点 camera.lookAt( new THREE.Vector3( 0, 0, 0 ) ); return camera; } // メッシュ作成 private createMesh( meshIndex:number ) { switch (meshIndex) { // 箱メッシュ // http://threejs.org/docs/#Reference/Extras.Geometries/BoxGeometry case 0: var geometry = new THREE.BoxGeometry(10, 10, 10); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // 円メッシュ // http://threejs.org/docs/#Reference/Extras.Geometries/CircleGeometry case 1: var geometry = new THREE.CircleGeometry( 10, 12 ); // THREE.DoubleSide:両面表示 var material = new THREE.MeshPhongMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); var mesh = new THREE.Mesh( geometry, material ); return mesh; break; // 円柱メッシュ // http://threejs.org/docs/#Reference/Extras.Geometries/CylinderGeometry case 2: var geometry = new THREE.CylinderGeometry(5, 5, 20, 12); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // 12面体 // http://threejs.org/docs/#Reference/Extras.Geometries/DodecahedronGeometry case 3: var geometry = new THREE.DodecahedronGeometry(10, 0); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // 押し出し // http://threejs.org/docs/#Reference/Extras.Geometries/ExtrudeGeometry case 4: var shapes = new THREE.Shape([ new THREE.Vector2( -2,-2 ), new THREE.Vector2( -2, 2 ), new THREE.Vector2( 2, 2 ), new THREE.Vector2( 2,-2 ) ]); var options = { bevelEnabled: true, // べベル押し出しを有効にする bevelSegments: 6, amount: 10 // 押し出し量 }; var geometry = new THREE.ExtrudeGeometry( shapes, options ); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // 20面体 // http://threejs.org/docs/#Reference/Extras.Geometries/IcosahedronGeometry case 5: var geometry = new THREE.IcosahedronGeometry(10, 0); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // 旋盤( ラインに沿って回転オブジェクトを生成する ) // http://threejs.org/docs/#Reference/Extras.Geometries/LatheGeometry case 6: var points = []; for ( var i=0; i<10; i++ ) { points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15, 0, ( i - 5 ) * 2 ) ); } var geometry = new THREE.LatheGeometry( points ); var material = new THREE.MeshPhongMaterial( { color: 0x0000ff, side: THREE.DoubleSide } ); var mesh = new THREE.Mesh( geometry, material ); return mesh; break; // 8面体 // http://threejs.org/docs/#Reference/Extras.Geometries/OctahedronGeometry case 7: var geometry = new THREE.OctahedronGeometry(10, 0); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // パラメトリック // http://threejs.org/docs/#Reference/Extras.Geometries/ParametricGeometry case 8: alert( "未実装なメッシュ" ); return null; break; // 平面メッシュ // http://threejs.org/docs/#Reference/Extras.Geometries/PlaneGeometry case 9: var geometry = new THREE.PlaneGeometry(10, 10, 0); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // ポリゴンメッシュ // http://threejs.org/docs/#Reference/Extras.Geometries/PolyhedronGeometry case 10: // ポリゴンの頂点の座標 var vertices = [ -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1, -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1, ]; // 頂点のインデックス var faces = [ 2,1,0, 0,3,2, 0,4,7, 7,3,0, 0,1,5, 5,4,0, 1,2,6, 6,5,1, 2,3,7, 7,6,2, 4,5,6, 6,7,4 ]; var geometry = new THREE.PolyhedronGeometry( vertices, faces, 6, 1 ); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // リング // http://threejs.org/docs/#Reference/Extras.Geometries/RingGeometry case 11: var geometry = new THREE.RingGeometry(4, 10, 16); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // シェイプ // http://threejs.org/docs/#Reference/Extras.Geometries/ShapeGeometry case 12: var shapes = new THREE.Shape(); shapes.moveTo( 0,0 ); shapes.lineTo( 0, 5 ); shapes.lineTo( 10, 5 ); shapes.lineTo( 10, 0 ); shapes.lineTo( 0, 0 ); var geometry = new THREE.ShapeGeometry( shapes ); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // 球体 // http://threejs.org/docs/#Reference/Extras.Geometries/SphereGeometry case 13: var geometry = new THREE.SphereGeometry(10, 8, 8); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // 4面体 // http://threejs.org/docs/#Reference/Extras.Geometries/TetrahedronGeometry case 14: var geometry = new THREE.TetrahedronGeometry(10, 0); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // テキスト // http://threejs.org/docs/#Reference/Extras.Geometries/TextGeometry case 15: alert( "未実装なメッシュ" ); return null; break; // トーラス // http://threejs.org/docs/#Reference/Extras.Geometries/TorusGeometry case 16: var geometry = new THREE.TorusGeometry(10, 4, 6, 16); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // トーラスむすびめ // http://threejs.org/docs/#Reference/Extras.Geometries/TorusKnotGeometry case 17: var geometry = new THREE.TorusKnotGeometry(10, 4, 32, 16); var material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); var mesh = new THREE.Mesh(geometry, material); return mesh; break; // チューブ // http://threejs.org/docs/#Reference/Extras.Geometries/TubeGeometry case 17: alert( "未実装なメッシュ" ); return null; break; default: alert( "無効なライトです" ); break; } return null; } // 地面メッシュ作成 private createPlaneMesh() { var geometry = new THREE.BoxGeometry(50, 5, 50); var material = new THREE.MeshPhongMaterial({ color: 0x00af00 }); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, -15, 0); return mesh; } // シーン作成 private createScene() { var scene = new THREE.Scene(); return scene; } // ライト作成 private createLight( lightIndex: number) { switch( lightIndex ) { // 環境光 // http://threejs.org/docs/#Reference/Lights/AmbientLight case 0: // 環境光の色 var ambientLight = new THREE.AmbientLight( 0x505050 ); return ambientLight; break; // 平行光源 // http://threejs.org/docs/#Reference/Lights/DirectionalLight case 1: // 平行光源の色、強度 var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); // 光源から原点に向かう平行光源の方向ベクトル directionalLight.position.set( 1.0, 3.0, 2.0); return directionalLight; break; // 点光源 // http://threejs.org/docs/#Reference/Lights/PointLight case 2: // 点光源の色、強度、減衰率( 0で減衰なし ) var pointLight = new THREE.PointLight( 0xffffff, 1, 0 ); // 点光源の座標 pointLight.position.set(10.0, 10.0, 10.0); return pointLight; break; // 半球ライト // http://threejs.org/docs/#Reference/Lights/HemisphereLight case 3: // 空の色、地面の色、強度 var hemisphereLight = new THREE.HemisphereLight( 0xa0a0ff, 0xa0ffa0, 1 ); return hemisphereLight; break; // スポットライト // http://threejs.org/docs/#Reference/Lights/SpotLight case 4: // 色、強度、光が届く距離、光の範囲( 最大値:Math.PI/2 )、減衰率、光が暗くなる量 var spotLight = new THREE.SpotLight(0xffffff, 1, 40, Math.PI / 3, 2, 0.5); // ライトの視点 spotLight.position.set(5.0, 10.0, 0.0); // ライトの注視点 spotLight.lookAt( new THREE.Vector3( 0, 0, 0 ) ); return spotLight; break; default: alert( "無効なライトです" ); break; } return null; } // シーン変更 public changeScene( lightIndex:number, meshIndex:number ) { if( this.renderer == null ) { this.renderer = this.createRenderer(); document.body.appendChild( this.renderer.domElement ); } if( this.camera == null ) { this.camera = this.createCamera(); } this.scene = this.createScene(); this.scene.add(this.createLight(lightIndex)); this.scene.add(this.createPlaneMesh()); this.mesh = this.createMesh(meshIndex); this.scene.add(this.mesh); } // メッシュのアニメーション public animationMesh( x:number, y:number, z:number ) { if( this.mesh != null ) { this.rotation.x += x; this.rotation.y += y; this.rotation.z += z; this.mesh.rotation.set( this.rotation.x, this.rotation.y, this.rotation.z ); } } // レンダリング public render() { if( this.renderer != null ) { this.renderer.render( this.scene, this.camera ); } } public dispose() { if( this.renderer != null ) { var element = document.getElementsByTagName("canvas"); if( element.length == 1 ) { document.body.removeChild(element[0]); } this.renderer.dispose(); this.renderer = null; } this.camera = null; } } var mythree = new myThree(); // シーンの初期化 function initialize() { if( mythree != null ) { mythree.changeScene(document.getElementById( "light" ).selectedIndex, document.getElementById( "mesh" ).selectedIndex ); } } // メインループ function main() { ( function renderLoop () { requestAnimationFrame( renderLoop ); mythree.animationMesh( 0, 0.005, 0.005 ); mythree.render(); } )(); }