OrbitControl не работает в моем приложении React Native Expo - PullRequest
Новая
       108

OrbitControl не работает в моем приложении React Native Expo

0 голосов
/ 30 мая 2020
• 1000 не реагирует на касание в моем эмуляторе android и не отвечает в браузере chrome web android. Вот мой текущий код: 
import { GLView } from 'expo-gl'
import React from 'react'
import { View, Text, StyleSheet, Button, Div, Dimensions } from 'react-native'
import * as THREE from "three"
import ExpoTHREE from 'expo-three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

const screenWidth = Math.round(Dimensions.get('window').width)
const screenHeight = Math.round(Dimensions.get('window').height) 

export default class Feed extends React.Component {
  render() {
    return (
        <View style={styles.container}>
            <GLView style={styles.halfpage} onContextCreate={this._onGLContextCreate}/>   
            <Button title='hello'>

            </Button>
        </View>   
    )
  }

  _onGLContextCreate = async (gl) => {
    const renderer = new ExpoTHREE.Renderer({ gl })
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight)
    renderer.setClearColor(0x000000, 0)
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(
      75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000
    )

    const directionalLight = new THREE.DirectionalLight(0xff0000, 1);
    directionalLight.position.y = 10
    directionalLight.position.z = 10
    scene.add(directionalLight);

    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshPhongMaterial({ color: 0xffffff })
    const cube = new THREE.Mesh( geometry, material )
    scene.add(cube)

    const controls = new OrbitControls(camera, renderer.domElement)
    camera.position.z = 5

    controls.update()
    const animate = () => {
        requestAnimationFrame(animate)
        controls.update()
        renderer.render(scene, camera)
        gl.endFrameEXP()
      }
      animate()
  }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'transparent',
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: '#ffff00',
        borderWidth: 3
    },
    halfpage: {
        flex: 1,
        width: screenWidth,
        borderColor: '#000000',
        borderWidth: 3,
    }
})
...