How can I add zoom to my camera script?


If you are using the orbit camera, then you can control the camera’s position with distance, pitch and yaw.
For a smooth translation you can use pc.math.lerp() in the update function or use a tween library like tween.js.


LookCamera.attributes.add('zoomDistance', {
    type: 'number', 
    default: 10, 
    title: 'Zoom Distance'

LookCamera.attributes.add('zoomPitch', {
    type: 'number', 
    default: -20, 
    title: 'Zoom Pitch'

LookCamera.attributes.add('zoomYaw', {
    type: 'number', 
    default: 0, 
    title: 'Zoom Yaw'

LookCamera.prototype.initialize = function() {
    // This script needs to be attached to a camera entity with attached orbitCamera script.
    this.orbitCamera = this.entity.script.orbitCamera;
    this.zoom = false;'ZOOM', function() {
        this.zoom = true;
    }, this);

LookCamera.prototype.update = function(dt) {
    if(this.zoom === true && this.orbitCamera) {
        this.orbitCamera.distance = pc.math.lerp(this.orbitCamera.distance, this.zoomDistance, 0.05);
        this.orbitCamera.pitch = pc.math.lerp(this.orbitCamera.pitch, this.zoomPitch, 0.05);
        this.orbitCamera.yaw = pc.math.lerp(this.orbitCamera.yaw, this.zoomYaw, 0.05);

Then you just need to use'ZOOM'); anywhere in your app to trigger the function.

我是程序新人 我没有明白该如何添加 麻烦您能帮我做一个案例演示吗?谢谢 我想在这个工程里添加一个缩放的功能

@Aaron sorry, this is an English speaking forum. Can you please write in English?

1 Like want to add a zoom function to this project. How to add


The camera uses Lookcamera.js

Looks like you are are using a first person style camera so to ‘zoom’ would be to move the camera back/forward on the local Z axis of the camera.

How can this be achieved?

The easiest way would be to listen for the scroll wheel event and use to move the entity along its local axes (in this case Z)

Add this code directly to Lookcamera.js?

It depends on how you manage the controls. I don’t have access to the project so can’t really advise more.

This is my camera controlimage