How can I add zoom to my camera script？

Help & Support
1

请问一下如何在LookCamera.js里添加缩放的功能

2

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.

Example:

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;

    this.app.on('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 this.app.fire('ZOOM'); anywhere in your app to trigger the function.

3

我是程序新人 我没有明白该如何添加 麻烦您能帮我做一个案例演示吗？谢谢

4

https://playcanv.as/p/zW16lG1h/ 我想在这个工程里添加一个缩放的功能

5

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

1 Like
6

https://playcanv.as/p/zW16lG1h/I want to add a zoom function to this project. How to add

7

相机使用的是Lookcamera.js

8

The camera uses Lookcamera.js

9

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.

10

How can this be achieved?

11

The easiest way would be to listen for the scroll wheel event and use https://developer.playcanvas.com/en/api/pc.Entity.html#translateLocal to move the entity along its local axes (in this case Z)

12

Add this code directly to Lookcamera.js?

13

image
image832×255 6.26 KB

14

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

15

This is my camera controlimage

16

I am also trying to achieve this (using one of your projects in fact (PlayCanvas 3D HTML5 Game Engine)). I tried to use the orbitCamera script as it has more settings but that breaks the teleport system completely, so I am hoping to add the functionality I need (zoom, inertia etc) to the Lookcamera script instead. I’m doing a lot of trial and error… mostly error :sweat_smile: