Viro: onPinch event not firing in Viro3DObject

Created on 27 Jan 2020  路  5Comments  路  Source: viromedia/viro

Environment

Please provide the following information about your environment:

  1. Development OS: Linux
  2. Device OS & Version: iOS 13.0
  3. Version: ViroReact 2.17.0 and React Native .59.9
  4. Device(s): iPad

Description

onPinch event is not firing on my 3D viro object. I can't get onTouch to work either when I add an event. I can sometimes get onClick to fire, but it seems inconsistent. Tried with multiple GLTF models.

The code is mostly taken from the Figment app.

The model itself is loaded inside a ViroARImageMarker.

Relevant code pasted below.

  _onPinch(pinchState, scaleFactor, source) {
    //TODO: WHY DOES THIS NOT WORK SOMETIMES
    console.warn("pinch");
    var newScale = this.state.scale.map(x => {
      return x * scaleFactor;
    });

    if (pinchState == 3) {
      this.setState({
        scale: newScale
      });
      this.props.onClickStateCallback(
        this.props.modelIDProps.uuid,
        pinchState,
        UIConstants.LIST_MODE_MODEL
      );
      return;
    }

    this.arNodeRef.setNativeProps({ scale: newScale });
    //this.spotLight.setNativeProps({shadowFarZ: 6 * newScale[0]});
  }

   render: function() {
    var modelItem = ModelData.getModelArray()[this.props.modelIDProps.index];
    let transformBehaviors = {};
    if (this.state.shouldBillboard) {
      transformBehaviors.transformBehaviors = this.state.shouldBillboard
        ? "billboardY"
        : [];
    }

    return (
      <ViroNode
        {...transformBehaviors}
        key={this.props.modelIDProps.uuid}
        ref={this._setARNodeRef}
        scale={this.state.scale}
        rotation={this.state.rotation}
        position={[0, 0, 0]}
      >
        <Viro3DObject
          source={modelItem.obj}
          type={modelItem.type}
          position={modelItem.position}
          rotation={modelItem.rotation}
          resources={modelItem.resources}
          animation={
            modelItem.animation
              ? { ...modelItem.animation, run: this.state.runAnimation }
              : null
          }
          onError={this._onError(this.props.modelIDProps.uuid)}
          lightReceivingBitMask={this.props.bitMask | 1}
          shadowCastingBitMask={this.props.bitMask}
          onError={this._onError(this.props.modelIDProps.uuid)}
          onLoadStart={this._onObjectLoadStart(this.props.modelIDProps.uuid)}
          onLoadEnd={this._onObjectLoadEnd(this.props.modelIDProps.uuid)}
          onClickState={this._onClickState(this.props.modelIDProps.uuid)}
          onClick={() => {}}
          onError={this._onError(this.props.modelIDProps.uuid)}
          onRotate={this._onRotate}
          onPinch={this._onPinch}
        />
      </ViroNode>
    );
  }

Most helpful comment

@radvani @VikAdvani I'm sorry to bother, but I'm putting a presentation together that I need done by tomorrow and this is the last step. Any ideas?

All 5 comments

Even stranger, the only event that I can get to fire is onClick. It fires when I finish a swipe gesture. (???)

           onClick={() => console.log("click")}
          onSwipe={() => console.log("swipe")}
          onTouch={() => console.log("touch")}

@radvani @VikAdvani I'm sorry to bother, but I'm putting a presentation together that I need done by tomorrow and this is the last step. Any ideas?

Turns out this is related to https://github.com/viromedia/viro/issues/785

I removed the menu at the start of my app, and the touch events worked properly again. This is really bizarre.

Hey! What about trying this when declaring your _ViroARSceneNavigator_?

<View style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0, width: "100%", height:"100%" }}>
  <ViroARSceneNavigator
    {...this.state.sharedProps}
    initialScene={{ scene: InitialARScene }}
    viroAppProps={{
      ... // Any props to pass to the ARScene
    }}
  />
</View>

That was my final idea when having event issues on https://github.com/viromedia/viro/issues/785#issuecomment-574694218

I managed to make it work, posted my solution on #785

Was this page helpful?
0 / 5 - 0 ratings

Related issues

funkyfourier picture funkyfourier  路  3Comments

yabeow picture yabeow  路  4Comments

Thomas101 picture Thomas101  路  3Comments

parideis picture parideis  路  4Comments

WillGeller picture WillGeller  路  3Comments