SceneKit做一个旋转的地球效果

SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景.

首先需要地球表面图片,将其导入到Xcode中:

我们用SceneKit内置的几何球体类创建一个球的实例,并且将地球表面图片应用在球的表面上:

let globe = SCNSphere(radius: 15.0)
let globeNode = SCNNode(geometry: globe)
globeNode.position = SCNVector3(x: 20, y: 40, z: -50)

globeNode.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "earthDiffuse.jpg")
globeNode.geometry?.firstMaterial?.diffuse.mipFilter = .Linear

接着我们利用CoreAnimation给我们提供的动画,让球体绕其y轴旋转:

let rotation = CABasicAnimation(keyPath: "rotation")
rotation.fromValue = NSValue(SCNVector4: SCNVector4(x: 0, y: 0, z: 0, w: 0))
rotation.toValue = NSValue(SCNVector4: SCNVector4(x: 0, y: 1, z: 0, w: Float(M_PI*2.0)))
rotation.duration = 10
rotation.repeatCount = .infinity
globeNode.addAnimation(rotation, forKey: "rotation")

为了增加些funny,我们同时将球在旋转的同时上下移动,并且不停地变大和缩小,这些都可以利用CoreAnimation的SCNAction类来完成:

let moveGlobeUp = SCNAction.moveByX(0.0, y: 10.0, z: 0.0, duration: 1.0)
        let moveGlobeDown = SCNAction.moveByX(0.0, y: -10.0, z: 0.0, duration: 1.0)
        let seq = SCNAction.sequence([moveGlobeUp,moveGlobeDown])
        let repeatSeq = SCNAction.repeatActionForever(seq)
        globeNode.runAction(repeatSeq)

        let scaleUp = SCNAction.scaleTo(5.0, duration: 5.0)
        let scaleDown = SCNAction.scaleTo(0.5, duration: 5.0)
        let repeatSeq2 = SCNAction.repeatActionForever(SCNAction.sequence([scaleDown,scaleUp]))
        globeNode.runAction(repeatSeq2)

就此可见,Cocoa里关于动画的东西都是相通的,在View,Layer中学习的动画效果,很容易的可以拿到3D中来用,十分方便,使得再学习成本很低.

运行一下App,效果如下(动态图有点大,加载请稍等片刻):

大家可以看到游戏场景中不但完成了节点的动画,也增加了环境光和透射光的效果,原来需要用复杂OpenGL完成的事,现在基本上毫不费力了 ;]

时间: 2024-10-14 07:44:35

SceneKit做一个旋转的地球效果的相关文章

用IOS做一个界面切换的效果(登录界面和注册界面和找回密码界面的切换)(用封装好的lable和textf创建界面)

创建一个类封装uitextfield和UIlabel (源代码.m文件) #import "TLView.h" @interface TLView () { UILabel *_desLabel;    //左边的lable UITextField *_textField;//右边的 } @end @implementation TLView //改写父类的初始化方法,处理相同的性能 - (id)initWithFrame:(CGRect)frame { self = [super i

做一个所见即所得的CSS效果

style 也是标签(在非ie内核的浏览器中支持),我们将style设置成 contenteditable的时候,那么那的内容就可以编辑了.仔细的体验下,如果我们将背景修改成红色的.那么只要书写完,立马呈现.哇靠,这很方便我们以后写那种动态的编辑器效果呢,等有时间的话,我再试试.洛宁县幼儿园 提示:你可以随意改变.test_div里的CSS代码,比如把green改成blue,#666什么的. 附上我研究的代码: <!DOCTYPE HTML> <html > <head>

简单的做一个旋转正六面体吧

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ perspective: 2000px; background: black; } .wrap{ transform-style: preserve-3d; width: 300px;h

【小松教你手游开发】【系统模块开发】做一个3d旋转菜单

在unity做一个3d旋转菜单,像乱斗西游2的这种: 暂时有两种方法可以实现: 一.当做是2d界面,通过定义几个固定点的坐标.大小.透明度,还有每个点的panel depth大小,把数据存储下来,在手机滑动的过程中计算滑动划过的距离和这个panel大小的比值,乘以两个点之间的距离,获得坐标点移动的距离,通过改变x轴改变位置,同理改变大小和透明度. 这个方法我自己做2d游戏的时候实现过,做起来比较简单,没有什么可拓展性可言,并且会有很多限制,比如拖动过程中很难转变方向.要自己实现运动中的弹性(这里

使用plupload做一个类似qq邮箱附件上传的效果

公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可以添加多个附件,也可一个都不添加 以其中一个为例:(文件保存到了数据库中),有关plupload的内容可参考:http://www.360doc.com/content/14/0714/03/552866_394228686.shtml 首先是po package cn.com.plupload.p

使用UIScrollView和UIPageControl做一个可以用手势来切换图片的效果

利用UIScrollView的滚动效果来实现,先上图: 实现过程是:在viewController里先加入UIScrollView和UIPageControl: -(void) loadView { [super loadView]; UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320,480)]; UIPageControl* pageControl = [[UIPageCont

用Fragment做蒙版来进行一个初始教学提示的效果

在android 软件第一次使用的时候,一般会在当前的界面上做一个灰色的蒙版,上面有显示的一些提醒性质的教学文字或者图案. 我想的是当前界面上蒙上一个 Fragment 把提示信息也放在Fragment上. 这是效果图.后面附上demo源码. 具体就是在activity成功启动之后.画出activity的view之后.这个不能在生命周期进行判断.我尝试的是用Handler去不断postDelay查看view是否被画出.即view的width > 0. 然后用代码动态的把这个蒙版Fragment加

一个无锁消息队列引发的血案:怎样做一个真正的程序员?(二)——月:自旋锁

前续 一个无锁消息队列引发的血案:怎样做一个真正的程序员?(一)——地:起因 一个无锁消息队列引发的血案:怎样做一个真正的程序员?(二)——月:自旋锁 平行时空 在复制好上面那一行我就先停下来了,算是先占了个位置,虽然我知道大概要怎么写,不过感觉还是很乱. 我突然想到,既然那么纠结,那么混乱,那么不知所措,我们不如换个视角.记得高中时看过的为数不多的长篇小说<穆斯林的葬礼>,作者是:霍达(女),故事描写了两个发生在不同时代.有着不同的内容却又交错扭结的爱情悲剧,一个是“玉”的故事,一个是“月”

【CSS】如何用css做一个爱心

摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: 明白正方形的画法. 明白圆形的画法. 明白什么是定位. 明白怎么旋转. 话不多说,先教大家怎么用css画一个圆形. .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300