分123前回の第5回「スカイボックスで3次元空間に背景をつくる」は,3次元空間にスカイボックスで背景を定めて,その中をカメラで水平に見回した。今回は,真ん中にドーナッツ型を加えて背景を映し込むとともに,カメラの向きをインタラクティブに回り込ませる。mapping」に仕上げたい。スカイボックスの中にドーナッツ型を置くまずは,スカイボックスの中にドーナッツ型を置く。TypeScriptで基本的な3次元の形状をつくる」の「球体以外の基本的なかたちをつくる」ですでに説明した。PrimitiveTorusPrefabクラスでひながたをつくり,そこからPrefabBase.getNewObject()メソッドでドーナッツ型のMeshオブジェクトを得ればよい。第5回コード2「3次元空間に定めたスカイボックスの中で水平にカメラを回す」に手を加えていく。ドーナッツ型をつくる関数(createTorus())はつぎのように定め,初期設定の関数(initialize())から呼び出す。今回のお題ではテクスチャをあてないので,TriangleMethodMaterial()コンストラクタに引数は渡していない。光源(MaterialBase.lightPickerプロパティ)も与えない。torus;}ドーナッツ型のカラー(MaterialBase.colorプロパティ)は確認用に暗い青(0x111199)を定めた。確かめてみると,スカイボックスの中に青いドーナッツ型が表れる。カメラが動いて画角から見切れてしまう(図1⁠)⁠。これは,カメラが自分の居場所を中心にして回っているからだ。カメラが回るとドーナッツ型が見切れるドーナッツを真ん中に据えて,回り込むようにカメラを動かすにはどうしたらよいか。したパズルのような工夫をする。カメラをドーナッツ型の中心である原点に置く。つぎにカメラを回転してから,とるべき間合いの分だけ後ろに下がればよい。0)は,Vector3Dオブジェクトでつぎのように変数(zeroVector3D)にとっておく。引数なしのデフォルト値が原点だ。原点からカメラまでの距離も変数(cameraZ)に定めた。カメラの位置はDisplayObject.transformプロパティから得たTransformオブジェクトで操作する。位置座標を定めるのはTransform.positionプロパティ,後ろに下がるにはTransform.moveBackward()メソッドを用いる。transform.moveBackward(-cameraZ);}これで,ドーナッツ型を画面の真ん中に捉えつつ,カメラが回り込むように動く。カメラの初期設定は加えておこう。その関数(setupCamera())を以下のように定めて,初期設定の関数(initialize())から呼び出す。DisplayObject.lookAt()メソッドメソッドでカメラの向きが定まる。デフォルトは原点なので,念のため加えた。PerspectiveProjection.fieldOfViewプロパティは,視野角を定める(図2⁠)⁠。デフォルトは60度なので,少し広角に拡げたことになる(※1⁠)⁠。PerspectiveProjection(fieldOfView);}視野角を拡げたので,前掲図1より広い範囲が映る。その真ん中にドーナッツ型を捉えてカメラが回るようになった。ドーナッツ型もx軸とy軸で回してみた(図3⁠)⁠。ここまでのスクリプトはコード1にまとめたとおりだ。view.render();}※1カメラの広角レンズは文字どおり視野角が広く,同じ距離でも広い範囲が撮影できる。他方,視野角の狭い望遠レンズは,写せる範囲が狭まるものの,遠くのものを近寄せる。視野角は遠近感にも影響を及ぼす。ふたつのものの奥行きの距離は,レンズが広角になるほど,離れて見える。これを,遠近感の「誇張効果」という。逆に,視野角の狭い望遠レンズでは,肉眼よりも距離が近づいて見える。一眼レフカメラでは,撮影する範囲や距離だけでなく,このような遠近感の効果も考えてレンズを選ぶ(⁠「⁠背景と遠近感」参照⁠)⁠。遠近法については「遠近法が投影された座標を求める」をご覧いただきたい。