I am creating an app that uses SceneKit. The model is at a fixed location and the user can translate and rotate the camera around the scene.
Translating works fine, and rotating the camera also works - as long as only one axis was rotated.
When the camera faces down or up and the camera is rotated to the left or right, it not only rotates around that axis, but also around a second axis which looks really weird.
I tried moving the pivot point, but that didn't help.
Here is the code that I use for rotating and moving the camera:
fileprivate func translateCamera(_ x: Float, _ y: Float)
{
if let cameraNode = self.cameraNode
{
let moveX = x * 2 // TODO Settings.speed
let moveY = -y * 2 // TODO Settings.speed
let position = SCNVector3Make(moveX, 0, moveY)
let rotatedPosition = self.position(position, cameraNode.rotation)
let translated = SCNMatrix4Translate(cameraNode.transform, rotatedPosition.x, rotatedPosition.y, rotatedPosition.z)
cameraNode.transform = translated
if cameraNode.position.y < 25
{
cameraNode.position.y = 25
}
}
}
fileprivate func position(_ position: SCNVector3, _ rotation: SCNVector4) -> SCNVector3
{
if rotation.w == 0
{
return position
}
let gPosition: GLKVector3 = SCNVector3ToGLKVector3(position)
let gRotation = GLKMatrix4MakeRotation(rotation.w, rotation.x, rotation.y, rotation.z)
let r = GLKMatrix4MultiplyVector3(gRotation, gPosition)
return SCNVector3FromGLKVector3(r)
}
fileprivate func rotateCamera(_ x: Float, _ y: Float)
{
if let cameraNode = self.cameraNode
{
let moveX = x / 50.0
let moveY = y / 50.0
let rotated = SCNMatrix4Rotate(SCNMatrix4Identity, -moveX, 0, 1, 0)
cameraNode.transform = SCNMatrix4Mult(rotated, cameraNode.transform)
let rotated2 = SCNMatrix4Rotate(SCNMatrix4Identity, moveY, 1, 0, 0)
cameraNode.transform = SCNMatrix4Mult(rotated2, cameraNode.transform)
}
}
What would be the correct approach to "lock" the camera so it only moves around the desired axis? I made a small video showing the behavior:
https://www.youtube.com/watch?v=ctK-hnw7JxY
As long as only one axis was rotated it works fine.
But as soon as the second axis gets rotated, it also tilts to the side.
Create empty node and add cameraNode as its child. rotate cameraNode for x and emptyNode for y.
Related
So I have following code to create custom wall
let wall = SCNPlane(width: CGFloat(distance),
height: CGFloat(height))
wall.firstMaterial = wallMaterial()
let node = SCNNode(geometry: wall)
// always render before the beachballs
node.renderingOrder = -10
// get center point
node.position = SCNVector3(from.x + (to.x - from.x) * 0.5,
from.y + height * 0.5,
from.z + (to.z - from.z) * 0.5)
node.eulerAngles = SCNVector3(0,
-atan2(to.x - node.position.x, from.z - node.position.z) - Float.pi * 0.5,
0)
And Now I am adding simple SCNPlane on hit test and add video (skscene to it)
// first.node is hittest result
let node = SCNNode(geometry: SCNPlane(width: CGFloat(width) , height: CGFloat(height))
node.geometry?.firstMaterial?.isDoubleSided = true
node.geometry?.firstMaterial?.diffuse.contents = self.create2DVideoScene(xScale: first.node.eulerAngles.y < 0 ? -1 : nil)
node.position = nodesWithDistance.previous.node.mainNode.position
node.eulerAngles = first.node.eulerAngles
Here How I created 2d node
/// Creates 2D video scene
private func create2DVideoScene (xScale:CGFloat?) -> SKScene {
var videoPlayer = AVPlayer()
if let validURL = Bundle.main.url(forResource: "video", withExtension: "mp4", subdirectory: "/art.scnassets") {
let item = AVPlayerItem(url: validURL)
videoPlayer = AVPlayer(playerItem: item)
}
let videoNode = SKVideoNode(avPlayer: videoPlayer)
videoNode.yScale *= -1
// While debug I observe that if first.node.rotation.y in - , then we need to change xScale to -1 (when wall draw from right -> left )
if let xScale = xScale {
videoNode.xScale *= xScale
}
videoNode.play()
let skScene = SKScene(size: self.sceneView.frame.size)
skScene.scaleMode = .aspectFill
skScene.backgroundColor = .green
skScene.addChild(videoNode)
videoNode.position = CGPoint(x: skScene.size.width/2, y: skScene.size.height/2)
videoNode.size = skScene.size
return skScene
}
Issue :: If I draw wall node from left to right means first point is on left side and other point on right side and draw wall between them. Then Video is flipped.
If I draw from right to left means first point is on right side and second point is on left side and draw line between them then video is perfectly fine.
To fix this I checked wall eulerAngles check the line self.create2DVideoScene but this is not working in every area of real world
I want video should not be start flipped in front of user
EDIT
video is flipped because of eulerAngles is different in both case while create a wall
Angle point1 to point2 --> (0.000000 -1.000000 0.000000 3.735537)
Angle point2 to point1 -- > (0.000000 -1.000000 0.000000 0.478615)
Issue video Click here to play video
Please please provide the suggestion or solution of this issue .
Video flipped
I have fixed issue with temporary solution still looking for a better one
Issue is of wall. wall is flipped other side of camera when draw from right to left direction. I have figure it out by setting isDoubleSided = false and by applying a image as diffuse contents which has text and I can see that image is flipped itself.
I have tried many things but this one helps me
Normalize vector
Find the cross between to SCNVectors
If y > 0 I just swapped from and to Value
Code
let normalizedTO = to.normalized()
let normalizedFrom = from.normalized()
let angleBetweenTwoVectors = normalizedTO.cross(normalizedFrom)
var from = from
var to = to
if angleBetweenTwoVectors.y > 0 {
let temp = from
from = to
to = temp
}
// Inside extension of SCNVector3
func normalized() -> SCNVector3 {
if self.length() == 0 {
return self
}
return self / self.length()
}
func cross(_ vec: SCNVector3) -> SCNVector3 {
return SCNVector3(self.y * vec.z - self.z * vec.y, self.z * vec.x - self.x * vec.z, self.x * vec.y - self.y * vec.x)
}
Hope it is helpful. If anyone know better solution please answer it.
Currently working on a game in scenekit with swift, and i'm trying to implement camera constraints to take full advantage of everything scenekit has to offer. I am very close to getting what I want, but i am missing one piece and cannot seem to figure it out. Videos of the issue below.
This video shows my camera following my ship with code I wrote. The orientation and angle are good, and it follows with a nice inertia. I achieve this with the follow code:
func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {
updateCameraPosition()
}
func updateCameraPosition () {
let currentPosition = player.node.presentation.position
let newVector = getNewCameraVector(currentPosition: currentPosition, t: 0.03 )
cameraNode.runAction( SCNAction.move(to: newVector, duration: 0.2) )
prevCameraPosition = currentPosition
}
func getNewCameraVector (currentPosition:SCNVector3, t: Float) -> SCNVector3 {
let x = (1 - t) * prevCameraPosition.x + t * currentPosition.x
let y = cameraZoom
let z = ((1 - t) * prevCameraPosition.z + t * currentPosition.z) + cameraZPos!
return SCNVector3(x,y,z)
}
This video shows the camera following my ship with constraints. It seems to just be rotating on the x,z axis. So i'd really like for it to move back and forth across the x,z axis like the code I wrote... or something similar. These constraints are taken from the WWDC 2017 scenekit fox demo, and i've implimented them like so:
// look at "lookAtTarget"
let lookAtConstraint = SCNLookAtConstraint(target: player.node)
lookAtConstraint.influenceFactor = 0.07
lookAtConstraint.isGimbalLockEnabled = true
// distance constraints
let distanceConstraint = SCNDistanceConstraint(target: player.node)
let distance = CGFloat(simd_length(cameraNode.simdPosition))
distanceConstraint.minimumDistance = distance
distanceConstraint.maximumDistance = distance
// configure a constraint to maintain a constant altitude relative to the character
//let desiredAltitude = abs(cameraNode.simdWorldPosition.y)
//weak var weakSelf = self
let keepAltitude = SCNTransformConstraint.positionConstraint(inWorldSpace: true, with: {(_ node: SCNNode, _ position: SCNVector3) -> SCNVector3 in
return SCNVector3(0, self.cameraZoom, self.cameraZoom)
})
let accelerationConstraint = SCNAccelerationConstraint()
accelerationConstraint.maximumLinearVelocity = 1500.0
accelerationConstraint.maximumLinearAcceleration = 50.0
accelerationConstraint.damping = 0.05
cameraNode.constraints = [distanceConstraint, keepAltitude, accelerationConstraint, lookAtConstraint]
If anybody has any idea how i can achieve this i'd love to hear it! There isn't any documentation about these new constraints so i'm kind of just guessing when i put them on.
Answering my own question in hopes it helps others. I was finnally able to replicate the camera code with the following constraints:
func setupCamera () {
cameraNode.camera = SCNCamera()
cameraZPos = cameraZoom / 2 // cameraZoom == 100
if let cam = cameraNode.camera {
cam.zFar = cameraZFar
}
let replicatorConstraint = SCNReplicatorConstraint(target: player.node)
replicatorConstraint.positionOffset = SCNVector3(0,cameraZoom,cameraZPos!)
replicatorConstraint.replicatesOrientation = false
let lookAtConstraint = SCNLookAtConstraint(target: player.node)
lookAtConstraint.influenceFactor = 0.07
lookAtConstraint.isGimbalLockEnabled = true
let accelerationConstraint = SCNAccelerationConstraint()
accelerationConstraint.maximumLinearAcceleration = 300.0
cameraNode.constraints = [replicatorConstraint, lookAtConstraint, accelerationConstraint]
}
Comment on this answer if you have any questions and i'll be happy to share what I've learnt!
I'm trying to recode the camera management in SceneKit.
For that, I use UIPanGestureRecognizer for the rotation of camera around an object (In this case around the centre of scene).
Next I get the different ratio or length to determinate the angle to add at axes (X, Y, Z) of imaginary sphere where camera is attached (cameraOrbit in code).
My problem is that I use the position of camera to determinate the angle to add at sphere. But the position is constant. When I change the sphere rotation, the position of child node camera are never updated. Then angle never change.
import SceneKit
import UIKit
class SceneManager
{
private let scene: SCNScene
private let view: SCNView
private let camera: SCNNode
private let cameraOrbit: SCNNode
private let cameraRadius: Float
init(view: SCNView, assetFolder: String, sceneName: String, cameraName: String, backgroundColor: UIColor) {
self.view = view
self.scene = SCNScene(named: (assetFolder + "/" + sceneName))!
if (self.scene.rootNode.childNodeWithName(cameraName, recursively: true) == nil) {
print("Fatal error: Cannot find camera in scene with name :\"", cameraName, "\"")
exit(1)
}
self.camera = self.scene.rootNode.childNodeWithName(cameraName, recursively: true)! // Retrieve cameraNode created in scene file
self.cameraOrbit = SCNNode()
self.cameraOrbit.addChildNode(self.camera)
self.cameraRadius = sqrt(pow((self.camera.position.x), 2) + pow(self.camera.position.y, 2)) // CameraOrbit radius for rotation camera in panHandler
self.scene.rootNode.addChildNode(self.cameraOrbit)
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(panHandler(_:)))
panGesture.maximumNumberOfTouches = 1
self.view.addGestureRecognizer(panGesture)
self.view.backgroundColor = backgroundColor
self.view.pointOfView = self.camera
self.view.scene = self.scene
}
#objc private func panHandler(sender: UIPanGestureRecognizer) {
let alpha = cos(self.camera.position.z / self.cameraRadius) // Get angle of camera
// --
print(self.camera.position) // <-------- (X, Y, Z) The axes position are always the same
// --
var ratioX = 1 - ((CGFloat)(alpha) / (CGFloat)(M_PI)) // Get the radio with angle for apply to Z and X axes rotation
var ratioZ = ((CGFloat)(alpha) / (CGFloat)(M_PI))
// Change direction of rotation depending camera's position in trigonometric circle
if (self.camera.position.z > 0 && self.camera.position.x < 0) {
ratioZ *= -1
} else if (self.camera.position.z < 0 && self.camera.position.x < 0) {
ratioX *= -1
ratioZ *= -1
} else if (self.camera.position.z > 0 && self.camera.position.x > 0) {
ratioX *= -1
}
// Set the angle rotation to add at imaginary sphere (cameraOrbit)
let xAngleToAdd = (sender.velocityInView(sender.view!).y / 10000) * ratioX
let yAngleToAdd = (sender.velocityInView(sender.view!).x / 10000) * (-1)
let zAngleToAdd = (sender.velocityInView(sender.view!).y / 10000) * ratioZ
let rotation = SCNAction.rotateByX(xAngleToAdd, y: yAngleToAdd, z: zAngleToAdd, duration: 0.5)
self.cameraOrbit.runAction(rotation)
}
}
If anyone have an idea? Thanks
When you update the parent node's transform (position, rotation, scale), the child nodes' transform remains unchanged in local coordinates (relative to the parent), it only changes in world coordinates.
If you want to access the world transform for a given node, use the worldTransform property.
I'm building a 360 video viewer using the iOS SceneKit framework.
I'd like to use a UIPanGestureRecognizer to control the camera's orientation.
SCNNodes have several properties we can use to specify their rotation: rotation (a rotation matrix), orientation (a quaternion), eulerAngles (per axis angles).
Everything I've read says to avoid using euler angles in order to avoid gimbal lock.
I'd like to use quaternions for a few reasons which I won't go into here.
I'm having trouble getting this to work properly. Camera control is almost where I'd like it to be but there's something wrong. It looks as though the camera is being rotated about the Z axis despite my attempts to only influence the X and Y axes.
I believe the issue has something to do with my quaternion multiplication logic. I haven't done anything related to quaternion in years :( My pan gesture handler is here:
func didPan(recognizer: UIPanGestureRecognizer)
{
switch recognizer.state
{
case .Began:
self.previousPanTranslation = .zero
case .Changed:
guard let previous = self.previousPanTranslation else
{
assertionFailure("Attempt to unwrap previous pan translation failed.")
return
}
// Calculate how much translation occurred between this step and the previous step
let translation = recognizer.translationInView(recognizer.view)
let translationDelta = CGPoint(x: translation.x - previous.x, y: translation.y - previous.y)
// Use the pan translation along the x axis to adjust the camera's rotation about the y axis.
let yScalar = Float(translationDelta.x / self.view.bounds.size.width)
let yRadians = yScalar * self.dynamicType.MaxPanGestureRotation
// Use the pan translation along the y axis to adjust the camera's rotation about the x axis.
let xScalar = Float(translationDelta.y / self.view.bounds.size.height)
let xRadians = xScalar * self.dynamicType.MaxPanGestureRotation
// Use the radian values to construct quaternions
let x = GLKQuaternionMakeWithAngleAndAxis(xRadians, 1, 0, 0)
let y = GLKQuaternionMakeWithAngleAndAxis(yRadians, 0, 1, 0)
let z = GLKQuaternionMakeWithAngleAndAxis(0, 0, 0, 1)
let combination = GLKQuaternionMultiply(z, GLKQuaternionMultiply(y, x))
// Multiply the quaternions to obtain an updated orientation
let scnOrientation = self.cameraNode.orientation
let glkOrientation = GLKQuaternionMake(scnOrientation.x, scnOrientation.y, scnOrientation.z, scnOrientation.w)
let q = GLKQuaternionMultiply(combination, glkOrientation)
// And finally set the current orientation to the updated orientation
self.cameraNode.orientation = SCNQuaternion(x: q.x, y: q.y, z: q.z, w: q.w)
self.previousPanTranslation = translation
case .Ended, .Cancelled, .Failed:
self.previousPanTranslation = nil
case .Possible:
break
}
}
My code is open source here: https://github.com/alfiehanssen/360Player/
Check out the pan-gesture branch in particular:
https://github.com/alfiehanssen/360Player/tree/pan-gesture
If you pull the code down I believe you'll have to run it on a device rather than the simulator.
I posted a video here that demonstrates the bug (please excuse the low resness of the video file):
https://vimeo.com/174346191
Thanks in advance for any help!
I was able to get this working using quaternions. The full code is here: ThreeSixtyPlayer. A sample is here:
let orientation = cameraNode.orientation
// Use the pan translation along the x axis to adjust the camera's rotation about the y axis (side to side navigation).
let yScalar = Float(translationDelta.x / translationBounds.size.width)
let yRadians = yScalar * maxRotation
// Use the pan translation along the y axis to adjust the camera's rotation about the x axis (up and down navigation).
let xScalar = Float(translationDelta.y / translationBounds.size.height)
let xRadians = xScalar * maxRotation
// Represent the orientation as a GLKQuaternion
var glQuaternion = GLKQuaternionMake(orientation.x, orientation.y, orientation.z, orientation.w)
// Perform up and down rotations around *CAMERA* X axis (note the order of multiplication)
let xMultiplier = GLKQuaternionMakeWithAngleAndAxis(xRadians, 1, 0, 0)
glQuaternion = GLKQuaternionMultiply(glQuaternion, xMultiplier)
// Perform side to side rotations around *WORLD* Y axis (note the order of multiplication, different from above)
let yMultiplier = GLKQuaternionMakeWithAngleAndAxis(yRadians, 0, 1, 0)
glQuaternion = GLKQuaternionMultiply(yMultiplier, glQuaternion)
cameraNode.orientation = SCNQuaternion(x: glQuaternion.x, y: glQuaternion.y, z: glQuaternion.z, w: glQuaternion.w)
Sorry, this uses SCNVector4 instead of quaternions but works well for my use. I apply it to my root-most geometry nodes container ("rotContainer") instead of the camera but a brief test seems to indicate it will work for camera use as well.
func panGesture(sender: UIPanGestureRecognizer) {
let translation = sender.translationInView(sender.view!)
let pan_x = Float(translation.x)
let pan_y = Float(-translation.y)
let anglePan = sqrt(pow(pan_x,2)+pow(pan_y,2))*(Float)(M_PI)/180.0
var rotationVector = SCNVector4()
rotationVector.x = -pan_y
rotationVector.y = pan_x
rotationVector.z = 0
rotationVector.w = anglePan
rotContainer.rotation = rotationVector
if(sender.state == UIGestureRecognizerState.Ended) {
let currentPivot = rotContainer.pivot
let changePivot = SCNMatrix4Invert(rotContainer.transform)
rotContainer.pivot = SCNMatrix4Mult(changePivot, currentPivot)
rotContainer.transform = SCNMatrix4Identity
}
}
bbedit's solution combines well with Rotating a camera on an orbit. Set up the camera as suggested in the linked answer then rotate the "orbit" node using bbedit's ideas. I have modified the code for Swift 4 version of his code that did work:
#IBAction func handlePan(_ sender: UIPanGestureRecognizer) {
print("Called the handlePan method")
let scnView = self.view as! SCNView
let cameraOrbit = scnView.scene?.rootNode.childNode(withName: "cameraOrbit", recursively: true)
let translation = sender.translation(in: sender.view!)
let pan_x = Float(translation.x)
let pan_y = Float(-translation.y)
let anglePan = sqrt(pow(pan_x,2)+pow(pan_y,2))*(Float)(Double.pi)/180.0
var rotationVector = SCNVector4()
rotationVector.x = -pan_y
rotationVector.y = pan_x
rotationVector.z = 0
rotationVector.w = anglePan
cameraOrbit!.rotation = rotationVector
if(sender.state == UIGestureRecognizerState.ended) {
let currentPivot = cameraOrbit!.pivot
let changePivot = SCNMatrix4Invert(cameraOrbit!.transform)
cameraOrbit!.pivot = SCNMatrix4Mult(changePivot, currentPivot)
cameraOrbit!.transform = SCNMatrix4Identity
}
}
I've got an SCNCamera at position(30,30,30) with a SCNLookAtConstraint on an object located at position(0,0,0). I'm trying to get the camera to rotate around the object on an imaginary sphere using A UIPanGestureRecognizer, while maintaining the radius between the camera and the object. I'm assuming I should use Quaternion projections but my math knowledge in this area is abysmal. My known variables are x & y translation + the radius I am trying to keep. I've written the project in Swift but an answer in Objective-C would be equally accepted (Hopefully using a standard Cocoa Touch Framework).
Where:
private var cubeView : SCNView!;
private var cubeScene : SCNScene!;
private var cameraNode : SCNNode!;
Here's my code for setting the scene:
// setup the SCNView
cubeView = SCNView(frame: CGRectMake(0, 0, self.width(), 175));
cubeView.autoenablesDefaultLighting = YES;
self.addSubview(cubeView);
// setup the scene
cubeScene = SCNScene();
cubeView.scene = cubeScene;
// setup the camera
let camera = SCNCamera();
camera.usesOrthographicProjection = YES;
camera.orthographicScale = 9;
camera.zNear = 0;
camera.zFar = 100;
cameraNode = SCNNode();
cameraNode.camera = camera;
cameraNode.position = SCNVector3Make(30, 30, 30)
cubeScene.rootNode.addChildNode(cameraNode)
// setup a target object
let box = SCNBox(width: 10, height: 10, length: 10, chamferRadius: 0);
let boxNode = SCNNode(geometry: box)
cubeScene.rootNode.addChildNode(boxNode)
// put a constraint on the camera
let targetNode = SCNLookAtConstraint(target: boxNode);
targetNode.gimbalLockEnabled = YES;
cameraNode.constraints = [targetNode];
// add a gesture recogniser
let gesture = UIPanGestureRecognizer(target: self, action: "panDetected:");
cubeView.addGestureRecognizer(gesture);
And here is the code for the gesture recogniser handling:
private var position: CGPoint!;
internal func panDetected(gesture:UIPanGestureRecognizer) {
switch(gesture.state) {
case UIGestureRecognizerState.Began:
position = CGPointZero;
case UIGestureRecognizerState.Changed:
let aPosition = gesture.translationInView(cubeView);
let delta = CGPointMake(aPosition.x-position.x, aPosition.y-position.y);
// ??? no idea...
position = aPosition;
default:
break
}
}
Thanks!
It might help to break down your issue into subproblems.
Setting the Scene
First, think about how to organize your scene to enable the kind of motion you want. You talk about moving the camera as if it's attached to an invisible sphere. Use that idea! Instead of trying to work out the math to set your cameraNode.position to some point on an imaginary sphere, just think about what you would do to move the camera if it were attached to a sphere. That is, just rotate the sphere.
If you wanted to rotate a sphere separately from the rest of your scene contents, you'd attach it to a separate node. Of course, you don't actually need to insert a sphere geometry into your scene. Just make a node whose position is concentric with the object you want your camera to orbit around, then attach the camera to a child node of that node. Then you can rotate that node to move the camera. Here's a quick demo of that, absent the scroll-event handling business:
let camera = SCNCamera()
camera.usesOrthographicProjection = true
camera.orthographicScale = 9
camera.zNear = 0
camera.zFar = 100
let cameraNode = SCNNode()
cameraNode.position = SCNVector3(x: 0, y: 0, z: 50)
cameraNode.camera = camera
let cameraOrbit = SCNNode()
cameraOrbit.addChildNode(cameraNode)
cubeScene.rootNode.addChildNode(cameraOrbit)
// rotate it (I've left out some animation code here to show just the rotation)
cameraOrbit.eulerAngles.x -= CGFloat(M_PI_4)
cameraOrbit.eulerAngles.y -= CGFloat(M_PI_4*3)
Here's what you see on the left, and a visualization of how it works on the right. The checkered sphere is cameraOrbit, and the green cone is cameraNode.
There's a couple of bonuses to this approach:
You don't have to set the initial camera position in Cartesian coordinates. Just place it at whatever distance you want along the z-axis. Since cameraNode is a child node of cameraOrbit, its own position stays constant -- the camera moves due to the rotation of cameraOrbit.
As long as you just want the camera pointed at the center of this imaginary sphere, you don't need a look-at constraint. The camera points in the -Z direction of the space it's in -- if you move it in the +Z direction, then rotate the parent node, the camera will always point at the center of the parent node (i.e. the center of rotation).
Handling Input
Now that you've got your scene architected for camera rotation, turning input events into rotation is pretty easy. Just how easy depends on what kind of control you're after:
Looking for arcball rotation? (It's great for direct manipulation, since you can feel like you're physically pushing a point on the 3D object.) There are some questions and answers about that already on SO -- most of them use GLKQuaternion. (UPDATE: GLK types are "sorta" available in Swift 1.2 / Xcode 6.3. Prior to those versions you can do your math in ObjC via a bridging header.)
For a simpler alternative, you can just map the x and y axes of your gesture to the yaw and pitch angles of your node. It's not as spiffy as arcball rotation, but it's pretty easy to implement -- all you need to do is work out a points-to-radians conversion that covers the amount of rotation you're after.
Either way, you can skip some of the gesture recognizer boilerplate and gain some handy interactive behaviors by using UIScrollView instead. (Not that there isn't usefulness to sticking with gesture recognizers -- this is just an easily implemented alternative.)
Drop one on top of your SCNView (without putting another view inside it to be scrolled) and set its contentSize to a multiple of its frame size... then during scrolling you can map the contentOffset to your eulerAngles:
func scrollViewDidScroll(scrollView: UIScrollView) {
let scrollWidthRatio = Float(scrollView.contentOffset.x / scrollView.frame.size.width)
let scrollHeightRatio = Float(scrollView.contentOffset.y / scrollView.frame.size.height)
cameraOrbit.eulerAngles.y = Float(-2 * M_PI) * scrollWidthRatio
cameraOrbit.eulerAngles.x = Float(-M_PI) * scrollHeightRatio
}
On the one hand, you have to do a bit more work for infinite scrolling if you want to spin endlessly in one or both directions. On the other, you get nice scroll-style inertia and bounce behaviors.
Hey I ran into the problem the other day and the solution I came up with is fairly simple but works well.
First I created my camera and added it to my scene like so:
// create and add a camera to the scene
cameraNode = [SCNNode node];
cameraNode.camera = [SCNCamera camera];
cameraNode.camera.automaticallyAdjustsZRange = YES;
[scene.rootNode addChildNode:cameraNode];
// place the camera
cameraNode.position = SCNVector3Make(0, 0, 0);
cameraNode.pivot = SCNMatrix4MakeTranslation(0, 0, -15); //the -15 here will become the rotation radius
Then I made a CGPoint slideVelocity class variable. And created a UIPanGestureRecognizer and a and in its callback I put the following:
-(void)handlePan:(UIPanGestureRecognizer *)gestureRecognize{
slideVelocity = [gestureRecognize velocityInView:self.view];
}
Then I have this method that is called every frame. Note that I use GLKit for quaternion math.
-(void)renderer:(id<SCNSceneRenderer>)aRenderer didRenderScene:(SCNScene *)scenie atTime:(NSTimeInterval)time {
//spin the camera according the the user's swipes
SCNQuaternion oldRot = cameraNode.rotation; //get the current rotation of the camera as a quaternion
GLKQuaternion rot = GLKQuaternionMakeWithAngleAndAxis(oldRot.w, oldRot.x, oldRot.y, oldRot.z); //make a GLKQuaternion from the SCNQuaternion
//The next function calls take these parameters: rotationAngle, xVector, yVector, zVector
//The angle is the size of the rotation (radians) and the vectors define the axis of rotation
GLKQuaternion rotX = GLKQuaternionMakeWithAngleAndAxis(-slideVelocity.x/viewSlideDivisor, 0, 1, 0); //For rotation when swiping with X we want to rotate *around* y axis, so if our vector is 0,1,0 that will be the y axis
GLKQuaternion rotY = GLKQuaternionMakeWithAngleAndAxis(-slideVelocity.y/viewSlideDivisor, 1, 0, 0); //For rotation by swiping with Y we want to rotate *around* the x axis. By the same logic, we use 1,0,0
GLKQuaternion netRot = GLKQuaternionMultiply(rotX, rotY); //To combine rotations, you multiply the quaternions. Here we are combining the x and y rotations
rot = GLKQuaternionMultiply(rot, netRot); //finally, we take the current rotation of the camera and rotate it by the new modified rotation.
//Then we have to separate the GLKQuaternion into components we can feed back into SceneKit
GLKVector3 axis = GLKQuaternionAxis(rot);
float angle = GLKQuaternionAngle(rot);
//finally we replace the current rotation of the camera with the updated rotation
cameraNode.rotation = SCNVector4Make(axis.x, axis.y, axis.z, angle);
//This specific implementation uses velocity. If you don't want that, use the rotation method above just replace slideVelocity.
//decrease the slider velocity
if (slideVelocity.x > -0.1 && slideVelocity.x < 0.1) {
slideVelocity.x = 0;
}
else {
slideVelocity.x += (slideVelocity.x > 0) ? -1 : 1;
}
if (slideVelocity.y > -0.1 && slideVelocity.y < 0.1) {
slideVelocity.y = 0;
}
else {
slideVelocity.y += (slideVelocity.y > 0) ? -1 : 1;
}
}
This code gives infinite Arcball rotation with velocity, which I believe is what you are looking for. Also, you don't need the SCNLookAtConstraint with this method. In fact, that will probably mess it up, so don't do that.
If you want to implement rickster's answer using a gesture recognizer, you have to save state information as you'll only be given a translation relative to the beginning of the gesture. I added two vars to my class
var lastWidthRatio: Float = 0
var lastHeightRatio: Float = 0
And implemented his rotate code as follows:
func handlePanGesture(sender: UIPanGestureRecognizer) {
let translation = sender.translationInView(sender.view!)
let widthRatio = Float(translation.x) / Float(sender.view!.frame.size.width) + lastWidthRatio
let heightRatio = Float(translation.y) / Float(sender.view!.frame.size.height) + lastHeightRatio
self.cameraOrbit.eulerAngles.y = Float(-2 * M_PI) * widthRatio
self.cameraOrbit.eulerAngles.x = Float(-M_PI) * heightRatio
if (sender.state == .Ended) {
lastWidthRatio = widthRatio % 1
lastHeightRatio = heightRatio % 1
}
}
Maybe this could be useful for readers.
class GameViewController: UIViewController {
var cameraOrbit = SCNNode()
let cameraNode = SCNNode()
let camera = SCNCamera()
//HANDLE PAN CAMERA
var lastWidthRatio: Float = 0
var lastHeightRatio: Float = 0.2
var fingersNeededToPan = 1
var maxWidthRatioRight: Float = 0.2
var maxWidthRatioLeft: Float = -0.2
var maxHeightRatioXDown: Float = 0.02
var maxHeightRatioXUp: Float = 0.4
//HANDLE PINCH CAMERA
var pinchAttenuation = 20.0 //1.0: very fast ---- 100.0 very slow
var lastFingersNumber = 0
override func viewDidLoad() {
super.viewDidLoad()
// create a new scene
let scene = SCNScene(named: "art.scnassets/ship.scn")!
// create and add a light to the scene
let lightNode = SCNNode()
lightNode.light = SCNLight()
lightNode.light!.type = SCNLightTypeOmni
lightNode.position = SCNVector3(x: 0, y: 10, z: 10)
scene.rootNode.addChildNode(lightNode)
// create and add an ambient light to the scene
let ambientLightNode = SCNNode()
ambientLightNode.light = SCNLight()
ambientLightNode.light!.type = SCNLightTypeAmbient
ambientLightNode.light!.color = UIColor.darkGrayColor()
scene.rootNode.addChildNode(ambientLightNode)
//Create a camera like Rickster said
camera.usesOrthographicProjection = true
camera.orthographicScale = 9
camera.zNear = 1
camera.zFar = 100
cameraNode.position = SCNVector3(x: 0, y: 0, z: 50)
cameraNode.camera = camera
cameraOrbit = SCNNode()
cameraOrbit.addChildNode(cameraNode)
scene.rootNode.addChildNode(cameraOrbit)
//initial camera setup
self.cameraOrbit.eulerAngles.y = Float(-2 * M_PI) * lastWidthRatio
self.cameraOrbit.eulerAngles.x = Float(-M_PI) * lastHeightRatio
// retrieve the SCNView
let scnView = self.view as! SCNView
// set the scene to the view
scnView.scene = scene
//allows the user to manipulate the camera
scnView.allowsCameraControl = false //not needed
// add a tap gesture recognizer
let panGesture = UIPanGestureRecognizer(target: self, action: "handlePan:")
scnView.addGestureRecognizer(panGesture)
// add a pinch gesture recognizer
let pinchGesture = UIPinchGestureRecognizer(target: self, action: "handlePinch:")
scnView.addGestureRecognizer(pinchGesture)
}
func handlePan(gestureRecognize: UIPanGestureRecognizer) {
let numberOfTouches = gestureRecognize.numberOfTouches()
let translation = gestureRecognize.translationInView(gestureRecognize.view!)
var widthRatio = Float(translation.x) / Float(gestureRecognize.view!.frame.size.width) + lastWidthRatio
var heightRatio = Float(translation.y) / Float(gestureRecognize.view!.frame.size.height) + lastHeightRatio
if (numberOfTouches==fingersNeededToPan) {
// HEIGHT constraints
if (heightRatio >= maxHeightRatioXUp ) {
heightRatio = maxHeightRatioXUp
}
if (heightRatio <= maxHeightRatioXDown ) {
heightRatio = maxHeightRatioXDown
}
// WIDTH constraints
if(widthRatio >= maxWidthRatioRight) {
widthRatio = maxWidthRatioRight
}
if(widthRatio <= maxWidthRatioLeft) {
widthRatio = maxWidthRatioLeft
}
self.cameraOrbit.eulerAngles.y = Float(-2 * M_PI) * widthRatio
self.cameraOrbit.eulerAngles.x = Float(-M_PI) * heightRatio
print("Height: \(round(heightRatio*100))")
print("Width: \(round(widthRatio*100))")
//for final check on fingers number
lastFingersNumber = fingersNeededToPan
}
lastFingersNumber = (numberOfTouches>0 ? numberOfTouches : lastFingersNumber)
if (gestureRecognize.state == .Ended && lastFingersNumber==fingersNeededToPan) {
lastWidthRatio = widthRatio
lastHeightRatio = heightRatio
print("Pan with \(lastFingersNumber) finger\(lastFingersNumber>1 ? "s" : "")")
}
}
func handlePinch(gestureRecognize: UIPinchGestureRecognizer) {
let pinchVelocity = Double.init(gestureRecognize.velocity)
//print("PinchVelocity \(pinchVelocity)")
camera.orthographicScale -= (pinchVelocity/pinchAttenuation)
if camera.orthographicScale <= 0.5 {
camera.orthographicScale = 0.5
}
if camera.orthographicScale >= 10.0 {
camera.orthographicScale = 10.0
}
}
override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {
return .Landscape
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Release any cached data, images, etc that aren't in use.
}
}
There's no need to save the state anywhere but the node itself.
The code which uses some sort of width ratio behaves weirdly when you scroll back and forth repeatedly, and other code here looks overcomplicated.
I came up with a different (and I believe a better one) solution for gesture recognizers, based on #rickster's approach.
UIPanGestureRecognizer:
#objc func handlePan(recognizer: UIPanGestureRecognizer) {
let translation = recognizer.velocity(in: recognizer.view)
cameraOrbit.eulerAngles.y -= Float(translation.x/CGFloat(panModifier)).radians
cameraOrbit.eulerAngles.x -= Float(translation.y/CGFloat(panModifier)).radians
}
UIPinchGestureRecognizer:
#objc func handlePinch(recognizer: UIPinchGestureRecognizer) {
guard let camera = cameraOrbit.childNodes.first else {
return
}
let scale = recognizer.velocity
let z = camera.position.z - Float(scale)/Float(pinchModifier)
if z < MaxZoomOut, z > MaxZoomIn {
camera.position.z = z
}
}
I used velocity, as with translation when you slow down the touch it would still be the same event, causing the camera to whirl very fast, not what you'd expect.
panModifier and pinchModifier are simple constant numbers which you can use to adjust responsiveness. I found the optimal values to be 100 and 15 respectively.
MaxZoomOut and MaxZoomIn are constants as well and are exactly what they appear to be.
I also use an extension on Float to convert degrees to radians and vice-versa.
extension Float {
var radians: Float {
return self * .pi / 180
}
var degrees: Float {
return self * 180 / .pi
}
}
After trying to implement these solutions (in Objective-C) I realized that Scene Kit actually makes this a lot easier than doing all of this. SCNView has a sweet property called allowsCameraControl that puts in the appropriate gesture recognizers and moves the camera accordingly. The only problem is that it's not the arcball rotation that you're looking for, although that can be easily added by creating a child node, positioning it wherever you want, and giving it a SCNCamera. For example:
_sceneKitView.allowsCameraControl = YES; //_sceneKitView is a SCNView
//Setup Camera
SCNNode *cameraNode = [[SCNNode alloc]init];
cameraNode.position = SCNVector3Make(0, 0, 1);
SCNCamera *camera = [SCNCamera camera];
//setup your camera to fit your specific scene
camera.zNear = .1;
camera.zFar = 3;
cameraNode.camera = camera;
[_sceneKitView.scene.rootNode addChildNode:cameraNode];