I want to create a sample application that allows the user to get information about continents on a globe when they tap on them. In order to do this, I need to figure out the location where a user taps on an SCNSphere object in a scene (SceneKit). I attempted to do it like this:
import UIKit
import SceneKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let scene = SCNScene()
/* Lighting and camera added (hidden)*/
let earthNode = SCNSphere(radius: 1)
/* Added styling to the Earth (hidden)*/
earthNode.name = "Earth"
scene.rootNode.addChildNode(earthNode)
let sceneView = self.view as! SCNView
sceneView.scene = scene
sceneView.allowsCameraControl = true
// add a tap gesture recognizer
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
sceneView.addGestureRecognizer(tapGesture)
}
#objc func handleTap(_ gestureRecognize: UIGestureRecognizer) {
// retrieve the SCNView
let sceneView = self.view as! SCNView
// check what nodes are tapped
let p = gestureRecognize.location(in: scnView)
let hitResults = sceneView.hitTest(p, options: [:])
// check that we clicked on at least one object
if hitResults.count > 0 {
// retrieved the first clicked object
let result: SCNHitTestResult = hitResults[0]
print(result.node.name!)
print("x: \(p.x) y: \(p.y)") // <--- THIS IS WHERE I PRINT THE COORDINATES
}
}
}
When I actually run this code however and click on an area on my sphere, it prints out the coordinates of the tap on the screen instead of where I tapped on the sphere. For example, the coordinates are the same when I tap on the center of the sphere, and when I tap it in the center again after rotating the sphere.
I want to know where on the actual sphere I pressed, not just where I click on the screen. What is the best way that I should go about this problem?
In the hitResult, you can get result.textureCoordinates which tells you the point in your map textures. From this point, you are supposed to know the location of your map as the map should have coordinations which was mapped to textures.
#objc func handleTap(_ gestureRecognize: UIGestureRecognizer) {
// retrieve the SCNView
let sceneView = self.view as! SCNView
// check what nodes are tapped
let p = gestureRecognize.location(in: scnView)
let hitResults = sceneView.hitTest(p, options: [:])
// check that we clicked on at least one object
if hitResults.count > 0 {
// retrieved the first clicked object
let result: SCNHitTestResult = hitResults[0]
print(result.node.name!)
print(result.textureCoordinates(withMappingChannel 0)) // This line is added here.
print("x: \(p.x) y: \(p.y)") // <--- THIS IS WHERE I PRINT THE COORDINATES
}
}
Related
I have an object on SCNScene and I want the user to zoom in/out on specific parts using double tap and
I thought of two options:
Make the camera itself move to that part, similar to that question,
scenekit - zoom in/out to selected node of scene
and It didn't zoom out when I took this approach or even zoom in accurately.
Add camera node in front of each part, so when the user tap on a part it should reposition the default camera of the scene to the configured camera I added, but I was thinking this would affect the performance due to the nodes I keep adding. Should I try this?
This is the code I tried to the first approach.
#objc
internal func handleTapGesture(_ gestureRecognizer: UIGestureRecognizer) {
let hitPoint = gestureRecognizer.location(in: sceneViewVehicle)
let hitResults = sceneViewVehicle.hitTest(hitPoint, options: nil)
if hitResults.count > 0 {
let result = hitResults.first!
let scale = CGFloat(result.node.simdScale.y)
switch gestureRecognizer.state {
case .changed: fallthrough
case .ended:
cameraNode.camera?.multiplyFOV(by: scale)
default: break
}
}
Adding the Gesture
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTapGesture(_:)))
tapGesture.numberOfTapsRequired = 2
sceneViewVehicle.addGestureRecognizer(tapGesture)
Zooming for camera
extension SCNCamera {
public func setFOV(_ value: CGFloat) {
fieldOfView = value
}
public func multiplyFOV(by multiplier: CGFloat) {
fieldOfView *= multiplier
}
}
I have the following situation.
A SCNView with a .scn of a bridge showing.
On the left part of the screen you see the visual representation of the bridge.
I'd like to do the following.
Select an item on the left in the "model browser"
Zoom to the selected item and focus on it
On the screenshot provided. You can see I've selected Kist which is yellow in the SceneView
Now I'd like to zoom and focus on the selected SCNNode
I've already tried to use rayTestWithSegment to find the selected position to zoom. But the result of rayTestWithSegment is always [].
I've also tried to use a SCNLookAtConstraint but this doesn't do the trick.
var constraint: SCNLookAtConstraint!
func handle(gesture: UIGestureRecognizer) {
guard let result = hitTestResult(for: gesture), let world = sceneView?.scene?.physicsWorld else { return }
let nodePosition = result.node.position
let results = world.rayTestWithSegment(from: SCNVector3(0, 1, 0), to: nodePosition, options: nil)
print(results)
constraint = SCNLookAtConstraint(target: result.node)
sceneView?.pointOfView?.constraints = [constraint]
}
func hitTestResult(for gesture: UIGestureRecognizer) -> SCNHitTestResult? {
let location = gesture.location(in: sceneView)
guard let hit = sceneView?.hitTest(location, options: nil), hit.count > 0, let result = hit.first else {
return nil
}
return result
}
I'm using rayTestWithSegment because there is the possibility that a SCNNode which I've selected is not fully visible. For example an SCNNode which is behind another node in this perspective.
Thanks in advance, I hope someone can help / explain me what I'm doing wrong..
You can have a look at the -[SCNCameraController frameNodes:] API that should do just that.
I'm currently trying to build an AR Chess app and I'm having trouble getting the movement of the pieces working.
I would like to be able to tap on a chess piece, then the legal moves it can make on the chess board will be highlighted and it will move to whichever square the user tapped on.
Pic of the chess board design and nodes:
https://gyazo.com/2a88f9cda3f127301ed9b4a44f8be047
What I would like to implement:
https://imgur.com/a/IGhUDBW
Would greatly appreciate any suggestions on how to get this working.
Thanks!
ViewController Code:
import UIKit
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
#IBOutlet var sceneView: ARSCNView!
override func viewDidLoad() {
super.viewDidLoad()
// Set the view's delegate
sceneView.delegate = self
// Show statistics such as fps and timing information
sceneView.showsStatistics = true
// Add lighting to the scene
sceneView.autoenablesDefaultLighting = true
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Create a session configuration to track an external image
let configuration = ARImageTrackingConfiguration()
// Image detection
// Reference which group to find the image to detect in the Assets folder e.g. "Detection Card"
if let imageDetect = ARReferenceImage.referenceImages(inGroupNamed: "Detection Card", bundle: Bundle.main) {
// Sets image tracking properties to the image in the referenced group
configuration.trackingImages = imageDetect
// Amount of images to be tracked
configuration.maximumNumberOfTrackedImages = 1
}
// Run the view's session
sceneView.session.run(configuration)
}
// Run when horizontal surface is detected and display 3D object onto image
// ARAnchor - tells a certain point in world space is relevant to your app, makes virtual content appear "attached" to some real-world point of interest
func renderer(_ renderer: SCNSceneRenderer, nodeFor anchor: ARAnchor) -> SCNNode {
// Creates 3D object
let obj = SCNNode()
// Check if image detected through camera is an ARImageAnchor - which contains position and orientation data about the image detected in the session
if let imageAnchor = anchor as? ARImageAnchor {
// Set dimensions of the horizontal plane to be displayed onto the image to be the same as the image uploaded
let plane = SCNPlane(width: imageAnchor.referenceImage.physicalSize.width, height: imageAnchor.referenceImage.physicalSize.height)
// Display mild transparent layer onto detected image
// This is to ensure image detection works by display a faint layer on the image
plane.firstMaterial?.diffuse.contents = UIColor(white: 1.0, alpha: 0.2)
// Set geometry shape of the plane
let planeNode = SCNNode(geometry: plane)
// Flip vertical plane to horizontal plane
planeNode.eulerAngles.x = -Float.pi / 2
obj.addChildNode(planeNode)
// Initialise chess scene
if let chessBoardSCN = SCNScene(named: "art.scnassets/chess.scn") {
// If there is a first in the scene file
if let chessNodes = chessBoardSCN.rootNode.childNodes.first {
// Displays chessboard upright
chessNodes.eulerAngles.x = Float.pi / 2
// Adds chessboard to the overall 3D scene
obj.addChildNode(chessNodes)
}
}
}
return obj
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
// Pause the view's session
sceneView.session.pause()
}
}
You will need to add gestures on to your view and use the ARSceneViews hitTest method to detect what the gesture is touching in your scene. You can then update the positions based on the movement from the gestures.
Here is a question that deals with roughly the same requirement of dragging nodes around.
Placing, Dragging and Removing SCNNodes in ARKit
First, you need to add a gesture recognizer for tap into your viewDidLoad, like this:
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
myScnView.addGestureRecognizer(tapGesture)
Then realize the handler function:
#objc
func handleTap(_ gestureRecognize: UIGestureRecognizer) {
// HERE YOU NEED TO DETECT THE TAP
// check what nodes are tapped
let location = gestureRecognize.location(in: myScnView)
let hitResults = myScnView.hitTest(location, options: [:])
// check that we clicked on at least one object
if hitResults.count > 0 {
// retrieved the first clicked object
let tappedPiece = hitResults[0].node
// HERE YOU CAN SHOW POSSIBLE MOVES
//Ex. showPossibleMoves(for: tappedPiece)
}
}
Now, to show the possible moves, you need to identify all quadrants and your node position on the chessboard.
To do this, you can assign a name or a number, or a combination of letter and number, or moreover a combination of numbers. (I suggest combination of number, like row 1 column 1, like a matrix).
let's take my suggestion, so you can name each quadrant 1.1 1.2 ... 2.1 2.2 and so on.
Now, to detect where your piece is, you can check contact with the PhysicsContactDelegate.
Now you have the tappedPiece and the place where it is, so you have to define the rule for the pieces, for example:
let rules = ["tower":"cross"] //add the others
N.B You can choose what you want to define the rules.
Let's take my suggestion for good, now you should create the function to highlight:
func highlight(quadrant: SCNNode){
quadrant.geometry?.firstMaterial?.emission.contents = UIColor.yellow
}
Finally the showPossibleMoves(for: tappedPiece) could be something this:
func showPossibleMoves(for piece: SCNNode){
let pieceType = piece.name //You have to give the name as you did into your rules variable
//ex. if you have rules like ["tower":"cross"] you have to set all towers name to "tower"
let rule = rules[pieceType]
switch rule{
case "cross":
//you have to highlight all nodes on the right, left, above and bottom
// you can achieve this by selecting the start point and increase it
//assuming you named your quadrants like 1.1 1.2 or 11 12 13 ecc...
let startRow = Int(startQuadrant.name.first)
let startColumn = Int(startQuadrant.name.last)
//Now loop the highlight on right
for column in startColumn+1...MAX_COLUMN-1{
let quadrant = myScnView.scene.rootNode.childNode(withName:"\(startRow).\(column)" , recursively: true)
// call highlight function
highlight(quadrant: quadrant)
}
//Now loop for above quadrants
for row in startRow+1...MAX_ROW-1{
let quadrant = myScnView.scene.rootNode.childNode(withName:"\(row).\(startColumn)" , recursively: true)
// call highlight function
highlight(quadrant: quadrant)
}
//DO THE SAME FOR ALL DIRECTIONS
}
// ADD ALL CASES, like bishop movements "diagonals" and so on
}
NOTE: In the handlerTap function you have to check what you're tapping, for example, to check if you're tapping on a quadrant after selecting a piece (you want to move you're piece) you can check a boolean value and the name of the selected node
//assuming you have set the boolean value after selecting a piece
if pieceSelected && node.name != "tower"{
//HERE YOU CAN MOVE YOUR PIECE
}
In the AR example project of apple there is an option for placing a chair in the room. What do I need to do to place multiple chairs in the code?
Would a simple append function do the trick?
When I tap on the chair option I need the first chair to be placed in the plane. If I tap again the option the chair should be placed once again. And I know I will need a delete function for this too. So how can I detect a long tap by the user?
A basic tap function to add a ball each time you tap the display.
#objc func handleTap(_ gesture: UITapGestureRecognizer) {
let results = self.sceneView.hitTest(gesture.location(in: gesture.view), types: ARHitTestResult.ResultType.featurePoint)
guard let result: ARHitTestResult = results.first else {
return
}
// create a simple ball
let sphereNode = SCNNode(geometry: SCNSphere(radius: 0.2)
// create position of ball based on tap result
let position = SCNVector3Make(result.worldTransform.columns.3.x, result.worldTransform.columns.3.y, result.worldTransform.columns.3.z)
// set position of ball before adding to scene
sphereNode?.position = position
// each tap adds a new instance of the ball.
self.sceneView.scene.rootNode.addChildNode(sphereNode!)
}
If you need the full swift code to get started...take a look at this earlier post adds a cube.scn from a remote url
You can do long press with
#objc func longPress(_ gesture: UILongPressGestureRecognizer) {
}
But its better to just detect you've tapped on an existing sphereNode you want to remove. You could add something like this to the above function.
let tappedNode = self.sceneView.hitTest(gesture.location(in: gesture.view), options: [:])
if !tappedNode.isEmpty {
let node = tappedNode[0].node
node.removeFromParent()
} else {
// add my new node
}
Imagine a game world that's nothing other than an SKTileMapNode with 10x10 tiles on the screen.
The user touches a tile.
Does SKTileMapNode provide a way to know which tile has been touched? Or do coordinate hunts need be done to determine which tile is in the location of the touch?
Or is there some other way that this should be done?
Using a UITapGestureRecognizer you can retrieve the touched tile using the tileDefinition function from SKTileMapNode.
func handleTapFrom(recognizer: UITapGestureRecognizer) {
if recognizer.state != .ended {
return
}
let recognizorLocation = recognizer.location(in: recognizer.view!)
let location = self.convertPoint(fromView: recognizorLocation)
guard let map = childNode(withName: "background") as? SKTileMapNode else {
fatalError("Background node not loaded")
}
let column = map.tileColumnIndex(fromPosition: location)
let row = map.tileRowIndex(fromPosition: location)
let tile = map.tileDefinition(atColumn: column, row: row)
}
Then if you have added userData in the TilemapEditor, this can be retrieved. Values to include in userData might be cost to move through the tile etc.
let data = tile.userData?.value(forKey: "myKey")
The advantage of using Recognizers is that Tap, Pan and Long Press can be handled cleanly in separate functions that don't interfere with each other. You initialise the gesture recognizor in SKScene.
override func didMove(to view: SKView) {
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(self.handleTapFrom(recognizer:)))
tapGestureRecognizer.numberOfTapsRequired = 1
view.addGestureRecognizer(tapGestureRecognizer)
}