ambiera logo

Ambiera Forum

Discussions, Help and Support.

folder icon Ambiera Forum > CopperCube > Help with CopperCube
forum topic indicator Tips regarding writing camera zoom logic
person icon
Puskanie golubey
Guest
Quote
2025-07-10 13:46:15

Hello there. I were attempting to write a new "zoom" behavior for camera node on my scene. Not really experienced with JavaScript (familiar with basics only) so I couldn't figure out how to extend "Zoom camera by mouse wheel" extension by adding LMB dragging support, nor how to write the whole "zoom" logic myself. Can anyone point out some guides or articles regarding the development of camera zoom?

person icon
Puskanie golubey
Guest
Quote
2025-07-10 13:47:47

I wish I could make my camera zoomable using mouse wheel, and be able to drag its position using LMB yet keeping its original coordinates when resetting

person icon
hadoken
Registered User
Quote
2025-07-10 16:24:31

@Puskanie golubey,

can you describe in more detail or by an existing example for what type of game (scene) you want to use the cam mechanics you wish for, please

in CopperCube a camera has two components to consider: cam node position and cam target position, tell us if you would need mouse dragging for a fixed target moving relatively to mouse controlled cam node position or a fixed cam pos with mouse controlled dynamic target

from what I read those things should be doable, but getting an object closer into focus can be done two ways: by a moving cam getting closer to an object or by a static cam zooming in

if you would favour some kind of overhead camera above a scene (like lots of strategic games use) you could control what to get into focus by mouse dragging for CopperCube x and z axis and mouse wheel for y axis or camera zoom

person icon
wing
Guest
Quote
2025-07-10 16:33:44

I’m not really sure what you mean in the context of drag the camera - you’ll need to explain in a bit more detail what you’re talking about.

As for zooming, though, here’s a simple snippet for zooming the camera using the mouse wheel:

/*
<behavior jsname="behavior_camerazoom" description="Camera Zoom">
<property name="ZoomSpeed" type="float" default="0.1" />
<property name="MaxZoomAngle" type="float" default="72" />
<property name="MinZoomAngle" type="float" default="10" />
</behavior>
*/
behavior_camerazoom = function() {
this.previousTimeMs = null; // Time of the previous frame, used for deltaTime calculation
this.elapsedTimeMs = 0; // Time difference between current and previous frame (deltaTime)
this.mouseWheelValue = 0; // Mouse wheel delta value, set in onMouseEvent
this.currentZoomAngle = 0; // Current Field of View (FOV) angle of the camera
};
behavior_camerazoom.prototype.onAnimate = function(node, currentTimeMs) {
this.previousTimeMs = currentTimeMs;
if (ccbGetSceneNodeProperty(node, "Type") == "camera") {
this.currentZoomAngle = ccbGetSceneNodeProperty(node, "FieldOfView_Degrees");
this.onAnimate = function(node, currentTimeMs) {
this.elapsedTimeMs = currentTimeMs - this.previousTimeMs;
this.previousTimeMs = currentTimeMs;
if (this.elapsedTimeMs > 200)
this.elapsedTimeMs = 200;
this.currentZoomAngle -= this.mouseWheelValue * this.ZoomSpeed * this.elapsedTimeMs;
this.currentZoomAngle = Math.min(Math.max(this.currentZoomAngle, this.MinZoomAngle), this.MaxZoomAngle);
ccbSetSceneNodeProperty(node, "FieldOfView_Degrees", this.currentZoomAngle);
if (this.mouseWheelValue)
print("Camera Zoom | FOV: " + this.currentZoomAngle.toFixed(2));
this.mouseWheelValue = 0;
}
print("Camera Zoom behavior initialized.");
} else {
print("Camera Zoom error: attached node is not a camera.");
}
};
behavior_camerazoom.prototype.onMouseEvent = function(mouseEventType, mouseWheelDelta) {
this.mouseWheelValue = mouseWheelDelta;
};


person icon
Puskanie golubey
Guest
Quote
2025-07-10 16:42:11

What I mean by "dragging" is when zoom is applied, user should be able to move the camera by X and Y using LMB, up to the limits set before. Let's say we are dealing with a gallery of images, and we have to add feature to let user look deeper into the image. Hope that clarifies.

person icon
wing
Guest
Quote
2025-07-11 06:54:39

This still doesn’t make it clear where the camera is supposed to move or how it ties into the zoom. You could have it jump to the 3D projection of the 2D mouse coordinates on click, but honestly, I’m still not sure what you’re actually trying to pull off.


Create reply:










 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


icon_holyicon_cryicon_devilicon_lookicon_grinicon_kissicon_monkeyicon_hmpf
icon_sadicon_happyicon_smileicon_uhicon_blink   






Copyright© Ambiera e.U. all rights reserved.
Contact | Imprint | Products | Privacy Policy | Terms and Conditions |