VR+全景播放器+头控讲解-06

学习目标

掌握头控部分布局 如何检测头控按钮被选中 如何实现悬停动画

在UIView上面布局我们可以使用UIButton UIView UIImageView等,但是是在3D场景中,我们不能使用UIView,我们要使用平面几何当视图使用,下面具体介绍一下

分析

243FA4BB-FAC5-4A93-A9DF-C3A1F447F010.png

提示几点

  1. 头控根节点可以放在根节点上中心或者球体中心都是可以的,但是考虑到后期我们要进行视频滤波,所以最好放到场景节点上
  2. 低头菜单出现,抬头菜单消失,这个要根据重力感应在X轴旋转决定的
  3. 当抬头时菜单总是出现在下方,一旦出现不会跟随照相机转动,当重力感应变化时,我们让头控节点的绕着y轴旋转

实现步骤

第一步.创建菜单节点

+(SCNNode*)createBackgroundNode{
    /// 创建一个背景色
    SCNNode* bgNode = [SCNNode node];
    bgNode.position = SCNVector3Make(0, CONTROL_DISTANCE/2, -CONTROL_DISTANCE);
    bgNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    bgNode.rotation = SCNVector4Make(1, 0, 0, atan(1/2.0));
    return bgNode;
    }
+(SCNNode*)createShadowNode{
    SCNNode *shadowNode = [SCNNode node];
    shadowNode.geometry= [SCNPlane planeWithWidth:MENU_MAX_LENGTH height:BUTTON_WIDHT+BUTTON_WIDHT/2.0];
    shadowNode.geometry.firstMaterial.diffuse.contents = BACKGROUND_MENU_SHOW_NAME;
    shadowNode.position = SCNVector3Make(0, 0, 0);
    shadowNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    return shadowNode;
}

+(SCNNode*)createPlayNode{
    SCNNode* playNode = [SCNNode node];
    playNode.geometry = [SCNPlane planeWithWidth:BUTTON_WIDHT*0.8 height:BUTTON_WIDHT*0.8];
    playNode.geometry.firstMaterial.diffuse.contents = ICON_PLAY_NAME;
    playNode.position = SCNVector3Make(-20, 0, 2);
    playNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    return playNode;
}
+(SCNNode*)createPreviousNode{
    /// 第六步-创建播放上一个视频的节点
    SCNNode* previousNode = [SCNNode node];
    previousNode.geometry = [SCNPlane planeWithWidth:BUTTON_WIDHT*0.8 height:BUTTON_WIDHT*0.8];
    previousNode.geometry.firstMaterial.diffuse.contents = ICON_PREVIOUS_NAME;
    previousNode.position = SCNVector3Make(-60, 0, 2);
    previousNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    return previousNode;
}
+(SCNNode*)createAfterNode{
    SCNNode *nextNode = [SCNNode node];
    nextNode.geometry  = [SCNPlane planeWithWidth:BUTTON_WIDHT*0.8 height:BUTTON_WIDHT*0.8];
    nextNode.geometry.firstMaterial.diffuse.contents = ICON_AFTER_NAME;
    nextNode.position = SCNVector3Make(20, 0, 2);
    nextNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    return nextNode;
}
+(SCNNode*)createMoreNode{
    SCNNode* moreNode = [SCNNode node];
    moreNode.geometry = [SCNPlane planeWithWidth:BUTTON_WIDHT*0.8 height:BUTTON_WIDHT*0.8];
    moreNode.geometry.firstMaterial.diffuse.contents = ICON_MENU_HIDDEN_NAME;
    moreNode.position = SCNVector3Make(60, 0, 2);
    moreNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    return moreNode;
}
+(SCNNode*)createHighVoiceNode{
    SCNNode* voiceHighNode = [SCNNode node];
    voiceHighNode.geometry = [SCNPlane planeWithWidth:BUTTON_WIDHT*0.8 height:BUTTON_WIDHT*0.8];
    voiceHighNode.geometry.firstMaterial.diffuse.contents = ICON_VOICE_HIGH_NAME;
    voiceHighNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    return voiceHighNode;
}
+(SCNNode*)createLowVoiceNode{
    SCNNode* voiceLowNode = [SCNNode node];
    voiceLowNode.geometry = [SCNPlane planeWithWidth:BUTTON_WIDHT*0.8 height:BUTTON_WIDHT*0.8];
    voiceLowNode.geometry.firstMaterial.diffuse.contents = ICON_VOICE_LOW_NAME;
    voiceLowNode.geometry.firstMaterial.cullMode = SCNCullModeBack;
    return voiceLowNode;
}

创建的方法基本一致,调节一下位置即可!

第二步 添加到先把功能按钮节点添加到头控背景节点上,然后将背景节点添加到头控根节点上去

[self.scene.rootNode addChildNode:self.controlNode];
[self.controlNode addChildNode:self.bgNode];
[self.bgNode addChildNode:self.shadowNode];
[self.bgNode addChildNode:self.playOrPauseNode];
[self.bgNode addChildNode:self.proviousNode];
[self.bgNode addChildNode:self.AfterNode];
[self.bgNode addChildNode:self.showMoreNode];
[self.bgNode addChildNode:self.lowVoiceNode];
[self.bgNode addChildNode:self.highVoiceNode];
[self.scene.rootNode addChildNode:self.eyeNode];

第三步 添加点控节点,将其放在添加到照相机节点上去,这样照相机转动的时候,它就能跟着转动,效果就是一直在屏幕中央

 [self.eyeNode addChildNode:self.dotNode];

第四步 抬头小时低头出现

-(void)controlEyeNodeInVR:(SCNVector3)vector{
// 向上抬头 并且local
if ( vector.x>0.8 &&self.bgNode.hidden==false){
    self.bgNode.hidden = true;
    self.dotNode.hidden = true;
}else if ( vector.x<0.8 &&self.bgNode.hidden){
    self.bgNode.hidden = false;
    self.dotNode.hidden = false;
    SCNVector3 eulerAngles = self.controlNode.eulerAngles;
   // eulerAngles.y = -vector.z;
    eulerAngles.z = vector.z;
    self.controlNode.eulerAngles = eulerAngles;
  }
}

第五步 如何检测点控射线和头控按钮相交 思路:

先将按钮转换到照相机节点上,点控射线是否和按钮区域相交,就是相当于头控坐标 x在范围 [-button.width/2,button.width/2]内, y在 [-button.height/2.button.heigth/2.0]内

/// 下面就举一个例子,其它的都是类似的
SCNVector3 proviousPosition = [self.bgNode convertPosition:self.proviousNode.position toNode:self.self.eyeNode];
if (proviousPosition.x > -BUTTON_WIDHT/2 && proviousPosition.x < BUTTON_WIDHT/2 && proviousPosition.y > -BUTTON_WIDHT/2 && proviousPosition.y < BUTTON_WIDHT/2 ){
    if (!self.controlDotIn.inPreviousNode&&!self.proviousNode.hidden){
    // 第一次进入 还没有离开
     // 开始执行悬停动画
     [self startAnimation];
    }
    _controlDotIn.inPreviousNode = YES;
    return;
}else if(_controlDotIn.inPreviousNode){
    // 检测到离开按钮
    return;
}

悬停动画的实现

第一步 创建动画行为

-(void)createAnimation{
/// 创建动画节点
self.animationNode = [SCNNode node];
self.animationNode.geometry = [SCNPlane planeWithWidth:CONTROL_DISTANCE/5.0 height:CONTROL_DISTANCE/5.0];
self.animationNode.hidden = true;
 // 控制点上增加动画节点
[self.dotNode addChildNode:self.animationNode];
__weak XJRenderView* weakSelf = self;
self.animationAction  = [SCNAction customActionWithDuration:3 actionBlock:^(SCNNode * _Nonnull node, CGFloat elapsedTime) {
    int time = (int) (elapsedTime *(weakSelf.gif.count-1)/3.0);
    node.geometry.firstMaterial.diffuse.contents = weakSelf.gif[time];
    if(time == weakSelf.gif.count-1){
        [weakSelf animationDidStop];
    }
}];
}
-(NSArray *)gif{
    if(!_gif){
        NSMutableArray *gif= [NSMutableArray arrayWithCapacity:GIF_LENGTH];
        for(int i = 0 ; i< GIF_LENGTH ;i++)
        {
            NSString *name = [NSString stringWithFormat:GIF_PREFIX_NAME_FORMAT,i];
            [gif addObject:name];
        }
        _gif = gif;
    }
    return _gif;
}

第二步 在执行的节点上执行动画行为

-(void)startAnimation{
    [self.animationNode runAction:self.animationAction];
}

本节讲解完毕 SceneKit 中文教程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏中国Android研究院

进阶必备-Android事件分发机制

或许你会问,“为什么我一定要知道View的事件分发机制?”。因为我们在实际开发的过程中,经常会遇到多层的View互相嵌套以后,对某一个View进行滑动的时候,特...

15440
来自专栏曾大稳的博客

Android View的Touch事件分发

事件分发的重要性我就不多说了,我们先从简到难。 先看View的Touch事件分发,我自定义一个View,重写OnTouchEvent函数,然后分别设置OnTou...

29220
来自专栏郭霖

Android事件分发机制完全解析,带你从源码的角度彻底理解(下)

记得在前面的文章中,我带大家一起从源码的角度分析了Android中View的事件分发机制,相信阅读过的朋友对View的事件分发已经有比较深刻的理解了。 还未阅读...

290100
来自专栏非著名程序员

图解 Android 事件分发机制

在Android开发中,事件分发机制是一块Android比较重要的知识体系,了解并熟悉整套的分发机制有助于更好的分析各种点击滑动失效问题,更好去扩展控件的事件功...

34890
来自专栏james大数据架构

Android中Services之异步IntentService

IntentService:异步处理服务,新开一个线程:handlerThread在线程中发消息,然后接受处理完成后,会清理线程,并且关掉服务。 IntentS...

20360
来自专栏移动开发面面观

Android事件分发备忘

12630
来自专栏向治洪

android viewgroup事件分发机制

今天给大家代码ViewGroup事件分发的源码解析~~凡是自定义ViewGroup实现各种滑动效果的,不可避免的会出现很多事件的冲突,对ViewGroup事件分...

21460
来自专栏向治洪

android view事件分发机制

首先我们先写个简单的例子来测试View的事件转发的流程~ 1、案例 为了更好的研究View的事件转发,我们自定以一个MyButton继承Button,然后把跟事...

19360
来自专栏开发之途

Android 解决 View 的滑动冲突

关于 Android 的 TouchEvent 事件分发机制可以看这里:Java_Android_Learn,本文讲解的是如何去解决 View 之间的滑动冲突

15310
来自专栏曾大稳的博客

Android ViewGroup事件分发

上篇文章已经分析了Android的Touch事件分发。如果没看的建议先看一下。Android View的Touch事件分发。 接下来我们开始写几种场景,得出一个...

33220

扫码关注云+社区

领取腾讯云代金券