https://playcanvas.com/editor/scene/2139513
I am trying to get a camera to move smoothly between points in an arc but the camera doesn’t move.
Any ideas for a solution greatly appreciated.
Would lerping work?
HtmlHandler.prototype.handleButtonInteractions = function (event) {
const target = event.target;
if (target.classList.contains('button2222')) {
const camera = this.camera;
const currentPos = camera.getPosition();
let targetPos;
if (target.classList.contains('front')) {
targetPos = new pc.Vec3(25, 10, 20);
} else if (target.classList.contains('left')) {
targetPos = new pc.Vec3(-9, 10, 20);
} else if (target.classList.contains('back')) {
targetPos = new pc.Vec3(-25, -10, -20);
} else if (target.classList.contains('right')) {
targetPos = new pc.Vec3(9, 10, -20);
}
if (targetPos) {
const numPoints = 8;
const arcPoints = [];
const easeInOutCubic = function (t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t;
t -= 2;
return 0.5 * (t * (t * 2 - 2) + 2);
};
for (let i = 0; i <= numPoints; i++) {
const t = i / numPoints;
const easedT = easeInOutCubic(t);
const lerpPos = currentPos.lerp(targetPos, easedT);
arcPoints.push(lerpPos);
}
(function moveCamera(index = 0) {
if (index >= arcPoints.length) return;
camera.setPosition(arcPoints[index]);
camera.lookAt(targetPos); // Look at the target position for a more natural arc
requestAnimationFrame(() => moveCamera(index + 1));
})();
}
}
};
Lerping would I have used it but it doesn’t do anything.
Check out this: PlayCanvas | HTML5 Game Engine
AHH the Tween library…that could be a solution. Cheers. I’ll try it today.
I also have another thing there for lerping, I was testing with tween but l think lerp works better.
Whatever you think is best, you can use!
1 Like
I went for the tween library but it resets to a default camera position and so far I can’t see why?
HtmlHandler.prototype.handleButtonInteractions = function (event) {
const target = event.target;
// const r = new pc.Vec3();
if (target.classList.contains('button2222')) {
const lookAtPos = this.camera.script.orbitCamera.pivotPoint.clone();
if (target.classList.contains('front')) {
//this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(25, 10, 20), lookAtPos);
// create a new tween using our script attributes
var tween = this.camera.tween(this.camera.getLocalPosition()).to({x: 25, y: 10, z: 20}, 1.0, pc.Linear);
// start the tween
tween.start();
} else if (target.classList.contains('left')) {
console.log('Left');
//this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(-9, 10, 20), lookAtPos);
// create a new tween using our script attributes
var tween = tween = this.camera.tween(this.camera.getLocalPosition()).to({x: -9, y: 10, z: 20}, 1.0, pc.Linear);
// start the tween
tween.start();
} else if (target.classList.contains('back')) {
console.log('Back side');
//this.camera.script.orbitCamera.resetAndLookAtPoint(r.lerp(new pc.Vec3(-25, -10, -20),lookAtPos, 1), lookAtPos); // r is equal to a
//this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(-25, -10, -20), lookAtPos);
var tween = this.camera.tween(this.camera.getLocalPosition()).to({x: -25, y: -10, z: -20}, 1.0, pc.Linear);
// start the tween
tween.start();
} else {
console.log('Right side');
//this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(9, 10, -20), lookAtPos);
var tween = this.camera.tween(this.camera.getLocalPosition()).to({x: 9, y: 10, z: -20}, 1.0, pc.Linear);
// start the tween
tween.start();
}
}
};
So I fixed it, but there is still a little jump mismatch. And my fix seems like a botch but it works…sort of.
HtmlHandler.prototype.handleButtonInteractions = function (event) {
const target = event.target;
if (!target.classList.contains('button2222')) {
return; // Exit function if not a button2222 class
}
const lookAtPos = this.camera.script.orbitCamera.pivotPoint.clone();
const buttonClass = target.classList.item(1); // Get the second class name (e.g., front, top)
switch (buttonClass) {
case 'front':
console.log('Front');
const frontTween = this.camera.tween(this.camera.getLocalPosition()).to({ x: 25, y: 10, z: 20 }, 1.5, pc.BackOut);
frontTween.loop(false).yoyo(false).start(); // Set loop and yoyo to false
this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(25, 10, 20), lookAtPos);
break;
case 'top':
console.log('Top side');
const topTween = this.camera.tween(this.camera.getLocalPosition()).to({ x: 0, y: 40, z: 40 }, 1.5, pc.BackOut);
topTween.loop(false).yoyo(false).start();
this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(0, 40, 40), lookAtPos);
break;
case 'left':
console.log('Left');
const leftTween = this.camera.tween(this.camera.getLocalPosition()).to({ x: -9, y: 10, z: 20 }, 1.5, pc.BackOut);
leftTween.loop(false).yoyo(false).start();
this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(-9, 10, 20), lookAtPos);
break;
case 'back':
console.log('Back side');
const backTween = this.camera.tween(this.camera.getLocalPosition()).to({ x: -25, y: 10, z: -20 }, 1.5, pc.BackOut);
backTween.loop(false).yoyo(false).start();
this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(-25, 10, -20), lookAtPos);
break;
case 'right':
console.log('Right side');
const rightTween = this.camera.tween(this.camera.getLocalPosition()).to({ x: 9, y: 10, z: -20 }, 1.5, pc.BackOut);
rightTween.loop(false).yoyo(false).start();
this.camera.script.orbitCamera.resetAndLookAtPoint(new pc.Vec3(9, 10, -20), lookAtPos);
break;
// default:
//console.warn('Unrecognized button class:', buttonClass);
}
};
If I get time later, I’ll look at it. I’m guessing it’s probably just sort of delay.
1 Like