Find a calculation to set the camera to default zoom or scale model to match the screen size #1321

mic-tientpn · 2021-05-07T07:10:02Z

mic-tientpn
May 7, 2021

I have a component to load model from file for preview, however The size of model can flex, so I want to find a calculation to set the camera default zoom or scale the model to match the screen size component each load.

I searched on google but I could not find a method that can solve it, any suggest can solve this problem?

thanks
#model

import React from 'react'
import { useLoader } from "@react-three/fiber"
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'

const Model = ({ url }) => {
  const TypeLoad = url?.slice(-3).toLowerCase() === "stl" ? STLLoader : OBJLoader
  const gltf = useLoader(TypeLoad, url)

  if(url?.slice(-3).toLowerCase() === "stl")
  {
    return (
      <mesh visible geometry={gltf} receiveShadow>
        <meshStandardMaterial  attach="material" color='black'/>
      </mesh>
    )
  }

  return <primitive object={gltf} />
};

export default Model

#index

import React , { Suspense, useRef,useState, useEffect } from 'react'
import * as THREE from "three"
import { Canvas, useFrame, render, events, unmountComponentAtNode} from "@react-three/fiber"
import  { OrbitControls, useProgress, Html , Center} from '@react-three/drei'
import Model from './model'
import { useControls, Leva } from 'leva'

function Loader() {
  const { progress } = useProgress()
  return <Html center>{progress} % loaded</Html>
}

function Zoom() {
  const { zoom } = useControls({ zoom: { value: 0.5, min: 0.2, max: 1, step: 0.01 } })

  return useFrame((state) => {
    state.camera.zoom = THREE.MathUtils.lerp(state.camera.zoom, zoom * 4, 0.1)
    state.camera.updateProjectionMatrix()
  })
}

const ModalPreview = (props) => {
  useEffect(() => {
    const parent = document.getElementById("custom_canvas_preview")
    render(<mesh />, document.querySelector('canvas'), {
      events,
      size: { width: parent.offsetWidth, height: parent.offsetWidth },
    })

    window.addEventListener('resize', () => {
      const parent = document.getElementById("custom_canvas_preview")
      parent.style.height = parent.offsetWidth
      render(<mesh />, document.querySelector('canvas'), {
        events,
        size: { width: parent.offsetWidth, height: parent.offsetWidth },
      })
    })

    window.dispatchEvent(new Event('resize'))

    return () => {
      unmountComponentAtNode(document.querySelector('canvas'))
    }
  }, [])

  return (
    <>
    <Leva flat titleBar={{drag: false}}/>
    <Canvas id="model_preview">
      <color attach="background" args={["white"]} />
      <OrbitControls/>
      <ambientLight />
      <Suspense fallback={<Loader/>}>
      <group dispose={null}>
        <Center>
          <Model url={props.url}/>
        </Center>
      </group>
      </Suspense>
      <Zoom/>
    </Canvas>
    </>
  )
}

export default ModalPreview

drcmda · 2021-05-07T18:51:04Z

drcmda
May 7, 2021
Maintainer

Drei has a center component

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Find a calculation to set the camera to default zoom or scale model to match the screen size #1321

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Find a calculation to set the camera to default zoom or scale model to match the screen size #1321

Uh oh!

Uh oh!

mic-tientpn May 7, 2021

Replies: 1 comment

Uh oh!

drcmda May 7, 2021 Maintainer

mic-tientpn
May 7, 2021

drcmda
May 7, 2021
Maintainer