AR开发-简易太阳系

本文介绍如何用AR做一个简易的太阳系

简易太阳系.gif

一、了解太阳系的场景

• 太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。
• 有八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星 ）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星和数以亿计的太阳系小天体。

太阳系整体

太阳系.jpg

地球：地球自转的同时围绕太阳做公转运动
月球：月球自转的同时围绕太地球公转运动
(它俩的公转运动都是椭圆轨道）

二、设计思路

首先设置一个太阳。

设置几何

var sunNode =  SCNNode.init()//声明一个太阳节点
sunNode.geometry = SCNSphere.init(radius: 3)//设置模型为半径3米的球体

进行渲染

sunNode.geometry?.firstMaterial?.diffuse.contents = "art.scnassets/sun.jpg"//把太阳图片铺到球体上
sunNode.geometry?.firstMaterial?.multiply.contents = "art.scnassets/sun.jpg"    
sunNode.geometry?.firstMaterial?.multiply.intensity = 0.5//强度

现在的效果是这样了

IMG_0480.PNG

这里要注意一下diffuse和multiply的区别 ,举例如下

sunNode.geometry?.firstMaterial?.diffuse.intensity = 0.5
sunNode.geometry?.firstMaterial?.multiply.intensity = 0.5

IMG_0479.PNG

diffuse 渲染图形时扩散到整个模型
multiply 一般为阴影贴图，用于淡化模型。

给太阳添加一个自转的动画

func addAnimationSun(){
    //旋转动画
    let animation = CABasicAnimation.init(keyPath: "contentsTransform")
    //持续时间
    animation.duration = 10.0
    //稍微显示一点拉伸效果
    animation.fromValue = NSValue.init(caTransform3D: CATransform3DConcat(CATransform3DMakeTranslation(0, 0, 0), CATransform3DMakeScale(3, 3, 3)))
    //持续次数，这里设置最大值
    animation.repeatCount = Float.greatestFiniteMagnitude //OC中可以设置为FLT_MAX
    animation.fromValue = NSValue.init(caTransform3D: CATransform3DConcat(CATransform3DMakeTranslation(2, 0, 0), CATransform3DMakeScale(4, 4, 4)))
    animation.repeatCount = Float.greatestFiniteMagnitude  sunNode.geometry?.firstMaterial?.diffuse.addAnimation(animation, forKey: "sun=texture")
}

wrapS,wrapT

sunNode.geometry?.firstMaterial?.multiply.wrapS = SCNWrapMode.`repeat`
sunNode.geometry?.firstMaterial?.multiply.wrapT = SCNWrapMode.`repeat` 
sunNode.geometry?.firstMaterial?.diffuse.wrapS = SCNWrapMode.`repeat`
sunNode.geometry?.firstMaterial?.diffuse.wrapT = SCNWrapMode.`repeat`

wrapS:从左到右
wrapT:从上往下
这里这个属性是为了让太阳自转更加贴近自然。
添加动画化后,如果不设置这个属性效果是这样的

1.gif

设置之后

2.gif
原谅我gif图不太会弄，实际效果比这个要好很多。。

至此，太阳自转已经完成了

接下来，设置地球公转、自转，以及月球围绕地球的运动、自转。

地球自转和月球自转就如同太阳自转，只需改一下自转动画的时间

 earthNode.runAction(SCNAction.repeatForever(SCNAction.rotateBy(x: 0, y: 2, z: 0, duration: 1)))

moonNode.runAction(SCNAction.repeatForever(SCNAction.rotateBy(x: 0, y: 2, z: 0, duration: 1)))//这里不设置表面的效果了

同时设置一下各节点的位置及关系

    sunNode.position = SCNVector3Make(0, 5, -20)
    earthNode.position = SCNVector3Make(3, 0, 0);
    moonNode.position = SCNVector3Make(3, 0, 0)
    earthGroupNode.position = SCNVector3Make(10, 0, 0)
    arSCNView.scene.rootNode.addChildNode(sunNode)
    earthGroupNode.addChildNode(earthNode)

然后，要做的工作是让月球围绕地球转，地球围绕太阳转

代码逻辑：
1、创建一个围绕地球转的节点，把月球节点放上去，给这个旋转节点加一个围绕地球转的动画

   var earthSunRotateNode = SCNNode.init()//地球太阳节点，地球围绕太阳的轨道，俗称黄道
var earthGroupNode = SCNNode.init() //地月节点,月亮绕着地球的轨道，俗称白道
   //地球旋转节点
    let moonRotationNode = SCNNode.init()
    moonRotationNode.addChildNode(moonNode)
    //地球旋转动画
    let animation = CABasicAnimation.init(keyPath: "rotation")
    animation.duration = 1.5
    animation.toValue = NSValue.init(scnVector4: SCNVector4Make(0, 1.0, 0, Float(2 * Double.pi)))
    animation.repeatCount = Float.greatestFiniteMagnitude
    moonNode.addAnimation(animation, forKey: "moon animation")

2、创建一个地球围绕太阳转的节点，把1步骤中创建的节点放在上面

   let earthAnimationNode = SCNNode.init()
    sunNode.addChildNode(earthAnimationNode)
    earthAnimationNode.addChildNode(earthGroupNode)
    
    let earthAnimation = CABasicAnimation.init(keyPath: "rotation")
    earthAnimation.duration = 10.0
    earthAnimation.toValue = NSValue.init(scnVector4: SCNVector4Make(0, 1, 0, Float(2 * Double.pi)))
    earthAnimationNode.addAnimation(earthAnimation, forKey: "earth rotation around sun")

3、最后整理一下：
太阳系的根节点是太阳
太阳周围有一个围绕它转的节点（黄道节点）
黄道节点上要加一个地月节点（白道节点）
地月节点上加地球和月球，其中月球围绕地球转

timg-2.jpeg