CODEWITHSUNDEEP
react-nativethree.jsexpo
KieranLewin
KieranLewin

Reputation: 2290

Expo Three.js OrbitControls

I am trying to make a native app using expo in which I want to have a plane that I can pan around and zoom in and out of like a map, I am using Three as my 3d engine as I do need it to have the ability to be rotated in a 3d space. I have got a 3d cube in my app rotating as a start. From what I can tell this is pretty simple in a browser using MapControls or Orbit controls, however in native I can't get either of these things working, even when I import the script directly from the examples folder 

export default function MapBuilder() {
    const onContextCreate = async gl => {
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(
            75,
            gl.drawingBufferWidth / gl.drawingBufferHeight,
            0.1,
            1000
        )
        const renderer = new ExpoTHREE.Renderer({ gl })
        renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight)

        const geometry = new THREE.BoxGeometry(1, 1, 1)
        const material = new THREE.MeshNormalMaterial({ wireframe: true })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        const controls = OrbitControls(camera, renderer.domElement)

        camera.position.y = 0
        camera.position.x = 0
        camera.position.z = 5

        controls.update()

        const animate = () => {
            window.requestAnimationFrame(animate)
            cube.rotation.x += 0.02
            cube.rotation.y += 0.02
            renderer.render(scene, camera)
            controls.update()
            gl.endFrameEXP()
        }
        animate()
    }

    return (
        <GLView
            style={{ flex: 1, backgroundColor: 'black' }}
            onContextCreate={onContextCreate}
        />
    )
}

I belive the issue could be the renderer.domElement but I dont know what to replace this with.

Any help is appreciated.

Upvotes: 1

Views: 2377

Answers (1)

SJL
SJL

Reputation: 11

I misunderstood the question before
Sorry for the wrong answer

I also had problem with using OrbitControls in Expo today, and found expo-three-orbit-controls works fine for me
I tested with my iPhone and Android emulator

try using ExpoGraphics.View instead of GLView

I have succeeded making a globe and running it on my iPhone by using expo-three and expo graphics

You can check the core of the source from here: https://github.com/cryslub/history-expo/blob/master/ThreeScene.js

Upvotes: 1

Related Questions