How to implement zoom bar with react-three/fiber and react-three/drei? #1308

mic-tientpn · 2021-05-04T08:37:11Z

mic-tientpn
May 4, 2021

I have a model that can load STL or OBJ file, I want to create a zoom bar or 2 button that control zoom model like google map,
Any have idea to implement it?
thanks.

#model.js

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 />
      </mesh>
    )
  }

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

export default Model

#index.js

import React , { Suspense } from 'react'
import * as THREE from "three"
import { Canvas } from "@react-three/fiber"
import  { OrbitControls, useProgress, Html , Center} from '@react-three/drei'
import Model from './model'

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

const ModalPreview = (props) => {
  return (
    <Canvas>
      <OrbitControls/>
      <Suspense fallback={<Loader/>}>
        <Center>
          <Model url={props.url}/>
        </Center>
      </Suspense>
    </Canvas>
  )
}

export default ModalPreview

Answered by drcmda

May 4, 2021

Here's an example: https://codesandbox.io/s/zooming-svg-maps-ointi

View full answer

drcmda · 2021-05-04T09:46:34Z

drcmda
May 4, 2021
Maintainer

Here's an example: https://codesandbox.io/s/zooming-svg-maps-ointi

1 reply

mic-tientpn May 4, 2021
Author

@drcmda thank you so much

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to implement zoom bar with react-three/fiber and react-three/drei? #1308

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to implement zoom bar with react-three/fiber and react-three/drei? #1308

Uh oh!

Uh oh!

mic-tientpn May 4, 2021

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

drcmda May 4, 2021 Maintainer

Uh oh!

mic-tientpn May 4, 2021 Author

mic-tientpn
May 4, 2021

Replies: 1 comment 1 reply

drcmda
May 4, 2021
Maintainer

mic-tientpn May 4, 2021
Author