How to resize the canvas using three-d in Rust?

Raj · July 14, 2023, 6:01am

use three_d::*;

pub fn main() {
    // Create window
    let window: Window<()> = Window::new(WindowSettings {
        title: "Shapes!".to_string(),
        ..Default::default()
    })
    .unwrap();
    let context: Context = window.gl();

    // Camera setup
    let mut camera: Camera = Camera::new_perspective(
        Viewport {
            x: 0,
            y: 0,
            width: 480,
            height: 480,
        },
        vec3(5.0, 5.0, 5.0),
        vec3(0.0, 0.0, 0.0),
        vec3(0.0, 1.0, 0.0),
        degrees(45.0),
        0.1,
        100.0,
    );

    // Control setup
    let mut control = OrbitControl::new(*camera.target(), 1.0, 100.0);

    let mut sphere = Gm::new(
        Mesh::new(&context, &CpuMesh::sphere(16)),
        PhysicalMaterial::new_transparent(
            &context,
            &CpuMaterial {
                albedo: Color {
                    r: 255,
                    g: 0,
                    b: 0,
                    a: 200,
                },
                ..Default::default()
            },
        ),
    );
    sphere.set_transformation(Mat4::from_translation(vec3(0.0, 1.0, 0.0)) * Mat4::from_scale(0.2));

    let light0 = DirectionalLight::new(&context, 1.0, Color::WHITE, &vec3(0.0, -0.5, -0.5));
    let light1 = DirectionalLight::new(&context, 1.0, Color::WHITE, &vec3(0.0, 0.5, 0.5));

    window.render_loop(move |mut frame_input| {
        camera.set_viewport(frame_input.viewport);
        control.handle_events(&mut camera, &mut frame_input.events);

        frame_input
            .screen()
            .clear(ClearState::color_and_depth(0.8, 0.8, 0.8, 1.0, 1.0))
            .render(
                &camera,
                sphere
                    .into_iter(),
                &[&light0, &light1],
            );

        FrameOutput::default()
    });
}

Given the code how to resize the canvas width and height. I tried changing the viewpoint etc. Please give me some insight on how to change the size of the canvas / window in Rust three-d library. The width and height of the canvas is always fixed like width = "1015" and height = "750" . How to change that?

Thank you.

hax10 · July 14, 2023, 9:24am

You can have a look at the window settings.

github.com

asny/three-d/blob/177e9bb4b994a250437bae7a5aaa676b2453ae4a/examples/environment/src/main.rs#L13


      
          #[tokio::main]
          async fn main() {
              run().await;
          }
          
          use three_d::*;
          
          pub async fn run() {
              let window = Window::new(WindowSettings {
                  title: "Environment!".to_string(),
                  max_size: Some((1280, 720)),
                  ..Default::default()
              })
              .unwrap();
              let context = window.gl();
          
              let mut camera = Camera::new_perspective(
                  window.viewport(),
                  vec3(-3.0, 1.0, 2.5),
                  vec3(0.0, 0.0, 0.0),
                  vec3(0.0, 1.0, 0.0),

github.com

asny/three-d/blob/177e9bb4b994a250437bae7a5aaa676b2453ae4a/src/window/winit_window/settings.rs#L61


      
                      multisamples: 4,
                      hardware_acceleration: HardwareAcceleration::Preferred,
                  }
              }
          }
          
          ///
          /// Settings for the default [Window](super::Window).
          ///
          #[derive(Debug, Clone, PartialEq, Eq)]
          pub struct WindowSettings {
              /// The title of the window.
              ///
              /// On web this has no effect.
              pub title: String,
              /// The minimum size of the window `(width, height)`, in logical pixels.
              ///
              /// On web this has no effect.
              pub min_size: (u32, u32),
              /// The maximum and initial size of the window `(width, height)`, in logical pixels.
              /// If `None` is specified, the window is maximized.

Raj · July 14, 2023, 9:40am

/// The title of the window.
    ///
    /// On web this has no effect.
    pub title: String,
    /// The minimum size of the window (width, height).
    ///
    /// On web this has no effect.
    pub min_size: (u32, u32),
    /// The maximum size of the window (width, height). If None is specified, the window is maximized.
    ///
    /// On web this has no effect.
    pub max_size: Option<(u32, u32)>,

But this says it has no effect on the web.

You can have a look :

// Create window
    let window: Window<()> = Window::new(WindowSettings {
        title: "Shapes!".to_string(),
        max_size: Some((1280, 720)),
        ..Default::default()
    })
    .unwrap();
    let context: Context = window.gl();

    // Camera setup
    let mut camera: Camera = Camera::new_perspective(
        Viewport {
            x: 0,
            y: 0,
            width: 480,
            height: 480,
        },
        vec3(5.0, 5.0, 5.0),
        vec3(0.0, 0.0, 0.0),
        vec3(0.0, 1.0, 0.0),
        degrees(45.0),
        0.1,
        100.0,
    );

hax10 · July 14, 2023, 9:47am

I haven't run the code, but apparently only min_size is ignored on the web. max_size does have an effect, but perhaps it's not obvious. You can try a smaller max_size, like 400, 300.

steffahn · July 16, 2023, 11:37am

By the way, it’s generally appreciated if cross-posts (like this topic) of the same question are indicated (i.e. you add a link here to the stackoverflow question), so that discussions, tips, thoughts, solutions, etc… from one place don’t unnecessarily need to be reproduced by multiple people independently on both sides.