Flash/Flex学习笔记(51)：3维旋转与透视变换(PerspectiveProjection)

Flash/Flex学习笔记(49)：3D基础 里已经介绍了3D透视的基本原理，不过如果每次都要利用象该文中那样写一堆代码，估计很多人不喜欢，事实上AS3的DisplayObject类已经内置了z坐标、rotationX、rotationY、rotationZ属性，再加上PerspectiveProjection类用于处理透视转换，基本上可以满足大多数的3D要求。

001

import

flash.events.Event;

002

import

flash.display.Sprite;

003

import

flash.text.TextField;

004

import

flash.events.MouseEvent;

005

import

flash.text.TextFieldAutoSize;

006

007

var

isAngleChangeing =

false

;

008

009

var

txtX:TextField,txtY:TextField,txtZ:TextField,txtPosZ:TextField,txtFieldOfView:TextField,txtInfo:TextField,txtCenter:TextField,txtFocusLength:TextField;

010

txtX =

new

TextField();

011

txtX.text =

"rotationX："

;

012

txtY =

new

TextField();

013

txtY.text =

"rotationY："

;

014

txtZ =

new

TextField();

015

txtZ.text =

"rotationZ："

;

016

txtPosZ =

new

TextField();

017

txtPosZ.text =

"Z："

;

018

txtFieldOfView =

new

TextField();

019

txtFieldOfView.text =

"视角："

;

020

txtCenter =

new

TextField();

021

txtCenter.text =

"消失点："

022

txtFocusLength =

new

TextField();

023

txtFocusLength.text =

"焦距："

;

024

txtX.y = txtY.y = txtZ.y =

5

;

025

txtX.x = txtPosZ.x =

10

;

026

txtPosZ.y = txtX.y +

26

;

027

txtPosZ.x +=

40

;

028

txtY.x = txtX.x +

180

;

029

txtZ.x = txtY.x +

180

;

030

txtFieldOfView.x = txtPosZ.x +

160

;

031

txtFieldOfView.y = txtPosZ.y;

032

txtCenter.x = txtFieldOfView.x +

170

;

033

txtCenter.y = txtPosZ.y;

034

txtInfo =

new

TextField();

035

txtInfo.text=

""

;

036

txtFocusLength.x = txtX.x +

25

;

037

txtFocusLength.y = txtPosZ.y +

25

;

038

039

var

imgBD:BitmapData =

new

ImgSample();

040

var

img:Bitmap =

new

Bitmap(imgBD);

041

trace

(

"img.width="

,img.width,

"，img.height="

,img.height);

042

043

var

imgSprite:Sprite =

new

Sprite();

044

img.x =  -  img.width /

2

;

045

img.y =  -  img.height /

2

;

046

imgSprite.addChild(img);

047

trace

(

"imgSprite.width="

,imgSprite.width,

"，imgSprite.height="

,imgSprite.height);

048

049

var

containerSprite:Sprite =

new

Sprite();

050

containerSprite.addChild(imgSprite);

051

imgSprite.x = img.width /

2

;

052

imgSprite.y = img.height /

2

;

053

054

addChild(containerSprite);

055

trace

(

"containerSprite.width="

,containerSprite.width,

"，containerSprite.height="

,containerSprite.height);

056

057

containerSprite.x = stage.stageWidth /

2

- containerSprite.width /

2

;

058

containerSprite.y = stage.stageHeight /

2

- containerSprite.height /

2

;

059

containerSprite.z =

50

;

060

061

var

silderX:SimpleSlider =

new

SimpleSlider(

0

,

360

,

0

);

062

silderX.x = txtX.x +

160

;

063

silderX.y = txtX.y +

7

;

064

silderX.rotation =

90

;

065

066

var

silderY:SimpleSlider =

new

SimpleSlider(

0

,

360

,

0

);

067

silderY.x = txtY.x +

160

;

068

silderY.y = silderX.y;

069

silderY.rotation =

90

;

070

071

var

silderZ:SimpleSlider =

new

SimpleSlider(

0

,

360

,

0

);

072

silderZ.x = txtZ.x +

160

;

073

silderZ.y = silderX.y;

074

silderZ.rotation =

90

;

075

076

var

silderPosZ:SimpleSlider =

new

SimpleSlider(-

200

,

200

,

50

);

077

silderPosZ.x = txtX.x +

160

;

078

silderPosZ.y = silderX.y +

25

;

079

silderPosZ.rotation =

90

;

080

081

var

silderFieldOfView:SimpleSlider =

new

SimpleSlider(

0.1

,

179.9

,

90

);

082

silderFieldOfView.x = silderPosZ.x +

180

;

083

silderFieldOfView.y = silderPosZ.y;

084

silderFieldOfView.rotation =

90

;

085

086

var

silderCenterPos:SimpleSlider =

new

SimpleSlider(

150

,

400

,

275

);

087

silderCenterPos.x = silderFieldOfView.x +

180

;

088

silderCenterPos.y = silderPosZ.y;

089

silderCenterPos.rotation =

90

;

090

091

var

silderFocusLength:SimpleSlider =

new

SimpleSlider(

100

,

500

,

300

);

092

silderFocusLength.x = silderPosZ.x ;

093

silderFocusLength.y = silderPosZ.y +

25

;

094

silderFocusLength.rotation =

90

;

095

096

addChild(txtX);

097

addChild(txtY);

098

addChild(txtZ);

099

addChild(txtPosZ);

100

addChild(txtFieldOfView);

101

addChild(txtInfo);

102

addChild(txtCenter);

103

addChild(txtFocusLength);

104

addChild(silderX);

105

addChild(silderY);

106

addChild(silderZ);

107

addChild(silderPosZ);

108

addChild(silderFieldOfView);

109

addChild(silderCenterPos);

110

addChild(silderFocusLength);

111

112

silderX.addEventListener(Event.CHANGE,silderXChangeHandler);

113

silderY.addEventListener(Event.CHANGE,silderYChangeHandler);

114

silderZ.addEventListener(Event.CHANGE,silderZChangeHandler);

115

silderPosZ.addEventListener(Event.CHANGE,silderPosZChangeHandler);

116

silderFieldOfView.addEventListener(Event.CHANGE,silderFieldOfViewChangeHandler);

117

silderFieldOfView.addEventListener(MouseEvent.MOUSE_UP,

function

(){isAngleChangeing =

false

});

118

silderCenterPos.addEventListener(Event.CHANGE,silderCenterPosChangeHandler);

119

silderFocusLength.addEventListener(Event.CHANGE,silderFocusLengthChangeHandler);

120

121

122

function

showTxtInfo(s:SimpleSlider){

123

txtInfo.text = s.value.toString().substr(

0

,

5

);

124

txtInfo.x = mouseX +

20

;

125

txtInfo.y = s.y +

5

;

126

}

127

128

function

silderXChangeHandler(e:Event):

void

{

129

imgSprite.rotationX = silderX.value;

130

showTxtInfo(silderX);

131

}

132

133

function

silderYChangeHandler(e:Event):

void

{

134

imgSprite.rotationY = silderY.value;

135

showTxtInfo(silderY);

136

}

137

138

function

silderZChangeHandler(e:Event):

void

{

139

imgSprite.rotationZ = silderZ.value;

140

showTxtInfo(silderZ);

141

}

142

143

function

silderPosZChangeHandler(e:Event):

void

{

144

containerSprite.z =silderPosZ.value;

145

showTxtInfo(silderPosZ);

146

}

147

148

149

function

silderFieldOfViewChangeHandler(e:Event):

void

{

150

doPerspectiveProjection();

151

showTxtInfo(silderFieldOfView);

152

isAngleChangeing =

true

;

153

}

154

155

function

silderCenterPosChangeHandler(e:Event):

void

{

156

doPerspectiveProjection();

157

showTxtInfo(silderCenterPos);

158

}

159

160

function

silderFocusLengthChangeHandler(e:Event):

void

{

161

doPerspectiveProjection();

162

showTxtInfo(silderFocusLength);

163

}

164

165

function

doPerspectiveProjection():

void

{

166

var

pp:PerspectiveProjection=

new

PerspectiveProjection();

167

pp.fieldOfView = silderFieldOfView.value;

168

if

(!isAngleChangeing){

169

pp.focalLength  = silderFocusLength.value;

170

}

171

//trace(pp.focalLength);

172

pp.projectionCenter =

new

Point(silderCenterPos.value,silderCenterPos.value);

173

containerSprite.transform.perspectiveProjection = pp;

174

175

}

176

177

doPerspectiveProjection();

178

179

var

txtAuthor:TextField =

new

TextField();

180

txtAuthor.htmlText =

"<a href='http://yjmyzz.cnblogs.com/' target='_blank'>by 菩提树下的杨过</a>"

;

181

addChild(txtAuthor);

182

txtAuthor.y = txtFocusLength.y;

183

txtAuthor.x =

425

;

184

txtAuthor.autoSize = TextFieldAutoSize.LEFT;

稍加解释:

z坐标：即对象在z轴上的坐标，flash默认采用的是右手三维坐标，也就是说z值越大，物体越小

rotaionX,rotationY,rotationZ：即对象绕着x,y,z轴旋转的角度

PerspectiveProjection对象的三个属性:

1.focalLength 即焦距，使用效果上貌似焦距越大，物体也越大(?跟常规理解的不同)，而且据官方帮助上讲：在透视转换过程中，将使用视野的角度和舞台的高宽比（舞台宽度除以舞台高度）来自动计算

focalLength

2.fieldOfView 即观察点的三维"视角"(0到180之间的值)，怎么理解我还没想好，不过在使用效果上，如果当物体的z轴坐标不为0时，该值越大，物体的扭曲和形变越夸张，而且动态调整该值时focalLength值也会自动重新计算。(所以如果用代码写死了focalLength，不管如何调整fieldOfView都是看不到效果的)

3.projectionCenter:即3D透视中的消失点，当z轴坐标趋近于无限大时，物体越趋向于该点(消失)。

最后：上面的代码中暗藏了二个小技巧

1.为啥要先把图片放到imgSprite中，然后再将imgSprite又放到containerSprite中?

因为旋转时有一个旋转的中心点，而Flash默认这个中心就是对象的左顶点，即(0,0)位置，用二个sprite嵌套后，再配合坐标的设定，巧妙的将中心点正好移动到了图片中心，如下图：



2.如何用代码从库里取出一张图片?



如上图，关键在于导入图片时要指定“类”名，这样在代码中就可以用

1

var

imgBD:BitmapData =

new

ImgSample();

//从库中取出一张图片

2

var

img:Bitmap =

new

Bitmap(imgBD);

得到一个图片的Bigmap实例