第九節 - SCNGeometry用法詳解

weixin_34234823發表於2017-11-14

SCNGeometry

學習目標

1.瞭解SceneKit 遊戲框架中系統包含的幾何物件.
2.學習如何將幾何形狀物體繫結的節點上,顯示到檢視中.


系統提供的幾何形狀講解

正方體

8541184-46a5e1bc6bc86c3a.png
學習技術很好玩

程式碼如下:

SCNBox *box = [SCNBox boxWithWidth:1 height:1 length:1 chamferRadius:0];
box.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *boxNode = [SCNNode node];
boxNode.position = SCNVector3Make(0, 0, 0);
boxNode.geometry = box;
[scnView.scene.rootNode addChildNode:boxNode];

建立平面

8541184-3cd8451b877ab4a8.png
讓學習成為一種習慣

程式碼如下:

SCNPlane *plane =[SCNPlane planeWithWidth:2 height:2];
plane.firstMaterial.diffuse.contents = [UIImage imageNamed:@"2.PNG"];
SCNNode *planeNode = [SCNNode nodeWithGeometry:plane];
planeNode.position = SCNVector3Make(0, 0, 0);
[scnView.scene.rootNode addChildNode:planeNode];

金子塔

8541184-34e4eab5e1c20fc2.png
讓學習成為一種習慣

程式碼如下:

SCNPyramid *pyramid = [SCNPyramid pyramidWithWidth:1 height:1 length:1];
pyramid.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *pyramidNode = [SCNNode nodeWithGeometry:pyramid];
pyramidNode.position = SCNVector3Make(0, 0, 0);
[scnView.scene.rootNode addChildNode:pyramidNode];

球體

8541184-e07a8c7624862105.png
讓學習成為一種習慣

程式碼如下:

SCNSphere *sphere = [SCNSphere sphereWithRadius:1];
sphere.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *sphereNode =[SCNNode nodeWithGeometry:sphere];
sphereNode.position = SCNVector3Make(0, 0, 0);
[scnView.scene.rootNode addChildNode:sphereNode];

圓柱體

8541184-13612a814bf36621.png
讓學習成為一種習慣

程式碼如下:

    SCNCylinder *cylinder = [SCNCylinder cylinderWithRadius:1 height:2];
    cylinder.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
    SCNNode *cylinderNode =[SCNNode nodeWithGeometry:cylinder];
    cylinderNode.position = SCNVector3Make(0, 0, 0);
    [scnView.scene.rootNode addChildNode:cylinderNode];

圓錐體

8541184-b35b8a7735546641.png
讓學習成為一種習慣

程式碼如下:

SCNCone *cone = [SCNCone coneWithTopRadius:0 bottomRadius:1 height:1];
cone.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *coneNode = [SCNNode nodeWithGeometry:cone];
coneNode.position = SCNVector3Make(0,0, 0);
[scnView.scene.rootNode addChildNode:coneNode];

管道

8541184-e15daabe7cc657e6.png
讓學習成為一種習慣

程式碼如下:

SCNTube *tube = [SCNTube tubeWithInnerRadius:1 outerRadius:1.2 height:2];
tube.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *tubeNode =[SCNNode nodeWithGeometry:tube];
tubeNode.position = SCNVector3Make(0, 0, 0);
[scnView.scene.rootNode addChildNode:tubeNode];

環面

8541184-04857057a1249e33.png
讓學習成為一種習慣

程式碼如下:

SCNTorus *torus = [SCNTorus torusWithRingRadius:1 pipeRadius:0.5];
torus.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *torusNode = [SCNNode nodeWithGeometry:torus];
torusNode.position = SCNVector3Make(0, 0, 0);
[scnView.scene.rootNode addChildNode:torusNode];

地板

8541184-c4c24cb9e58a4377.png
讓學習成為一種習慣

程式碼如下:

SCNFloor *floor = [SCNFloor floor];
floor.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *floorNode = [SCNNode nodeWithGeometry:floor];
floorNode.position = SCNVector3Make(0, -5, 0);
[scnView.scene.rootNode addChildNode:floorNode];

立體文字

8541184-5503d871e6487474.png
6CD7CE98-3CCE-41EA-A9AE-1C60F96EB2ED.png

程式碼如下:

 SCNText *text = [SCNText textWithString:@"好好學習" extrusionDepth:0.5];
text.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
text.font = [UIFont systemFontOfSize:1];
SCNNode *textNode  =[SCNNode nodeWithGeometry:text];
textNode.position = SCNVector3Make(-2, 0, 0);
[scnView.scene.rootNode addChildNode:textNode];

自定義形狀

8541184-fb693f9f07160487.png
讓學習成為一種習慣

程式碼如下:

// 定義貝塞爾曲線
SCNShape *shape = [SCNShape shapeWithPath:[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 1, 1) cornerRadius:0.5] extrusionDepth:3];
shape.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
SCNNode *shapdeNode =[SCNNode nodeWithGeometry:shape];
[scnView.scene.rootNode addChildNode:shapdeNode];

手把手教你寫程式碼

第一步.建立工程

8541184-a49892980ac5f8c4.png
44D42F5C-F2E7-42D6-9AB4-95CE6E828DC6.png

第二步.新增遊戲框架

8541184-92be3396c8a28670.png
2BB5667B-BFDC-425A-B08D-11041BAAD552.png

第三步.新增遊戲專用檢視SCNView

SCNView *scnView = [[SCNView alloc]initWithFrame:self.view.bounds];
scnView.backgroundColor = [UIColor blackColor];
[self.view addSubview:scnView];
scnView.allowsCameraControl = TRUE;

第四步.建立遊戲場景

  scnView.scene = [SCNScene scene];

第五步.新增照相機

  SCNNode *cameraNode =[SCNNode node];
  cameraNode.camera = [SCNCamera camera];
  cameraNode.position = SCNVector3Make(0, 0, 5);
  [scnView.scene.rootNode addChildNode:cameraNode];

第六步.新增節點並且繫結幾何形狀物體

 // 建立幾何物件
 SCNTorus *torus = [SCNTorus torusWithRingRadius:1 pipeRadius:0.5];
  torus.firstMaterial.diffuse.contents = [UIImage imageNamed:@"1.PNG"];
// 繫結到節點上
SCNNode *torusNode = [SCNNode nodeWithGeometry:torus];
 // 設定節點的位置
torusNode.position = SCNVector3Make(0, 0, 0);
  // 新增到場景中去
[scnView.scene.rootNode addChildNode:torusNode];

執行結果:

8541184-6c4e430bed0e7615.gif
讓學習成為一種習慣

問題:有人問我SegmentCount屬性到底幹了什麼事情?

下面舉個例子演示

建立一個有切面的正方體

let box = SCNBox(width: 1, height: 1, length: 1, chamferRadius: 0.5)
8541184-5c9f3717c7b3dd95.png
C292CF35-988D-408B-80C3-1A7744D1E09A.png

設定一下下面屬性

box.chamferSegmentCount = 20
8541184-8bde3c176417b9bc.png
2BFF5AB8-815C-48CD-885D-38F5BE0B96E5.png

上面的現象就是答案,不需要我解釋了吧!

本節內容比較重要,請大家務必掌握,後面需要內容都建立在今天的內容之上!