3D object place perfectly in ARSCNView but problem is that when object placed in AR and move camera right, left, top and bottom too fast then 3D object started hovering and dancing anywhere with the planeNode
how I can fix this issue, trying lots of way to find the solution still not get any result
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
// Cast ARAnchor as ARPlaneAnchor
guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
let planeGeometry = ARSCNPlaneGeometry(device: MTLCreateSystemDefaultDevice()!)!
planeGeometry.update(from: planeAnchor.geometry)
// Add material to geometry
let material = SCNMaterial()
material.diffuse.contents = UIColor.blue.withAlphaComponent(0.8)
planeGeometry.materials = [material]
// Create a SCNNode from geometry
let planeNode = SCNNode(geometry: planeGeometry)
self.privateNode = planeNode
self.anchors.append(planeNode)
DispatchQueue.main.async {
self.lbl_middle_heading.text = Constants.kSharedAppDelegate?.languageBundle.localizedString(forKey: "Please tap anywhere on screen.", value: "", table: nil)
self.showFeaturePoints(isShowDeugOptions: false)
}
// Add the newly created plane node as a child of the node created for the ARAnchor
node.addChildNode(planeNode)
}
func renderer(_ renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {
// Cast ARAnchor as ARPlaneAnchor, get the child node of the anchor, and cast that node's geometry as an ARSCNPlaneGeometry
guard
let planeAnchor = anchor as? ARPlaneAnchor,
let planeNode = node.childNodes.first,
let planeGeometry = planeNode.geometry as? ARSCNPlaneGeometry
else { return }
planeGeometry.update(from: planeAnchor.geometry)
}
The model is "dancing" or drifting away along some axis in AR app for three main reasons:
if you imported an animated model
if a model isn't tethered by ARAnchor
if a tracking of your scene is poor
Track a surrounding environment thoroughly and make sure it's accordingly lit and has quite detailed texture for getting a sufficient quantity of feature points to track.
Related
I am creating a rectangle in a canvas using paper JS. The following is code for drawing the rectangle in vue.js.
created () {
const toolDrag = event => {
let trackingRect = new paper.Path.Rectangle(event.downPoint, event.point)
trackingRect.strokeColor = new paper.Color('#2661D8')
trackingRect.strokeColor.alpha = 0.7
trackingRect.strokeWidth = this.strokeWidth
trackingRect.removeOn({
drag: true,
up: true
})
}
// Finalise rectangle properties and draw.
let $this = this;
const toolUp = event => {
let newRect = new paper.Path.Rectangle(event.downPoint, event.point)
newRect.strokeColor = new paper.Color(this.getColor().stroke)
newRect.fillColor = new paper.Color(this.getColor().fill)
newRect.strokeWidth = this.strokeWidth
newRect.selected = true;
// Custom data attribute:
newRect.data.type = 'rectangle'
newRect.data.class = ''
// Flag the annotation has been edited and the changes are not saved
this.flagAnnotationEdits()
}
this.toolRect = new paper.Tool();
this.toolRect.onMouseDrag = toolDrag;
this.toolRect.onMouseUp = toolUp;
},
Now I want to allow user to resize this drawn rectangle by dragging any corner of the rectangle, but I am kind of stuck and unable to understand how to do this.
I have seen solutions for resizing a rectangle by changing bounds, but could not find solution for my use case. Any help is appreciated.
There are many ways to achieve what you want.
One of the simplest that I found is to recreate the rectangle, each time you drag one of its corners.
This way, you only have to know the dragged corner position and the opposite corner position and you can easily create the proper rectangle.
Here is a sketch demonstrating a possible implementation.
I think that you should easily be able to transpose it to your specific case.
// This settings controls the handles size.
const HANDLES_RADIUS = 5;
// This flag allow us to know when we are dragging an handle.
let dragging = false;
// This will store the offset from the handle position to the
// mouse down point. This allow a better drag UX.
let offset;
// This will store the point representing the opposite rectangle corner from
// the one being dragged.
let oppositePoint;
// We start by creating a rectangle in the middle of the canvas.
// This rectangle will be replaced each time a corner is dragged.
let rectangle = createRectangle(view.center - 50, view.center + 50);
// Then, we create an handle for each of the corners.
// These will be used to modify the rectangle shape.
const handles = rectangle.segments.map((segment, index) => new Path.Rectangle({
from: segment.point - HANDLES_RADIUS,
to: segment.point + HANDLES_RADIUS,
fillColor: 'orange',
// We store the segment index bound to this specific handle in the custom
// data object. This will allow us to know, when an handle is clicked,
// which segment is concerned by the event.
data: { segmentIndex: index },
// On mouse down on an handle...
onMouseDown: function(event) {
// ...get and store the opposite segment point.
// We will use it later to redraw the rectangle.
const oppositeSegmentIndex = (this.data.segmentIndex + 2) % 4;
oppositePoint = rectangle.segments[oppositeSegmentIndex].point;
// Store the offset.
offset = event.point - rectangle.segments[this.data.segmentIndex].point;
// Activate dragging state.
dragging = true;
}
}));
// On mouse move...
function onMouseMove(event) {
// ...don't do nothing if we are not dragging an handle.
if (!dragging) {
return;
}
// Get the new corner position by applying the offset to the event point.
const activePoint = event.point + offset;
// Recreate the rectangle with the new corner.
rectangle.remove();
rectangle = createRectangle(oppositePoint, activePoint);
// For each corner...
rectangle.segments.forEach((segment, index) => {
// ...place an handle...
handles[index].position = segment.point;
// ...store the potentially new segment <=> corner bound.
handles[index].data.segmentIndex = index;
});
}
// On mouse up...
function onMouseUp() {
// Disable dragging state
dragging = false;
}
//
// HELPERS
//
// This method is used to avoid duplicating the rectangle instantiation code.
function createRectangle(from, to) {
return new Path.Rectangle({
from,
to,
strokeColor: 'orange'
});
}
I'm trying to use the applyForce method of SceneKit on a SCNNode. The application is detecting when a specific node is touched via the touch screen, and it is supposed to apply a force on the node; however, the SCNNode does not move. I've properly set the physics to dynamic on the SCNNode, and it responds to gravity.
override func viewDidLoad() {
...
// retrieve the floor node
let floorNode = SCNScene(named: "art.scnassets/floor.dae")
floorNode?.rootNode.position = SCNVector3(x: 0, y: 0, z:-10)
floorNode?.rootNode.physicsBody = SCNPhysicsBody(type: .static, shape: nil)
scene.rootNode.addChildNode(floorNode!.rootNode)
let treeNode = SCNScene(named: "art.scnassets/tree.dae")
treeNode?.rootNode.position = SCNVector3(x: 0, y: 10, z:-10)
treeNode?.rootNode.physicsBody = SCNPhysicsBody(type: .dynamic, shape: nil)
scene.rootNode.addChildNode(treeNode!.rootNode)
...
}
func handleTap(_ gestureRecognize: UIGestureRecognizer) {
...
// check what nodes are tapped
let p = gestureRecognize.location(in: scnView)
let hitResults = scnView.hitTest(p, options: [:])
// check that we clicked on at least one object
if hitResults.count > 0 {
print("A hit!")
// retrieved the first clicked object
let result: AnyObject = hitResults[0]
result.node.physicsBody?.applyForce(SCNVector3(x:10000,y:1,z:1), asImpulse: true)
result.node.physicsBody?.applyTorque(SCNVector4(x:0,y:1,z:0, w:100.0), asImpulse: true)
}
}
I was trying to apply the force onto a child node (which the hit test returns), when I should have applied the force to the child node's parent.
I am importing SCNScenes via .DAE (Collada) files, and the rootNode of the SCNScene is not the model itself, but the parent of the model.
I'm having some trouble while creating a camera Tween in THREE.js, specifically at the end and beginning of the animation, there always seems to be a camera 'jump', meaning that the camera flickers once the animation starts and once the animation ends. For reference, what I'm doing is :
Camera is overlooking a scenario from above.
When user clicks on an element of the scenario, the camera zooms on it (by a TWEEN) and when it's close enough, the OrbitControls target change to the centroid of the selected element, and autorotate starts, so the user sees the element rotating in the center of the screen.
When user clicks again, the camera zooms out to its initial position (by a TWEEN) and goes back to the original controls.
I'm experiencing 'jumps/flickers' at the beginning and end of each TWEEN.
This is my tween function :
var origpos = new THREE.Vector3().copy(camera.position); // original position
var origrot = new THREE.Euler().copy(camera.rotation); // original rotation
camera.position.set(x, y+500, z+variation);
camera.lookAt(new THREE.Vector3(x,y,z));
var dstrot = new THREE.Euler().copy(camera.rotation)
// reset original position and rotation
camera.position.set(origpos.x, origpos.y, origpos.z);
camera.rotation.set(origrot.x, origrot.y, origrot.z);
options = {duration: 3000};
//
// Tweening
//
// position
new TWEEN.Tween(camera.position).to({
x: x,
y: y+500,
z: z
}, options.duration).easing(TWEEN.Easing.Cubic.Out).onUpdate(function () {
camera.lookAt(new THREE.Vector3(x,y,z));
}).onComplete(function () {
controls.autoRotate = true;
controls.autoRotateSpeed = 5.0;
controls.target = new THREE.Vector3(x, y, z);
}).start();
// rotation (using slerp)
(function () {
var qa = camera.quaternion; // src quaternion
var qb = new THREE.Quaternion().setFromEuler(dstrot); // dst quaternion
var qm = new THREE.Quaternion();
var o = {t: 0};
new TWEEN.Tween(o).to({t: 1}, options.duration).onUpdate(function () {
THREE.Quaternion.slerp(qa, qb, qm, o.t);
camera.quaternion.set(qm.x, qm.y, qm.z, qm.w);
}).start();
}).call(this);
OK, it seems that the issue was in itself with the method I was using to rotate the camera, using quaternions and SLERP.
I found that the best way (easier and without flicker/jump) would be to interpolate the parameters of camera.rotation instead of interpolating the quaternions.
So, a Tween of camera.rotation.the_axis_where_you_want_to_rotate works perfectly, and done concurrently with a Tween on the position, achieves the effect I was looking for.
I'm trying to make an Apple Watch app (extension) which shows a map in a way similar to Apple's Maps app. I want to be able to show a portion of the map, and then be able to use the digital crown to zoom and gestures to scroll.
I think this should be possible with Watch OS2, but I haven't figured out which APIs to use.
Is this possible on the platform at present?
Update: I don't think I can use WKInterfaceMap since I want to generate my own map, not use an existing one.
Inside Watch OS2 API only WKInterfacePicker has access of Digit Crown
So We can't use Digit Crown For WKInterfaceMap Directly but we can use it by using WKInterfacePicker
Put WKInterfaceMap and WKInterfacePicker inside Group
Set WKInterfacePicker size width fixed = 2 height fixed = 2
(We can not set size to zero)
NOTE : Don't hide WKInterfacePicker, Sometime, It resign focus because of hidden .
Add below code for Picker Controller
code
class InterfaceController: WKInterfaceController {
#IBOutlet var mapView : WKInterfaceMap!
#IBOutlet var tempPicker:WKInterfacePicker!
var zoomArray:[Double] = [1.0,0.98,0.96,0.94,0.92,0.90,0.88,0.86,0.84,0.82,0.80,0.78,0.76,0.74,0.72,0.70,0.68,0.66,0.64,0.62,0.60,0.58,0.56,0.54,0.52,0.50,0.48,0.46,0.44,0.42,0.40,0.38,0.36,0.34,0.32,0.30,0.28,0.26,0.24,0.22,0.20,0.18,0.16,0.14,0.12,0.10,0.09,0.08,0.07,0.06,0.05,0.04,0.03,0.02,0.01,0.009,0.008,0.007,0.006,0.005,0.004,0.003,0.002,0.001]
override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)
let pickerItems: [WKPickerItem] = zoomArray.map {
let pickerItem = WKPickerItem()
pickerItem.caption = String($0)
pickerItem.title = String($0)
return pickerItem
}
self.tempPicker.setItems(pickerItems)
self.tempPicker.setSelectedItemIndex(25)
let span = MKCoordinateSpanMake(zoomArray[25], zoomArray[25])
let lc = watchDelegate.locationModel.myLocation ?? CLLocationCoordinate2D.init(latitude: 0.0, longitude: 0.0)//watchDelegate.locationModel.myLocation is current user Location
let region = MKCoordinateRegionMake(lc, span)
self.mapView.setRegion(region)
}
#IBAction func pickerChanged(value: Int) {
let lc = watchDelegate.locationModel.myLocation ?? CLLocationCoordinate2D.init(latitude: 0.0, longitude: 0.0)
let span = MKCoordinateSpanMake(zoomArray[value], zoomArray[value])
let region = MKCoordinateRegionMake(lc,
span)
self.mapView.setRegion(region)
self.tempPicker.focus()
}
}
Connect #IBAction and IBOutlet to WKInterfacePicker and WKInterfaceMap
i have just started to study three.js and i am having some trouble to write a function that takes as arguments an object position (Vector3) and a time in milliseconds, and gradually rotate the camera to face it in that time. Substantially a lerp version of the builtin lookAt method.
First i've tried using tweenjs to get smooth rotate transition. For the start and end parameters i've created a dummy object and set its position, rotation and quaternion the same as the camera, then i have use the lookAt function on it to face towards the object and i've stored its quaternion in a new variable "targetQuaternion". Then i have used this variable as the target parameter in the TWEEN.Tween method to update camera.quaternion. I've tried before with quaternions to avoid gymbal lock and then with rotation, but none works fine.
function rotateCameraToObject(object3D, time) {
var cameraPosition = camera.position.clone(); // camera original position
var cameraRotation = camera.rotation.clone(); // camera original rotation
var cameraQuaternion = camera.quaternion.clone(); // camera original quaternion
var dummyObject = new THREE.Object3D(); // dummy object
// set dummyObject's position, rotation and quaternion the same as the camera
dummyObject.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
dummyObject.rotation.set(cameraRotation.x, cameraRotation.y, cameraRotation.z);
dummyObject.quaternion.set(cameraQuaternion.x, cameraQuaternion.y, cameraQuaternion.z);
// lookAt object3D
dummyObject.lookAt(object3D);
// store its quaternion in a variable
var targetQuaternion = dummyObject.quaternion.clone();
// tween start object
var tweenStart = {
x: cameraQuaternion.x,
y: cameraQuaternion.y,
z: cameraQuaternion.z,
w: cameraQuaternion.w
};
//tween target object
var tweenTarget = {
x: targetQuaternion.x,
y: targetQuaternion.y,
z: targetQuaternion.z,
w: targetQuaternion.w
};
// tween stuff
var tween = new TWEEN.Tween(tweenStart).to(tweenTarget, time);
tween.onUpdate(function() {
camera.quaternion.x = tweenStart.x;
camera.quaternion.y = tweenStart.y;
camera.quaternion.z = tweenStart.z;
camera.quaternion.w = tweenStart.w;
});
tween.start();
}
So this does not work.
I've also tried another approach, computing the angle between camera vector and object vector and use that angle as target rotation:
function rotateCameraToObject(object3D, time) {
// camera original position
var cameraPosition = camera.position.clone();
// object3D position
var objectPosition = object3D.position.clone();
// direction vector from camera towards object3D
var direction = objectPosition.sub(cameraPosition);
// compute Euler angle
var angle = new THREE.Euler();
angle.setFromVector3(direction);
/*
* tween stuff
*/
var start = {
x: camera.rotation.clone().x,
y: camera.rotation.clone().y,
z: camera.rotation.clone().z,
}
var end = {
x: angle._x,
y: angle._y,
z: angle._z,
}
var tween = new TWEEN.Tween(start).to(end, time);
tween.onUpdate(function() {
camera.rotation.y = start.x;
camera.rotation.y = start.y;
camera.rotation.y = start.z;
});
tween.start();
}
This doesn't work neither, eventually camera rotate towards the object but the rotation is not right.
Any help? What is the correct way to have a lerp rotate function for the camera?
Thanks in advance!
Have you updated the tween in your animation loop?
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
render();
}
However it's probably better to use the quaternion and not the rotation to turn objects - prevents gimbal lock. THREE.js provides a handy function to use spherical linear interpolation (slerp) as opposed to using tween (lerp) which can give you undesired results, most notably at a 180 deg turn. Put this in your animation loop.
camera.quaternion.slerp(targetQuaternion,t); //t = normalized value 0 to 1
You could then tween t to give you your desired easing.