Need guidance on Setting camera

🌵 Needle Engine
1

Hi,

When viewing through the browser, I set a specific camera view (after zooming, panning, etc.) that I want to replicate when the webpage initially loads. How can I achieve this through code, considering that manually setting the camera in the Unity Editor is not an option?

For example, after zooming and panning, I get a desired view (refer to the attached image). Now, I want to restore this exact view when the webpage loads. Since I’m using an OrbitControl camera, I can’t simply set its rotation directly.

What would be the best way to store and apply the camera’s position and rotation for this scenario?

image
image1553×896 49.5 KB

2

Hi Ashok,

To restore a specific camera view using OrbitControls in Needle Engine, you can store the camera’s position and rotation when the user sets the desired view and apply them when the scene loads. Here’s a step-by-step outline:

  1. Capture Camera Position and Rotation: When the user sets the camera view, capture the camera’s position and rotation.

  2. Store the Values: Store these values in a location, such as local storage or a settings file.

  3. Apply the Values on Load: On the initial load of your webpage, read these stored values and apply them to the camera.

Here’s an example code snippet to achieve this:

import { OrbitControls } from "@needle-tools/engine";
import { PerspectiveCamera } from "three";

// Assuming you have your camera and OrbitControls initialized
const camera = new PerspectiveCamera(/* params */);
const controls = new OrbitControls(camera);

// Function to save camera view
function saveCameraView() {
    const cameraSettings = {
        position: camera.position.toArray(),
        rotation: camera.rotation.toArray(),
    };
    localStorage.setItem('cameraView', JSON.stringify(cameraSettings));
}

// Function to load saved camera view
function loadCameraView() {
    const savedView = localStorage.getItem('cameraView');
    if (savedView) {
        const cameraSettings = JSON.parse(savedView);
        camera.position.fromArray(cameraSettings.position);
        camera.rotation.fromArray(cameraSettings.rotation);
    }
}

// Usage
loadCameraView();

// Add event listener or method to save camera settings based on user input
controls.addEventListener('change', saveCameraView);

Important Notes

  • OrbitControls will adjust the camera, so ensure you call controls.update() to reflect any changes after loading the camera settings.
  • Make sure to handle any exceptions or cases where the data may be invalid or not set.

If you’d like to delve deeper into any particular functionality or need further assistance, feel free to ask!

1 replies left - Get a PRO license for more AI replies.
thread_2tFQ8ottPOXTDYq36f9Cy3G1
Reply to this message to continue the conversation

3

This is what I have attempted so far, but it hasn’t worked. The following pos and rot values are obtained from worlposition and worldRotation props of camera after setting the desired view. target is the gameobject present in the image.

setBaseCameraPositionWithVector(pos: Vector3, rot: Vector3) {
    if (!this.baseCamera || !this.target) return;
    const baseCamOrbitControl = GameObject.getComponent(this.baseCamera.gameObject, OrbitControls);
    if (baseCamOrbitControl) {
      baseCamOrbitControl?.setLookTargetPosition(this.target,1);
      baseCamOrbitControl.setCameraTargetPosition(pos,1);
      
    }
  }
4

Hello, why is setting the Unity camera not an option?

5

Hi,

I’m using sceneSwitcher and have a main scene with an OrbitControls camera, while the child scenes don’t have any cameras. The main scene always loads with a child scene, and each child scene needs a different camera view.

To handle this, I pass the camera position as a Vec3 from the loaded child scene to set the main camera. Setting the camera directly in the editor doesn’t work for me since each child scene requires a different view.

Thanks!

6

I’d be happy to know if there’s a better or more efficient way to handle this.

8

Instead of having the camera only in the main scene, I now have cameras in the child scenes as well, and setting them in the editor works fine. However, how can I restrict the camera movement on the Y-axis?

9

Regarding your original question here’s what I’d have done:

  1. Add a camera component to your child scenes to setup the camera view in Unity for each sub-scene.
  2. In Needle Engine when the scene is loaded get the camera from the child scene and pass the camera gameObject to the OrbitControls setCameraAndLookTarget method.

For restricting on Y axis: you can add a little bit of code in lateUpdate to reset the camera’s position.x and .z values to whatever you want.

10

Thanks , This helped a lot.
Regarding this

Can you explain a little bit more, as I know i cant restrict rotation values of camera since orbit Controls control it.

11

Are you asking about the camera position or the camera rotation? Or both (e.g. you want your camera to move up<>down while keeping the same look direction) ?

12

I’d say both. When users zoom, pan, or move the camera, I want to prevent them from seeing a certain part of the object. For reference, the first image shows the regular view, while the second image shows the view I want to restrict (users shouldn’t be able to see the bottom).

image
image1204×831 70.8 KB

image
image1306×903 72 KB

13

Well you can modify the camera position in e.g. lateUpdate() from a custom script to ensure the y position never goes above or below a certain range. Apart from that you can disable panning OR ensure the camera target is always within a certain area (by modifying the orbitControls.target vector)

14

Thanks a lot