Environment Zoom #2864

sameterkanboz · 2023-05-27T14:00:52Z

sameterkanboz
May 27, 2023

hi, is there a way for me to zoom right into the Environment component? (I am using Environment component as 360 viewer. and to examine the results of the seat in the hdr extension image I uploaded) here ise the example code;

<>
    <Canvas
      style={{
        width: "100%",
        height: windowHeight.current,
      }}
      camera={{ position: [0, 0, 2] }}
    >
      <Environment files="./assets/new_hdr.hdr" background />
      
      <Html transform position={[0, 10, 5]}>
        <text style={{ backgroundColor: "red" }}>MyButton</text>
      </Html>
      <Stats />
      <OrbitControls
        minPolarAngle={-Math.PI / 2}
        maxPolarAngle={Math.PI / 2.1}
        autoRotate
        autoRotateSpeed={-0.75}
        enableZoom={true}
        enablePan={false}
        enableRotate={true}
        // maxDistance={5}
        // minZoom={1}
        //  maxZoom={2}
        // minDistance={0.25} maxDistance={5}
      />
    
      <MyModel position={[0, 0, 0]} />
    </Canvas>
  </>

f3bw · 2023-05-30T12:11:32Z

f3bw
May 30, 2023

Hi there,

To zoom in on the Environment component in your code, you can adjust the camera's position and field of view. Here's an example of how you can modify your code to achieve that:

<>
  <Canvas
    style={{
      width: "100%",
      height: windowHeight.current,
    }}
    camera={{ position: [0, 0, 2], fov: 60 }} // Adjust the camera's position and field of view (fov)
  >
    <Environment files="./assets/new_hdr.hdr" background />

    <Html transform position={[0, 10, 5]}>
      <text style={{ backgroundColor: "red" }}>MyButton</text>
    </Html>
    <Stats />
    <OrbitControls
      minPolarAngle={-Math.PI / 2}
      maxPolarAngle={Math.PI / 2.1}
      autoRotate
      autoRotateSpeed={-0.75}
      enableZoom={true}
      enablePan={false}
      enableRotate={true}
    />

    <MyModel position={[0, 0, 0]} />
  </Canvas>
</>

In the updated code, I added fov: 60 to the camera's configuration, which changes the field of view. You can adjust the value of fov to increase or decrease the zoom level. Higher values will result in a narrower field of view, effectively zooming in, while lower values will have the opposite effect.

Feel free to experiment with different values for fov until you achieve the desired zoom level for the Environment component in your 360 viewer.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Environment Zoom #2864

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Environment Zoom #2864

Uh oh!

sameterkanboz May 27, 2023

Replies: 1 comment

Uh oh!

f3bw May 30, 2023

sameterkanboz
May 27, 2023

f3bw
May 30, 2023