Skip to content

Instantly share code, notes, and snippets.

@timoxley
Last active July 1, 2017 23:13
Show Gist options
  • Select an option

  • Save timoxley/4f3cbf78d6f942314d6cb2fa4922c8ef to your computer and use it in GitHub Desktop.

Select an option

Save timoxley/4f3cbf78d6f942314d6cb2fa4922c8ef to your computer and use it in GitHub Desktop.
ReactVR pointerEvents prop seems to do nothing

For facebookarchive/react-360#255

In this example I expected the event handlers from the "middle" box to never fire, and the events for the "behind" box to fire when cursor hovers over it, regardless of whether the cursor is also over the "middle" box. See the console to see a log of the events occurring.

import React from 'react'
import { AppRegistry, View, Box, DirectionalLight, AmbientLight, Pano, asset } from 'react-vr'
export default class App extends React.Component {
render () {
return (
<View style={{ transform: [{ rotateX: 50 }] }}>
<Pano source={asset('chess-world.jpg')} />
<DirectionalLight
intensity={1}
style={{
transform: [{ rotateX: 30 }, { rotateY: -30 }, { rotateZ: 30 }]
}}
/>
<AmbientLight intensity={0.5} />
<View
style={{
display: 'flex',
layoutOrigin: [0.5, 0.5],
transform: [{ translateY: -5 }, { translateZ: -4 }]
}}
>
<Box
style={{
color: 'red',
transform: [{ translateZ: -1 }]
}}
onEnter={() => console.log('onEnter behind')}
onInput={() => console.log('onInput behind')}
lit
/>
<Box
dimWidth={2}
dimDepth={0.1}
dimHeight={2}
pointerEvents={'none'}
style={{
color: 'blue',
opacity: 0.3
}}
onEnter={() => console.log('onEnter middle')}
onInput={() => console.log('onInput middle')}
lit
/>
<Box
style={{
color: 'green',
transform: [{ translateZ: 1 }]
}}
onEnter={() => console.log('onEnter front')}
onInput={() => console.log('onInput front')}
lit
/>
</View>
</View>
)
}
}
AppRegistry.registerComponent('test', () => App)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment