expo-three: OrbitControls/MapControls not working

I have "expo-three": "^5.2.0" and "three": "^0.110.0", and planning to use MapControls and to support both web and Android devices.

When I implement and test OrbitControls with the following code, I’m getting such error “the 2nd parameter is now mandatory” on an Android emulator:

import { THREE } from 'expo-three';
// global.THREE = global.THREE || THREE;
import 'three/examples/js/controls/OrbitControls';

let controls;
//...
      onCreate={props => {
        //...
        controls = new THREE.OrbitControls(camera);
      }
      onUpdate={() => {
        controls.update();
        //...
      }}

Even though I implement OrbitControls as the following, it’s still not working on both platforms and seems no effect without any warning:

controls = new OrbitControls( camera, renderer.domElement );

Is there any updated guide to use camera controls such as OrbitControls or MapControls on both web and Android platforms? Thanks!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 6
  • Comments: 16 (1 by maintainers)

Most upvoted comments

I have ended up making a normal static webpage hosting it in gitpages and using web view to see it in expo

OrbitControls will not work in a native React runtime because it relies heavily on DOM APIs. I just updated my experimental port of OrbitControls that uses PanResponder internally to pass delegate touch events expo-three-orbit-controls – I don’t actively maintain expo-three-orbit-controls so you may need to fork it if you want to use a more stable touch system like react-native-gesture-handler.

The problem is i followed the implementation of react-three-fiber, but it doesnt work natively on my android emulator, like it works on web perfectly fine. The problem is translating in into a workable way so that the android emulator would reflect the orbitcontrols i was able to create on the web