【iOS】用Layer创建一个三维模型以及拖动

时间：2021-06-28 04:47:32

关于CALayer的介绍以及基本属性，在这篇博客中有交代：CoreAnimation —— CALayer

这篇博客讲述简单的通过对layer的transform属性的设置一个CATransform3D来进行自定义三维图形，甚至后续的处理。

通常简单的仿射变换我们也是通过对其的transform属性进行设置。不过这里设置的是一个3D变换类。如果线性代数很好的话，那应该能够理解内部具体做了如何的矩阵运算。

首先我子类化一个UIView对象，把图形的绘制在这个自定义View上进行。

接口方面

@property (nonatomic, assign, readonly) CGFloat side;

@property (nonatomic, assign, readonly) BOOL autoAnimate;

/**

 *  创建一个正方体对象

 *

 *  @param frame   位置

 *  @param side    边长

 *  @param animate 创建后是否自动旋转展示

 *

 *  @return 正方体对象视图

 */

+ (HRCube *)cube3DWithFrame:(CGRect)frame side:(CGFloat)side autoAnimate:(BOOL)animate;

工厂方法的实现就是快速实例化并设置属性

+ (HRCube *)cube3DWithFrame:(CGRect)frame side:(CGFloat)side autoAnimate:(BOOL)animate

{

    HRCube *cube3D = [[HRCube alloc] initWithFrame:frame];

    cube3D.side = side;

    cube3D.autoAnimate = animate;

    return cube3D;

}

类别中有两个内部成员

CALayer *_cubeLayer; //main layer
GLKMatrix4 _rotMatrix;

第一个是我们需要绘制正方体的layer。

第二个是在导入GLKit框架后，从中引入的一个矩阵变换类，我们在触摸屏幕拖动时，需要使用到这个类对正方体进行旋转处理。

初始化主layer

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        _cubeLayer = [CALayer layer];

        _cubeLayer.frame = self.bounds;

        _cubeLayer.contentsScale = [UIScreen mainScreen].scale;

    }

    return self;

}

正式绘制正方体

- (void)setSide:(CGFloat)side

{

    _side = side;

//    NSLog(@"%@", NSStringFromCGRect(_cubeLayer.bounds));

    //正

    [self addCubeLayer:@[@0, @0, @(_side/2), @0, @0, @0, @0]];

    //背

    [self addCubeLayer:@[@0, @0, @(-_side/2), @(M_PI), @0, @0, @0]];

    //左

    [self addCubeLayer:@[@(-_side/2), @0, @0, @(-M_PI_2), @0, @1, @0]];

    //右

    [self addCubeLayer:@[@(_side/2), @0, @0, @(M_PI_2), @0, @1, @0]];

    //上

    [self addCubeLayer:@[@0, @(-_side/2), @0, @(-M_PI_2), @1, @0, @0]];

    //下

    [self addCubeLayer:@[@0, @(_side/2), @0, @(M_PI_2), @1, @0, @0]];

    CATransform3D transform3D = CATransform3DIdentity;

    transform3D.m34 = -1.0/2000;

    _cubeLayer.sublayerTransform = transform3D;

    [self.layer addSublayer:_cubeLayer];

}

这里的m34不是星体- -，3D变形矩阵的m34通常应该设置为-1/EYE_DISTANCE,这里设置为2000已经足够好。

addCubeLayer的实现

//添加sublayers

- (void)addCubeLayer:(NSArray *)params

{

    CAGradientLayer *gradient = [CAGradientLayer layer];

    gradient.contentsScale = [UIScreen mainScreen].scale;

    gradient.bounds = CGRectMake(0, 0, _side, _side);

    gradient.position = self.center;

    gradient.colors = @[(id)kGrayColor, (id)kBlackColor];

    gradient.locations = @[@0, @1];

    gradient.startPoint = CGPointMake(0, 0);

    gradient.endPoint = CGPointMake(0, 1);

    //抗锯齿

    gradient.shouldRasterize = YES;

    CATransform3D trans3D = CATransform3DMakeTranslation([params[0] floatValue], [params[1] floatValue], [params[2] floatValue]);

    CATransform3D rotate3D = CATransform3DRotate(trans3D , [params[3] floatValue], [params[4] floatValue], [params[5] floatValue], [params[6] floatValue]);

    CATransform3D transform3D = rotate3D;

//    CATransform3D transform3D = CATransform3DRotate(trans3D, [params[3] floatValue], [params[4] floatValue], [params[5] floatValue], [params[6] floatValue]);

    gradient.transform = transform3D;

    [_cubeLayer addSublayer:gradient];

}

这里为了更方便观察，使用的是渐变Layer，颜色为宏，可以*修改。

注意给其抗锯齿设为了YES。通常我们还可以在整个项目的info.plist文件中设置该内容，不过设置会对整个项目的性能产生不好的影响，所以一般来说，需要的时候再设置也是一个不错的选择。

这样我们就简单的创建好了一个正方体，不过当前摆放很正，所以只能看到一个正方形平面，下面我们给他设置自动旋转后给他一个沿着坐标轴的角度偏转，再无限围着y轴转就OK了。

//添加自定义旋转展示动画

- (void)addAnimation

{

    _cubeLayer.sublayerTransform = CATransform3DRotate(_cubeLayer.sublayerTransform, M_PI/9.0, 0.5, 0.5, 0.5);

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"];

    animation.toValue = @(MAXFLOAT);

    animation.duration = MAXFLOAT;

    [_cubeLayer addAnimation:animation forKey:@"rotation"];

}

这时运行程序我们就能看到一个旋转的三维正方体了

【iOS】用Layer创建一个三维模型以及拖动

下面给其扩展一个拖动收拾旋转功能

首先给view增加一个拖动收拾，然后在Action中实现

#pragma mark - PanGesture

- (void)panRotate:(UIPanGestureRecognizer *)ges

{

    static CGPoint start;

    if (ges.state == UIGestureRecognizerStateBegan) {

        start = [ges locationInView:self];

    } else if (ges.state == UIGestureRecognizerStateChanged) {

        CATransform3D transform = _cubeLayer.sublayerTransform;

        _rotMatrix = GLKMatrix4MakeWithArray((void *)&transform);

        CGPoint loc = [ges locationInView:self];

        CGPoint diff = CGPointMake(start.x-loc.x, start.y-loc.y);

        float rotX = 1 * GLKMathDegreesToRadians(diff.y/2.0);

        float rotY = -1 * GLKMathDegreesToRadians(diff.x/2.0);

        bool isInvertible;

        GLKVector3 xAxis = GLKMatrix4MultiplyVector3(GLKMatrix4Invert(_rotMatrix, &isInvertible),

                                                     GLKVector3Make(1, 0, 0));

        _rotMatrix = GLKMatrix4Rotate(_rotMatrix, rotX, xAxis.x, xAxis.y, xAxis.z);

        GLKVector3 yAxis = GLKMatrix4MultiplyVector3(GLKMatrix4Invert(_rotMatrix, &isInvertible),

                                                     GLKVector3Make(0, 1, 0));

        _rotMatrix = GLKMatrix4Rotate(_rotMatrix, rotY, yAxis.x, yAxis.y, yAxis.z);

        _cubeLayer.sublayerTransform = *((CATransform3D *)&_rotMatrix);

        start = loc;

    }

}

经过对矩阵的实时处理后，我们可以使用拖动收拾来在视图中实时的调整3D正方体的旋转了。

Demo源码：

CSDN：点击打开链接

GitHub:Rannie / HRCube3D

喜欢的话可以去点个星:)

以上就是本篇博客全部内容，欢迎指正和交流。转载注明出处~

相关文章