So I tried implementing the example given with a blank typescript app on react native and got it to work!! However, when tried to implement the same code into my project that was made using javascript I changed the App.js file to be a App.tsx file but , it gives me the error shown in the picture.

Using the example on expo 19 I get this warning;

<OrbitControlsView camera={this.camera}>
  <GLView
    style={style}
    onContextCreate={gl => this.onContextCreate(gl)}
  />
</OrbitControlsView>

async componentDidMount() {
    const selected = {
      type: 'obj',
      name: 'BloodCell',
      isometric: false,
      model: require('./models/blood/BloodCell.obj'),
      textures: [
        {
          name: 'axepCube3',
          image: require('./models/blood/BloodCell_BaseColor.png')
        }
      ]
    }

    this.model = await loadModel(selected)
    this.setState({isLoading: false})
  }

onContextCreate = async gl => {
    try {
      const {drawingBufferWidth: width, drawingBufferHeight: height} = gl
      const sceneColor = 'transparent'

      this.renderer = new Renderer({gl})
      this.renderer.setSize(width, height)

      this.camera = new PerspectiveCamera(75, width / height, 0.5, 1000)
      this.camera.position.set(0, 0, 10)

      this.scene = new Scene()

      this.pointLight = new PointLight(0xffffff, 2, 1000, 1)
      this.pointLight.position.set(0, 30, 100)

      const hemisphereLight = new HemisphereLight(0xffffbb, 0x080820, 1)
      this.scene.add(hemisphereLight)

      const ambientLight = new AmbientLight(0x404040) // soft white light
      this.scene.add(ambientLight)

      // center pivot
      const bbox = new Box3().setFromObject(this.model)
      const center = new Vector3()
      bbox.getCenter(center)
      this.model.position.sub(center)

      let models = []
      this.scene.add(this.model)
      models.push(this.model)

      this.setState({camera: this.camera})

      const render = () => {
        this.timeout = requestAnimationFrame(render)
        this.renderer.render(this.scene, this.camera)
        gl.endFrameEXP()
      }

      render()
    } catch (error) {
      console.log('error', error)
    }
  }

Can anyone please help me, i am not able to fix this.

Here's the Weekly Digest for EvanBacon/expo-three-orbit-controls:

ISSUES

Last week, no issues were created.

PULL REQUESTS

Last week, no pull requests were created, updated or merged.

COMMITS

Last week there were no commits.

CONTRIBUTORS

Last week there were no contributors.

STARGAZERS

Last week there were no stargazers.

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository EvanBacon/expo-three-orbit-controls to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

I am using expo-three with three.js.
After updating three.js to 0.128 I get the warning:

WARN THREE.Quaternion: .inverse() has been renamed to invert().

But I have no line in my code with: .inverse()

OrbitControls uses e.g. the

var quatInverse = quat.clone().inverse();

Yes, without OrbitControlsView there is no warning!

Hey, thank you for your work on this library. It helps alot 👍 .

I was wondering if you have an idea, how I can stop the camera from moving vertically and only allow to horizontally orbit the object?

I've been developing a feature using this package and I've been testing primarily on Android where it works flawlessly. Recently another team member was testing on their IPhone and was able to do a pinch zoom which after hitting the center of the pivot point locked up the application. Anyone know if there's a prop to disable zoom?

I want to add an on-press event together with rotate and zoom.

Can anyone please help me.

<OrbitControlsView camera={this.camera} onPress={this.onPress}>
  <GLView
    style={style}
    onContextCreate={gl => this.onContextCreate(gl)}
  />
</OrbitControlsView>

const [camera, setCamera] = React.useState<Camera | null>(null); at line 20 is giving the TypeError of being a non-iterable instance.
Could you suggest another way for handling the state for view's camera variable?

Hi! Is there even a way to make it work with the Canvas component that react-three-fiber is providing? I was trying to wrap Canvas with your component but it doesn't seem to work like that.

const ThreeCanvas = () => {
  const {assetsStore: { fetchAssets }} = useStore()
  const {camera} = useThree()
  
  useEffect(() => {
    fetchAssets()
  }, [])

return (
<OrbitControlsView style={{ flex: 1 }} camera={camera}>
    <Canvas
      shadowMap
      gl={{antialias: true, logarithmicDepthBuffer: true}}
    >
      <Camera position={[0, 30, 100]} far={50000}/>
      <ambientLight/>
      <spotLight intensity={0.3} position={[30, 30, 50]} angle={0.2} penumbra={1} castShadow/>
      <spotLight intensity={0.3} position={[-30, 30, 50]} angle={0.2} penumbra={1} castShadow/>
      <Sphere position={[2, 3, 0]} castShadow/>
      <Box castShadow/>
      <Skybox/>
      <Plane receiveShadow/>
    </Canvas>
</OrbitControlsView>
)}

When I try to implement this in my react native code, the orbit controls dont respond to touch

Hi, well i am trying to use the zoom whit two finger bunt not work

Here's the Weekly Digest for EvanBacon/expo-three-orbit-controls:

ISSUES

Last week, no issues were created.

PULL REQUESTS

Last week, no pull requests were created, updated or merged.

COMMITS

Last week there were no commits.

CONTRIBUTORS

Last week there were no contributors.

STARGAZERS

Last week there were no stargazers.

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository EvanBacon/expo-three-orbit-controls to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆