ようやく3Dで作りたいものができたのでお勉強です。Sandyはちょこっと触ったことがあったんですがPapervisionの方が何かと情報が多いと思ったのでこちらで作成することにしました。
基本的な作り方は単純で分かりやすいね!と思ったらさっそくCubeの色付けで詰まったのでメモ。色付けというよりはマテリアルの変更と言ったほうが正しいかと思います。
Cubeは6面すべてに対して色やBitmapの貼り付けが可能で、Plane(平らなオブジェクト)とはちょっと扱い方が違うところが手間です。
PlaneとCubeのマテリアル設定方法の違い
以下、作成のソース。
// Planeの作成
var planeMaterial:ColorMaterial = new ColorMaterial(0x000000);
var plane:Plane = new Plane(planeMaterial, 500, 500, 15, 15);
// Cubeの作成
var cubeMaterial:ColorMaterial = new ColorMaterial(0x555555);
var cubeMaterialsList:MaterialsList = new MaterialsList();
cubeMaterialsList.addMaterial(cubeMaterial, "all"); // 6面すべて同じ
var cube:Cube = new Cube(cubeMaterialsList, 10, 10, 10);
Planeはnewするときにマテリアル情報(ここではColorMaterial)を指定してあげるだけで作成でき、Cubeは作成したマテリアル情報をMaterialsListに6面の設定を書き込み、CubeをnewするときにMaterialsListを指定してあげる。6面全体を同じにする場合は上記のように"all"を指定し、1面毎に設定する場合は"front"、"top"等で設定する。
Cube自体にマウスイベントを設定
Cube自体にマウスイベントを設定するのは簡単。
// cube マテリアル
var cubeMaterial:ColorMaterial = new ColorMaterial(0x555555);
cubeMaterial.interactive = true;
var cubeMaterialsList:MaterialsList = new MaterialsList();
cubeMaterialsList.addMaterial(cubeMaterial, "all"); // 6面すべて同じ
// cube 作成
var cube:Cube = new Cube(cubeMaterialsList, 10, 10, 10);
cube.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, cubeOver, false, 0, true);
cube.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, cubeOut, false, 0, true);
cube.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, cubeClick, false, 0, true);
Cube自体にマウスイベントを設定するには、
InteractiveScene3DEventを使用する。
その際、マテリアルには
cubeMaterial.interactive = true;のようにinteractiveの設定を行う。
Cubeをクリックし色を変える(マテリアルの変更)
とりあえず2つの方法がある事が分かったけど、結局1つの方法でよさそう。
1.Cubeのmaterialプロパティを置き換える方法。
private function cubeClick(evt:InteractiveScene3DEvent):void
{
var cube:Cube = evt.renderHitData.displayObject3D as Cube;
var cubeMaterial:ColorMaterial = new ColorMaterial(0xFF0000);
cubeMaterial.interactive = true;
cube.material = cubeMaterial;
}
cube.materialプロパティにマテリアル情報を指定するだけで変更できる。
2.CubeのreplaceMaterialByNameメソッド使用して置き換える方法。
private function cubeBClick(evt:InteractiveScene3DEvent):void
{
var cube:Cube = evt.renderHitData.displayObject3D as Cube;
var cubeMaterial:ColorMaterial = new ColorMaterial(0xFF0000);
cubeMaterial.interactive = true;
cube.replaceMaterialByName(cubeMaterial, "all");
}
replaceMaterialByNameメソッドにマテリアル情報と面を指定すると変更できる。
両方を使ってみた結果ですが、後者の
replaceMaterialByNameメソッドを使用する方が困らないということが分かりました。
1.6面に個別の設定を行うことができる。
2.前者のmaterialプロパティを1度使用すると、その後replaceMaterialByNameメソッドが効かなくなる。(もしかしたら効くようにできるかもしれない)
重要なのは
2.の事だと思います。
下のサンプルの"Cube C"は、マウスオーバー、マウスアウト時にreplaceMaterialByNameメソッドでマテリアル情報をセットし、クリック時にmaterialプロパティでマテリアル情報をセットしています。クリック後は色が変更されないことが分かります。
よって、後者であるreplaceMaterialByNameメソッドを使用してマテリアル情報を変更したほうがよさそうです。
ちょっと思ったこと
サンプルのFlashでCubeにマウスオーバーした状態で、画面全体を回転させCubeからマウスアウトしても判定が走らないようです。これは何かしらで改善できそうですが、今後の課題かな。
とりあえず2日目なので今からガシガシ覚えていきます。
サンプルソース