Break from camera orbit to Animate

Help & Support
1

In my project I want to stop the orbit and move the camera to position when the user clicks on a hotspot. When the user closes the panel then the camera moves out again but there is a jagged cut when the camera orbit is re-enabled. Please help. I attached a video to show the issues.

var CameraTween = pc.createScript(‘cameraTween’);

// Inspector attributes
CameraTween.attributes.add(‘targetEntity’, { type: ‘entity’, title: ‘Target Entity’ });
CameraTween.attributes.add(‘animateToTargetButton’, { type: ‘entity’, title: ‘Animate to Target Button’ });
CameraTween.attributes.add(‘animateToPreviousButton’, { type: ‘entity’, title: ‘Animate to Previous Button’ });

CameraTween.prototype.initialize = function() {
// Store the initial position and rotation of the camera
this.camera = this.app.root.findByName(‘Camera’);

this.initialPosition = this.entity.getPosition().clone();
this.initialRotation = this.entity.getRotation().clone();

// Bind the button click events
this.animateToTargetButton.element.on('click', this.animateToTarget, this);
this.animateToPreviousButton.element.on('click', this.animateToPrevious, this);

};

CameraTween.prototype.animateToTarget = function() {
var targetPosition = this.targetEntity.getPosition().clone();
var targetRotation = this.targetEntity.getRotation().clone();

// Iterate through all scripts on the camera entity
var scripts = this.camera.script.scripts;
for (var i = 0; i < scripts.length; i++) {
    var scriptName = scripts[i].__scriptType.__name;

    // Disable the script if it's not 'cameraTween'
    if (scriptName !== 'cameraTween') {
        scripts[i].enabled = false;
    }
}

// Position tween
this.entity.tween(this.entity.getLocalPosition()).to(targetPosition, 1.0, pc.SineOut).start();

// Rotation tween
this.entity.tween(this.entity.getLocalRotation()).to(targetRotation, 1.0, pc.SineOut).start();

};

CameraTween.prototype.animateToPrevious = function() {
// Position tween
var positionTween = this.entity.tween(this.entity.getLocalPosition()).to(this.initialPosition, 1.0, pc.SineOut).start();

// Rotation tween
var rotationTween = this.entity.tween(this.entity.getLocalRotation()).to(this.initialRotation, 1.0, pc.SineOut).start();

// Enable scripts only after both tweens are complete
var self = this;
positionTween.on('complete', function() {
    rotationTween.on('complete', function() {
        var scripts = self.camera.script.scripts;
        for (var i = 0; i < scripts.length; i++) {
            var scriptName = scripts[i].__scriptType.__name;

            // Enable the script if it's not 'cameraTween'
            if (scriptName !== 'cameraTween') {
                scripts[i].enabled = true;
            }
        }
    });
});

};

2

Please see Orbit Camera script - disabling touch/mouse input and [SOLVED] Resetting camera position

1 Like