Sandy引擎学习笔记：鼠标交互

  

 很早之前，我们可以使用Sandy的摄影机来移动物观察对象物，通过键盘控制摄影机的移动和旋转。今天我们尝试鼠标的交互，通过鼠标交互来控制sandy的对象物。

 

一、目标

在显示类核心编程里面，Sprite类占有一个很大的席位，通过监听MouseEvent，我们可以实现鼠标的交互。同样的原理，我们可以创建一个立方体对象，通过点击对象进行交互。

 

二、继承关系：

在看演示之前，我们首先看一下Box类一个继承关系

Package	sandy.primitive
Class	public class Box
Inheritance	Box ---> Shape3D ---->ATransformable ---> Node
Implements	Primitive3D

由于Box类继承了Shape3D类，我们通过这个类找到一Shape3D一个属性container 属性，通过这个类我们可以返回我们想要的Sprite对象。

container : Sprite [read-only] The contianer for this object

    public function get container():Sprite

也就是说通过通过这个属性的借助，可以实现一些鼠标的交互。

如

   box.container.buttonMode = true;
   box.container.addEventListener(MouseEvent.CLICK, clickHandler);

 

这样我们的鼠标就可以对Sadny所创建的物体进行交互了。

 

 

简单的演示：

<textarea cols="50" rows="15" name="code" class="c-sharp">package { import flash.display.Sprite; import flash.events.*; import sandy.core.Scene3D; import sandy.core.scenegraph.*; import sandy.primitive.*; import sandy.core.data.*; import sandy.materials.*; import sandy.materials.attributes.*; import sandy.primitive.*; public class My3D2 extends Sprite { private var scenne:Scene3D; private var camera:Camera3D; private var ranY:Number=0.5; private var box:Box; public function My3D2() { camera=new Camera3D(300,300); camera.z=-400; camera.lookAt(0,0,0); var root:Group=createScene(); scenne=new Scene3D("scene1",this,camera,root); addEventListener(Event.ENTER_FRAME,Run); } private function createScene():Group { var g:Group=new Group(); box=new Box("box",50,50,50); box.x=-20; box.y=0; box.z=-100; box.rotateX=50; g.addChild(box); var materialAttr:MaterialAttributes = new MaterialAttributes( new LineAttributes( 0.5, 0x2111BB, 0.4 ), new LightAttributes( true, 0.1) ); var material:Material = new ColorMaterial( 0x0000FF, 1, materialAttr ); material.lightingEnable = true; var app:Appearance = new Appearance( material ); box.appearance = app; box.container.buttonMode = true;//鼠标交互 box.container.addEventListener(MouseEvent.CLICK, clickHandler);//box监 听 return g; } private function Run(event:Event):void { scenne.render(); } private function clickHandler(event:MouseEvent):void { trace("你点了我 "); } } }</textarea>

 

其实就是加一个引用那个属性就可以进行鼠标监听了。

 

效果：

 

 

 

 

继续我们上面的程序，实现在场景里面复制三个图，对其进行监听。对三个立方体进行颜色材质贴图。

 

 <textarea cols="50" rows="15" name="code" class="c-sharp">package { import flash.display.Sprite; import flash.events.*; import sandy.core.Scene3D; import sandy.core.scenegraph.*; import sandy.primitive.*; import sandy.core.data.*; import sandy.materials.*; import sandy.materials.attributes.*; import sandy.primitive.*; public class My3D extends Sprite { private var scenne:Scene3D; private var camera:Camera3D; private var ranY:Number=0.5; private var box:Box; public function My3D() { camera=new Camera3D(300,300); camera.z=-400; camera.lookAt(0,0,0); var root:Group=createScene(); scenne=new Scene3D("scene1",this,camera,root); addEventListener(Event.ENTER_FRAME,Run); } private function createScene():Group { var g:Group=new Group(); box=new Box("box",50,50,50); box.x=-20; box.y=0; box.z=-100; box.rotateX=50; var box2:Box=new Box("box2",50,50,50); box2.x=50; box2.y=0; box2.z=-100; box2.rotateX=50; var box3:Box=new Box("box3",50,50,50); box3.x=120; box3.y=0; box3.z=-100; box3.rotateX=50; g.addChild(box); g.addChild(box2); g.addChild(box3); var materialAttr:MaterialAttributes = new MaterialAttributes( new LineAttributes( 0.5, 0x2111BB, 0.4 ), new LightAttributes( true, 0.1) ); var material:Material = new ColorMaterial( 0x0000FF, 1, materialAttr ); var material2:Material = new ColorMaterial( 0x00FF00, 1, materialAttr ); var material3:Material = new ColorMaterial( 0xFF0000, 1, materialAttr ); material.lightingEnable = true; material2.lightingEnable = true; material3.lightingEnable = true; var app:Appearance = new Appearance( material ); var app2:Appearance = new Appearance( material2 ); var app3:Appearance = new Appearance( material3 ); box.appearance = app; box2.appearance = app2; box3.appearance = app3; box.container.buttonMode = true; box2.container.buttonMode = true; box3.container.buttonMode = true; box.container.addEventListener(MouseEvent.CLICK, clickHandler); box2.container.addEventListener(MouseEvent.CLICK, clickHandler2); box3.container.addEventListener(MouseEvent.CLICK, clickHandler3); return g; } private function Run(event:Event):void { scenne.render(); } private function clickHandler(event:MouseEvent):void { trace("第一个你点了"); } private function clickHandler2(event:MouseEvent):void { trace("第二个你点了我 "); } private function clickHandler3(event:MouseEvent):void { trace("第三个你点了我 "); } } }</textarea>

 

这样，我们可以对其进行更多效果的交互，如链接，或者其他有趣的贴图等等。