Skip to content

Pinch gesture and drag do not scale or move the object in ViroNode #362

@ssssssymo

Description

@ssssssymo

I'm trying to enable pinch-to-scale and drag gestures on a 3D model inside a ViroNode wrapped in a ViroARPlane. Despite implementing onDrag and onPinch handlers and updating state accordingly, the object does not scale nor move in the AR scene.

const [modelPosition, setModelPosition] = useState([0, 0, 0]);
const [modelScale, setModelScale] = useState([0.01, 0.01, 0.01]);
const [currentScale, setCurrentScale] = useState(1);

const onDrag = (dragToPos) => {
  setModelPosition(dragToPos);
};

const onPinch = (pinchState, scaleFactor, source) => {
  if (pinchState === 3) {
    setCurrentScale(currentScale * scaleFactor);
  } else {
    const newScale = currentScale * scaleFactor;
    setModelScale([newScale, newScale, newScale]);
  }
};

return (
  <ViroARScene onTrackingUpdated={onInitialized}>
    <ViroARPlane anchorId={anchorId}>
      <ViroNode
        dragType="FixedToWorld"
        position={modelPosition}
        scale={modelScale}
        onDrag={onDrag}
        onPinch={onPinch}
      >
        <ViroAmbientLight color="#ffffff" />
        <Viro3DObject
          source={modelSource}
          resources={modelResources}
          position={[0, 0, 0]}
          scale={[1, 1, 1]}
          type="GLB"
        />
      </ViroNode>
    </ViroARPlane>
  </ViroARScene>
);

using expo 50 and react viro 2.41.6

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions