Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. Knowledge Base
  3. 3D Blocks
  4. Using an Orbit Camera for 3D Scene Navigation

Using an Orbit Camera for 3D Scene Navigation

Scheduled Pinned Locked Moved 3D Blocks
1 Posts 1 Posters 2.1k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • CreatiCodeI Offline
    CreatiCodeI Offline
    CreatiCode
    wrote on last edited by admin
    #1

     

    Prerequisite

    • Initializing a 3D Scene

     

    Descripton

    A 3D scene is an infinitely large virtual world. To view what’s happening inside this world, we need to use a virtual camera. This process is very similar to watching a soccer game on TV: since the stadium is very large, a video camera captures images of the stadium from a particular position, and those images are displayed on our TV.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/8620151/pasted-from-clipboard.png" width="600" style="border-radius: 5px; border: 1px solid #29622d;">

     

    By default, every scene contains a camera. You can add a new camera at any time to replace the default one. The most commonly used camera type is “orbit camera”, which behaves like a satellite that orbits the Earth. It can rotate horizontally or vertically around the target, or move closer to/away from the target.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/8924331/r1.gif" width="600" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    Block for Adding a New Orbit Camera

    6387eeef-765a-44a3-8467-daa22d28c59b-image.png
     

     
    This block accepts the following parameters:

    • Distance: the initial distance between the camera and the target point (the center of the world by default). Setting a larger distance will allow the camera to show more objects but with less detail. After the camera is created, you can zoom in/out the camera to change the distance, or shift the target point to a different position.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219012/pasted-from-clipboard.png" width="600" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

     

    • V-angle: the initial vertical view angle of the camera, between 0 degrees and 180 degrees. A value of 0 will place the camera directly above the target. Here are some commonly used vertical view angles:

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219275/cam3.gif" width="425" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">
     

    • H-angle: the initial horizontal view angle of the camera, between 0 degrees and 360 degrees. For example, when the h-angle is 0 degrees, the camera will be looking in the forward direction along the Y-axis (into the computer screen).

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/3bb328b8-cc04-43e1-8501-ed0f8dd836a5.gif" width="600" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

    • Moving Speed ratio: how fast can you manually shift the target point of the camera. 100 means 100% of the default speed. See below for how to shift the target.

     

    • Input with Key or Pointer: whether you can control the camera using the keyboard or the pointer. By default, both options are “Yes”. For example, if you select “No” for the keyboard, then you can no longer move or turn the camera using the keyboard.

     

    • Active: This is an advanced option that controls whether this camera will become the “active camera”. If you choose “Yes”, this new camera will replace the existing active camera, and its view will be displayed on the stage; if you choose “No”, then this camera will be added as an additional camera. Its output will not be displayed until we set a new display region for it. This will be useful when we want to display the content of 2 or more cameras on the stage.

     

    • Name: This is the name of the new camera. It will be useful when we need to select or refer to this camera later.

     
     

    Demo

    You can play with this demo project to understand the key camera parameters better. Use the 3 sliders to change the distance/v-angle/h-angle of the camera. You can also drag the camera directly, which shows that the target and the camera would move together when you update the target point.

    https://play.creaticode.com/projects/6537af4f929db9de91830abf

     

    Example

    Program: In this program, we load the castle scene, and after waiting 2 seconds, switch to a new orbit camera that is much further away from the world center.

    3bd12a23-786b-4b42-a13a-ef42ffe12da1-image.png

    Output:

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219296/ca1.gif" width="400" style="border-radius: 5px; border: 1px solid #29622d;">

     

    Rotating the Orbit Camera

    You can manually rotate the orbit camera around its target using the mouse pointer or the keyboard. Note that the objects in the scene are not being moved or rotated by you. You are simply changing the camera’s view angle.

    • Pointer: You can drag the pointer in the 3D scene window to rotate the camera.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219501/pasted-from-clipboard.png" width="300" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219476/ro1.gif" width="450" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">
     

    • Keyboard: You can also press the 4 arrow keys (⬆ ⬇ ⬅ ➡) to rotate the camera horizontally or vertically. Note that you will need to click or touch on the scene window first to make sure it is actively capturing your keypress.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219489/ro4.gif" width="450" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

     
     

    Zooming In and Out

    You can zoom in by pushing the camera closer to the target, or zoom out by drawing the camera back.

    • Pointer: You can use the scroll wheel of your mouse, or pinch 2 fingers narrower or wider to zoom the camera.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219498/pasted-from-clipboard.png" width="300" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219504/z3.gif" width="450" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">
     

    • Keyboard: You can also press the W and S keys to zoom the camera. Again, please note that you will need to click or touch on the scene window first to make sure it is actively capturing your keypress.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9219542/z6.gif" width="450" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

     
     

    Panning: Shifting the Target

    Lastly, you can pan your camera, which means shifting the target horizontally or vertically. Again, this will not move the objects in the scene, but change the target point and the camera position in parallel.

    • Pointer: You can press down the right button of your mouse, or press down 2 fingers on a touch pad and drag them.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9220569/pasted-from-clipboard.png" width="300" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9220570/s12.gif" width="450" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">
     

    • Keyboard: You can also use the keyboard. The A and D keys will shift the camera left or right, and the Q and E keys will shift the camera up or down.

    https://cdncreaticodecom.b-cdn.net/awsuploads/947564/images/9220571/ss3.gif" width="450" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

     

    Learn More

    • Loading an Avatar Into a Scene
    • The 3D Axis
    • Setting Camera Target
    • Setting Camera Properties
    1 Reply Last reply
    0
    • A TCode Admin pinned this topic on

    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

    With your input, this post could be even better 💗

    Register Login
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode