見出し画像

SwiftUIにSceneKitで3Dオブジェクトを表示する

SwiftUI + SceneKit、きっとSCNViewをUIViewRepresentableでラップするんだろうな、と思ってたが、SceneViewというSwiftUIビューがiOS 14で追加されていた。(もうAppleはSceneKitをほぼ更新しないつもりなのかと思ってたので)意外。

https://developer.apple.com/documentation/scenekit/sceneview

最小実装

適当にシーンファイル(SceneKit Scene File)を新規生成し、こんな感じで初期化するだけ。

import SwiftUI
import SceneKit
struct Scene: View {
		var scene = SCNScene(named: "MyScene")
		
		var cameraNode: SCNNode? {
				scene?.rootNode.childNode(withName: "camera", recursively: false)
		}
		
		var body: some View {
				SceneView(
						scene: scene,
						pointOfView: cameraNode,
						options: []
				)
		}
}

シーンに何もないと背景しか表示されないので、ボックスを表示してみる。

init() {
   let box = SCNBox(width: 1, height: 1, length: 1, chamferRadius: 0.2)
   let boxNode = SCNNode(geometry: box)
   scene.rootNode.addChildNode(boxNode)
}

この時点でのプレビュー:

画像1

ボックスに色を着け、ライトを追加:

init() {
   let lightNode = SCNNode()
   lightNode.light = SCNLight()
   lightNode.light!.type = .omni
   lightNode.position = SCNVector3(x: 0, y: 5, z: 5)
   scene.rootNode.addChildNode(lightNode)

   let ambientLightNode = SCNNode()
   ambientLightNode.light = SCNLight()
   ambientLightNode.light!.type = .ambient
   ambientLightNode.light!.color = UIColor.white
   scene.rootNode.addChildNode(ambientLightNode)
   
   let box = SCNBox(width: 1, height: 1, length: 1, chamferRadius: 0.2)
   box.materials.first?.diffuse.contents = UIColor.lightGray
   let boxNode = SCNNode(geometry: box)
   scene.rootNode.addChildNode(boxNode)
}

画像2

最小限の実装としてはだいたい良さそう。

SCNDebugOptions を利用する

SceneView のイニシャライザには SceneView.Options 型のオプションを指定できるが、SCNDebugOptions にあった .showWireframe や .renderAsWireframe に相当するものはなさそう。

どうにかして使いたい。

画像3

(showWireframeを利用するとこんな感じになる)

SceneView で SCNDebugOptions を利用するには、

ここから先は

665字
文章やサンプルコードは多少荒削りかもしれませんが、ブログや書籍にはまだ書いていないことを日々大量に載せています。たったの400円で、すぐに購読解除してもその月は過去記事もさかのぼって読めるので、少しでも気になる内容がある方にはオトクかと思います。

技術的なメモやサンプルコード、思いついたアイデア、考えたこと、お金の話等々、頭をよぎった諸々を気軽に垂れ流しています。

最後まで読んでいただきありがとうございます!もし参考になる部分があれば、スキを押していただけると励みになります。 Twitterもフォローしていただけたら嬉しいです。 https://twitter.com/shu223/