ばね形状オブジェクトの生成（three.js）
３次元グラフィックス（WebGL）ライブラリ「three.js」で利用することができるばね型形状オブジェクト（Geometryクラス）を紹介します。
実行例
ばねの全長、ばねの太さ、ばねの巻数などを指定することができます。 また、３次元空間上の２点を結ぶようにばねを伸び縮させることもできます。
ばね形状オブジェクト（SpringGeometryクラス）
ばね形状の詳細な生成方法はこちらを参照下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 | ///////////////////////////////////// ばね形状オブジェクトの定義///////////////////////////////////function SpringGeometry ( radius, tube, length, windingNumber, radialSegments, tubularSegments ){ //Geometryクラスを継承 THREE.Geometry.call( this ); this.radius = radius || 10; //ばねの半径 this.tube = tube || 2; //管の半径 this.length = length || 50; //ばねの長さ this.windingNumber = windingNumber || 10; //ばねの巻き数 this.radialSegments = radialSegments || 20; //外周の分割数 this.tubularSegments = tubularSegments || 20; //管周の分割数 this.setSpringVertices( this.radius, this.tube, this.length, this.windingNumber, this.radialSegments, this.tubularSegments ); this.setSpringFaces( this.radius, this.tube, this.length, this.windingNumber, this.radialSegments, this.tubularSegments ); //面の法線ベクトルを計算 this.computeFaceNormals( ); //面の法線ベクトルから頂点法線ベクトルの計算 this.computeVertexNormals( );}SpringGeometry.prototype = Object.create( THREE.Geometry.prototype );SpringGeometry.prototype.constructor = SpringGeometry;//頂点座標の設定SpringGeometry.prototype.setSpringVertices = function ( radius, tube, length, windingNumber, radialSegments, tubularSegments ){ var geometry = this; /////////////////////////////////////////////////////////////////////////// //（０）必要な変数の準備 /////////////////////////////////////////////////////////////////////////// radius = radius || 1; //ばねの半径 tube = tube || 0.2; //管の半径 length = length || 5; //ばねの高さ var Nw = windingNumber || 10; //巻き数 var Nr = radialSegments || 10; //外周分割数 var Nt = tubularSegments || 10; //管周分割数 //管断面作成当たりの高さの増分 var deltaH = length / Nw / Nr; var n = 0; var v = new THREE.Vector3(); /////////////////////////////////////////////////////////////////////////// //（１）ばねオブジェクトを構成する頂点座標の取得 /////////////////////////////////////////////////////////////////////////// for( var w = 0; w < Nw; w++ ){ //巻き番号 for( var r = 0; r < Nr; r++ ){ //外周の分割番号 var phi = 2.0 * Math.PI * r/Nr; //外周の分割番号 //管断面の中心座標のz成分 var h = deltaH * ( Nr * w + r); for( var t = 0; t < Nt; t++ ){ //管の分割 var theta = 2.0 * Math.PI * t / Nt; //管の分割角 v.set( ( radius + tube * Math.cos( theta) ) * Math.cos(phi), //x座標 ( radius + tube * Math.cos( theta) ) * Math.sin(phi), //y座標 tube * Math.sin( theta) + h - length / 2 //z座標 ); if( geometry.vertices[ n ] ) geometry.vertices[ n ].copy( v ); else geometry.vertices[ n ] = v.clone() n++; } } } /////////////////////////////////////////////////////////////////////// //最後の管断面の頂点座標 var w = Nw; var r = 0; //管断面の中心座標のz成分 var h = deltaH * ( Nr * w + r); for( var t = 0; t < Nt; t++ ){ var phi = 0.0; var theta = 2.0 * Math.PI * t / Nt; //管の分割角 v.set( ( radius + tube * Math.cos( theta) ) * Math.cos(phi), //x座標 ( radius + tube * Math.cos( theta) ) * Math.sin(phi), //y座標 tube * Math.sin( theta) + h - length / 2 //z座標 ); if( geometry.vertices[ n ] ) geometry.vertices[ n ].copy( v ); else geometry.vertices[ n ] = v.clone() n++; } //最初の管断面の中心座標 v.set( radius, 0, - length / 2); if( geometry.vertices[ n ] ) geometry.vertices[ n ].copy( v ); else geometry.vertices[ n ] = v.clone() n++; //最後の管断面の中心座標 v.set( radius, 0, length / 2); if( geometry.vertices[ n ] ) geometry.vertices[ n ].copy( v ); else geometry.vertices[ n ] = v.clone() n++;}//ポリゴン面の設定SpringGeometry.prototype.setSpringFaces = function ( radius, tube, length, windingNumber, radialSegments, tubularSegments ){ var geometry = this; var Nw = windingNumber || 10; //巻き数 var Nr = radialSegments || 10; //外周分割数 var Nt = tubularSegments || 10; //管周分割数 /////////////////////////////////////////////////////////////////////////// //（２）ばねオブジェクトを構成する面指定配列の設定 /////////////////////////////////////////////////////////////////////////// for( var w = 0; w < Nw; w++ ){ //巻き番号 for( var r = 0; r < Nr; r++ ){ //外周分割数 //巻き番号の指定 var w1 = w; var w2 = ( r !== Nr -1 )? w : w + 1; //外周分割番号の指定 var r1 = r; var r2 = ( r !== Nr -1 )? r + 1 : 0; for( var t = 0; t < Nt; t++ ){ //管分割数 //管分割番号 var t1 = t; var t2 = ( t !== Nt -1 )? t + 1 : 0; //平面を構成する４点の頂点番号の算出 var v1 = (Nr * Nt) * w1 + Nt * r1 + t1; var v2 = (Nr * Nt) * w1 + Nt * r1 + t2; var v3 = (Nr * Nt) * w2 + Nt * r2 + t1; var v4 = (Nr * Nt) * w2 + Nt * r2 + t2; //頂点番号v1,v3,v4を面として指定 geometry.faces.push ( new THREE.Face3( v1, v3, v4) ); //頂点番号v4,v2,v1を面として指定 geometry.faces.push ( new THREE.Face3( v4, v2, v1) ); } } } /////////////////////////////////////////////////////////////////////// //最初の管断面の面を指定 var w = 0 var r = 0 for( var t = 0; t < Nt ; t++ ) { //管分割数 //管分割番号 var t1 = t; var t2 = ( t !== Nt -1 )? t + 1 : 0; //管断面の中心座標とその他の２点の頂点番号 var v1 = (Nr * Nt) * Nw + Nt; var v2 = (Nr * Nt) * w + Nt * r + t1; var v3 = (Nr * Nt) * w + Nt * r + t2; geometry.faces.push( new THREE.Face3( v1, v2, v3 ) ); } //最後の管断面の面を指定 var w = Nw; var r = 0; for( var t = 0; t < Nt ; t++ ) { //管分割数 //管分割番号 var t1 = t; var t2 = ( t !== Nt -1 )? t + 1 : 0; //管断面の中心座標とその他の２点の頂点番号 var v1 = Nw * Nr * Nt + Nt + 1; var v2 = (Nr * Nt) * w + Nt * r + t1; var v3 = (Nr * Nt) * w + Nt * r + t2; geometry.faces.push( new THREE.Face3( v1, v3, v2 ) ); }}//頂点座標の再設定SpringGeometry.prototype.updateSpringGeometry = function( radius, tube, length ){ this.radius = radius || this.radius; this.tube = tube || this.tube; this.length = length || this.length; this.setSpringVertices( this.radius, this.tube, this.length, this.windingNumber, this.radialSegments, this.tubularSegments ); //面の法線ベクトルを計算 this.computeFaceNormals( ); //面の法線ベクトルから頂点法線ベクトルの計算 this.computeVertexNormals( ); this.verticesNeedUpdate = true; this.normalsNeedUpdate = true;} |
ばね形状オブジェクトの生成方法
通常の形状オブジェクトと同様、Meshクラスの引数に与えることで３次元オブジェクトを生成することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //形状オブジェクトの宣言と生成var geometry = new SpringGeometry( 5, //ばねの半径 1, //管の半径 25, //ばねの長さ 5, //ばねの巻き数 20, //外周の分割数 20 //管周の分割数);var material = new THREE.MeshNormalMaterial();//ばねオブジェクトの生成spring = new THREE.Mesh(geometry, material);//ばねオブジェクトのシーンへの追加scene.add(spring); |
ばねの始点と終点を指定
３次元空間上の２点を結ぶようにばねを伸び縮させるためのメソッドを用意します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //メソッドの追加spring.setSpringBottomToTop = function ( bottom, top ){ //ばねオブジェクトの底面中心から上面中心へ向かうベクトル var L = new THREE.Vector3( ).subVectors( top, bottom ); //ばねの中心座標 var R = new THREE.Vector3( ).addVectors( top, bottom ).multiplyScalar( 1/2 ); //ばねオブジェクトの位置を指定 this.position.copy( R ); //ばねの形状オブジェクトの更新 this.geometry.updateSpringGeometry ( this.radius, //外円の半径 this.tube, //管円の半径 L.length() //バネの長さ ); //ばねの向きを指定 this.lookAt( top );} |
上記の実行例では、描画ステップごとにばねの下底と上底の座標を次のように更新しています。
1 2 3 4 5 6 | //下底の位置ベクトルvar bottom = new THREE.Vector3( 5 * Math.sin( Math.PI*step/60 ), 0, 0);//上底の位置ベクトルvar top = new THREE.Vector3( 0, 5 * Math.sin( Math.PI*step/120 ), 20 + 15 * Math.sin( 2*Math.PI*step/60 ) );//ばね形状の更新spring.setSpringBottomToTop( bottom, top ); |
