簡介:
上篇回顧:
ARKit初探篇(鏈接)中寫到怎樣開啟一個(gè)AR項(xiàng)目,包括開發(fā)環(huán)境,建立項(xiàng)目,及基礎(chǔ)代碼實(shí)現(xiàn),在git的demo添加了手勢的處理,簡單實(shí)現(xiàn)點(diǎn)擊球體實(shí)現(xiàn)渲染圖輪換
原文地址:http://www.2bjs.com
歡迎加入q群?150731459
本篇介紹:
將虛擬世界與真實(shí)世界結(jié)合起來,那么真實(shí)世界是活的,那么虛擬世界也將是活的,這樣才能讓用戶傻傻的分不清現(xiàn)實(shí)世界與虛擬世界;本篇加入了一些動畫(自轉(zhuǎn)/公轉(zhuǎn))讓效果更炫酷,并且對光線進(jìn)行一些處理,讓效果看起來更加真實(shí)
正文:
效果展示:
實(shí)現(xiàn)思路:
1.初始化幾何節(jié)點(diǎn)
2.渲染(圖,光線處理)
3.實(shí)現(xiàn)-->太陽自轉(zhuǎn),地球自轉(zhuǎn),月亮自轉(zhuǎn)
4.根據(jù)之間自轉(zhuǎn)與公轉(zhuǎn)關(guān)系,處理黃道與白道節(jié)點(diǎn)
5.添加光照度看起來更真實(shí)
步驟:
1.初始化AR環(huán)境必備
@property (nonatomic,strong)ARSCNView *arSCNView;
@property (nonatomic,strong)ARSession *arSession;
@property (nonatomic,strong)ARConfiguration *arSessionConfiguration;
[self.view addSubview:self.arSCNView];
self.arSCNView.delegate = self;
之后懶加載
2.渲染
以太陽節(jié)點(diǎn)為例,渲染圖
multiply和diffuse這里都設(shè)置一下,感覺會真實(shí)一點(diǎn)
_sunNode.geometry.firstMaterial.multiply.contents = @"sun";
_sunNode.geometry.firstMaterial.diffuse.contents = @"sun";
multiply?(The multiply property specifies a color or an image used to multiply the output fragments with. The computed fragments are multiplied with the multiply value to produce the final fragments. This property may be used for shadow maps, to fade out or tint 3d objects.)
也就是說當(dāng)我們用這個(gè)屬性來渲染三維對象的話,會淡化,以太陽為例子,當(dāng)我們僅僅設(shè)置了multiply,顯示效果是比較淡的
diffuse(The diffuse property specifies the amount of light diffusely reflected from the surface. The diffuse light is reflected equally in all directions and is therefore independent of the point of view)
diffuse這個(gè)屬性渲染會均勻擴(kuò)散到全局,每一個(gè)視角,以太陽為例子
當(dāng)我們把所有兩個(gè)渲染屬性全部設(shè)置,那么效果是不是更加真實(shí)呢?
wrapS,wrapT,換行模式當(dāng)我們的太陽轉(zhuǎn)動起來效果就保持原樣,看起來真實(shí)不會花掉
_sunNode.geometry.firstMaterial.multiply.wrapS =
_sunNode.geometry.firstMaterial.diffuse.wrapS =
_sunNode.geometry.firstMaterial.multiply.wrapT =
_sunNode.geometry.firstMaterial.diffuse.wrapT = SCNWrapModeRepeat;
wrapS從左到右(Determines the receiver's wrap mode for the s texture coordinate. Defaults to SCNWrapModeClamp),wrapT從上到下(Determines the receiver's wrap mode for the t texture coordinate. Defaults to SCNWrapModeClamp),以太陽為例子,假設(shè)我們不設(shè)置這個(gè)屬性的話看看效果自轉(zhuǎn)的時(shí)候看起來就會很花
設(shè)置地球的反光度,太陽照射到地球上的光澤,反多少光澤出去,并且設(shè)置反射出的光是什么顏色的光
_earthNode.geometry.firstMaterial.shininess = 0.1; // 光澤
_earthNode.geometry.firstMaterial.specular.intensity = 0.5; // 反射多少光出去
_moonNode.geometry.firstMaterial.specular.contents = [UIColor grayColor];//反射出去的光是什么光
_moonNode.geometry.firstMaterial.specular.contents = [UIColor redColor];當(dāng)我們此處換為紅色的時(shí)候地球反光區(qū)域所反射出來的光也就是紅色
3.實(shí)現(xiàn)-->太陽自轉(zhuǎn),地球自轉(zhuǎn),月亮自轉(zhuǎn)
以太陽為例子,我們只需要寫一個(gè)rotateAnimation,設(shè)置動畫鎖需要的時(shí)間,旋轉(zhuǎn)fromValue和toValue,然后設(shè)置執(zhí)行次數(shù),將動畫添加到太陽節(jié)點(diǎn)上,當(dāng)然與平面世界不同的是我們需要設(shè)施3D世界的旋轉(zhuǎn)fromValue和toValue,代碼如下
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"contentsTransform"];
animation.duration = 10.0;
從000的位置擴(kuò)展//此時(shí)圖片在不斷的拉伸
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DConcat(CATransform3DMakeTranslation(0, 0, 0), CATransform3DMakeScale(3, 3, 3))];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DConcat(CATransform3DMakeTranslation(1, 0, 0), CATransform3DMakeScale(5, 5, 5))];
animation.repeatCount = FLT_MAX;
[_sunNode.geometry.firstMaterial.diffuse addAnimation:animation forKey:@"sun-texture"];
4.根據(jù)之間自轉(zhuǎn)與公轉(zhuǎn)關(guān)系,處理黃道與白道節(jié)點(diǎn)
@property(nonatomic, strong)SCNNode * earthGroupNode;//地月節(jié)點(diǎn)
我們完成地球與月球自轉(zhuǎn)后,首先來處理月球與地球的公轉(zhuǎn),把月球的公轉(zhuǎn)節(jié)點(diǎn)添加為地月節(jié)點(diǎn)的子節(jié)點(diǎn)
以月球?yàn)槔拥墓D(zhuǎn)動畫,代碼如下
CABasicAnimation *moonRotationAnimation = [CABasicAnimation animationWithKeyPath:@"rotation"];
moonRotationAnimation.duration = 5.0;
moonRotationAnimation.toValue = [NSValue valueWithSCNVector4:SCNVector4Make(0, 1, 0, M_PI * 2)];
moonRotationAnimation.repeatCount = FLT_MAX;
[moonRotationNode addAnimation:moonRotationAnimation forKey:@"moon rotation around earth"];
[_earthGroupNode addChildNode:moonRotationNode];
地球與月球公轉(zhuǎn)完成,此時(shí)我們需要去設(shè)置一個(gè)黃道,然后把地月節(jié)點(diǎn)在添加為黃道的子節(jié)點(diǎn).并且實(shí)現(xiàn)地球的公轉(zhuǎn)動畫
//添加節(jié)點(diǎn)地球繞太陽的節(jié)點(diǎn)-黃道
SCNNode *earthRotationNode = [SCNNode node];
[_sunNode addChildNode:earthRotationNode];
[earthRotationNode addChildNode:_earthGroupNode];
此時(shí)我們展示效果就來了
5.添加光照度看起來更真實(shí)
自轉(zhuǎn)與公轉(zhuǎn)完成后,基本的功能也就完成了,添加光照節(jié)點(diǎn)太讓效果看起來更真實(shí).光照效果隨著距離而改變,此時(shí)我們就可以看到上文效果展示中的效果了
lightNode.light.attenuationEndDistance = 20.0;
lightNode.light.attenuationStartDistance = 1.0;
[SCNTransaction begin];
[SCNTransaction setAnimationDuration:1];{
lightNode.light.color = [UIColor whiteColor];?
_sunHaloNode.opacity = 0.5;?
}
_sunHaloNode = [SCNNode node];
[_sunNode addChildNode:_sunHaloNode];
總結(jié):
本章主要難點(diǎn)為公轉(zhuǎn)與自轉(zhuǎn)的關(guān)系,各個(gè)節(jié)點(diǎn)誰是誰的子節(jié)點(diǎn),首先我們先設(shè)置地月節(jié)點(diǎn),然后添加黃道,把動畫添加在黃道節(jié)點(diǎn),然后再去處理地球與太陽的關(guān)系,當(dāng)然在動畫的處理之后,添加光照度與更全面的渲染也是非常重要的,有理解不恰當(dāng)?shù)牡胤?請?zhí)岢?謝謝大家
最后為大家獻(xiàn)上本文代碼地址,我在git中的demo中也寫了注釋,<本文demo在BETA版本中可運(yùn)行>大家可以仔細(xì)看一下demo歡迎大家下載,star (其他demo--關(guān)于簡單動畫)
demo地址: swift版本(新,內(nèi)帶注釋) Xcode9可以運(yùn)行?下載鏈接
轉(zhuǎn)載請注明出處 ??原文地址:http://www.2bjs.com作者Fujian Bi
