固体对象
在我们懂了在3D空间的一些图层布局的基础之后，我们来试着创建一个固体的3D对象（一个空洞对象，但是以固态呈现）。我们用六个独立的视图来构建一个立方体的各个面。有意思吧。
我们在界面上添加6个视图，都是普通的视图，当它们变成一个立方体以后并不改变每个面视图的性质。
立方体的六个面的布局
这些视图并没有放在主视图中，而是松散的放在nib文件中，我们不关心这个容器如何摆放它们的位置，因为后续会用图层的transform对它们进行重新布局。
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *faces;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//set up the container sublayer transform 设置统一的透视图条件
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1.0 / 500.0;
self.containerView.layer.sublayerTransform = perspective;
//add cube face 1
CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);//Z轴平移
[self addFace:0 withTransform:transform];
//add cube face 2
transform = CATransform3DMakeTranslation(100, 0, 0);
transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);旋转90度-Y
[self addFace:1 withTransform:transform];
//add cube face 3
transform = CATransform3DMakeTranslation(0, -100, 0);
transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
[self addFace:2 withTransform:transform];
//add cube face 4
transform = CATransform3DMakeTranslation(0, 100, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
[self addFace:3 withTransform:transform];
//add cube face 5
transform = CATransform3DMakeTranslation(-100, 0, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
[self addFace:4 withTransform:transform];
//add cube face 6
transform = CATransform3DMakeTranslation(0, 0, -100);
transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);
[self addFace:5 withTransform:transform];
}
- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform
{
//get the face view and add it to the container
UIView *face = self.faces[index];
[self.containerView addSubview:face];
//center the face view within the container 把容器的中点设置为每一个面的中点
CGSize containerSize = self.containerView.bounds.size;
face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);
// apply the transform
face.layer.transform = transform;
}
正面俯视看一个立方体
这样看立方体不是很明显，因为其他面都被遮挡了，看着就是一个正方形，为了更好的欣赏它，我们将更换一个不同的视角。旋转这个立方体会很笨重，因为我们要对每一个面做旋转。一个简单的方法就是通过调整容器的视图的sublayerTransform去旋转视角。
添加如下几行去旋转containerView图层的perspective变换矩阵：
perspective = CATransform3DRotate(perspective,-M_PI_4,1,0,0);//绕着x轴旋转45度。
perspective = CATransform3DRotate(perspective,-M_PI_4,0,1,0);//绕着Y轴旋转45度。
对容器视角做一个组合变换。下面看看转换视角以后观察效果
从一个边角观察一个立方体
光亮和阴影
现在这个固体看起来更像是一个立方体了，但是对每个面之间的链接还是很难分辨的。CoreAnimation可以用3D现实图层，但是它对光线并没有概念。如果想让立方体看起来更加真实，需要做一个阴影效果。可以通过改变每个面的北京颜色或者直接用带光亮效果的图片来调整。
如果需要动态地创建光线效果，你可以根据每个视图的方向应用不同的alpha值做出半透明的阴影图层，但为了计算阴影图层的不透明度，你需要得到每个面的正太向量（垂直于表面的向量），然后根据一个想象的光源计算出两个向量叉乘结果。叉乘代表了光源和图层之间的角度，从而决定了它有多大程度上的光亮。很懵逼！
我们用GLKit框架来做向量计算，需要引入GLKit，每个面的CATranform3D都被转换成GLKMatrix4，然后通过GLKMatrix4GetMatrix3函数得到一个3x3的旋转矩阵。这个旋转矩阵指定来图层的方向，然后可以用它来的奥正太 向量值。
#define LIGHT_DIRECTION 0, 1, -0.5
#define AMBIENT_LIGHT 0.5
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *faces;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//set up the container sublayer transform
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1.0 / 500.0;
perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);／／固体容器视角发生的变换
perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
self.containerView.layer.sublayerTransform = perspective;
//add cube face 1
CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);
[self addFace:0 withTransform:transform];
//add cube face 2
transform = CATransform3DMakeTranslation(100, 0, 0);
transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
[self addFace:1 withTransform:transform];
//add cube face 3
transform = CATransform3DMakeTranslation(0, -100, 0);
transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
[self addFace:2 withTransform:transform];
//add cube face 4
transform = CATransform3DMakeTranslation(0, 100, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
[self addFace:3 withTransform:transform];
//add cube face 5
transform = CATransform3DMakeTranslation(-100, 0, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
[self addFace:4 withTransform:transform];
//add cube face 6
transform = CATransform3DMakeTranslation(0, 0, -100);
transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);
[self addFace:5 withTransform:transform];
}
- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform
{
//get the face view and add it to the container
UIView *face = self.faces[index];
[self.containerView addSubview:face];
//center the face view within the container
CGSize containerSize = self.containerView.bounds.size;
face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);
// apply the transform
face.layer.transform = transform;
//apply lighting 增加光效
[self applyLightingToFace:face.layer];
}
- (void)applyLightingToFace:(CALayer *)face
{
//add lighting layer
CALayer *layer = [CALayer layer];
layer.frame = face.bounds;
[face addSublayer:layer];
//convert the face transform to matrix
//(GLKMatrix4 has the same structure as CATransform3D)
//译者注：GLKMatrix4和CATransform3D内存结构一致，但坐标类型有长度区别，所以理论上应该做一次float到CGFloat的转换
CATransform3D transform = face.transform;
GLKMatrix4 matrix4 = *(GLKMatrix4 *)&transform;
GLKMatrix3 matrix3 = GLKMatrix4GetMatrix3(matrix4);
//get face normal
GLKVector3 normal = GLKVector3Make(0, 0, 1);
normal = GLKMatrix3MultiplyVector3(matrix3, normal);
normal = GLKVector3Normalize(normal);
//get dot product with light direction
GLKVector3 light = GLKVector3Normalize(GLKVector3Make(LIGHT_DIRECTION));
float dotProduct = GLKVector3DotProduct(light, normal);
//set lighting layer opacity
CGFloat shadow = 1 + dotProduct - AMBIENT_LIGHT;
UIColor *color = [UIColor colorWithWhite:0 alpha:shadow];
layer.backgroundColor = color.CGColor;
}
这些GLK函数的算法和意义，以后再说。我们看下增加光效以后的效果
增加光效以后的效果图
点击事件
我们在fance2表面添加了一个按钮，点击按钮，什么都没有发生，为什么呢？这并不是iOS在3D场景下不能正确处理相应事件，实际上是可以做到的。问题在鱼视图顺序。在“图层和视图关系”中我们提到，点击事件的处理由视图在父视图中的顺序决定的，不试试3D空间中Z轴顺序。当给立方体添加视图的时候，我们实际是按照一个属性添加，所以按照视图／图层顺序来说，4、5、6在3前面。即使我们看不见4、5、6的表面，被遮住了。iOS在事件响应上仍然保持之前的顺序。当试图点击3表面的按钮，表面4、5、6截断了点击事件，和2D平面的布局一样。
你也许认为把doubleSided设置为NO，可以解决这个问题，因为它不再渲染视图后面的内容，但实际并没有作用。因为背对相机而隐藏的视图仍然会相应点击事件，这个和通过hidden，alpha属性隐藏视图不同，那两种方式将不会响应事件。这里有几种方案：
1）把除了表面3的其他视图userInteractionEnabled属性设置为NO，禁止事件传递。
2）或者换位置，把视图3换到视图6上。
现在点击可以看到效果：
处理之后可以响应点击事件的效果
网友评论