How to use expo-three - 10 common examples

AR.isConfigurationAvailable(trackingConfiguration)
        );
      });
    }

    try {
      AR.setWorldOriginAsync(new THREE.Matrix4().toArray());
    } catch (error) {
      console.warn('Error:setWorldOriginAsync: ', error);
    }
    this.renderer = ExpoTHREE.renderer({ gl });
    this.renderer.setPixelRatio(scale);
    this.renderer.setSize(width, height);
    this.renderer.setClearColor(0xffffff);

    this.scene = new THREE.Scene();
    this.scene.background = ThreeAR.createARBackgroundTexture(this.renderer);

    /// AR Camera
    this.camera = ThreeAR.createARCamera(width, height, 0.01, 1000);

    this.setupARUtils();
  };

constructor(props) {
    // console.log(`GraphCbgGl ctor`);

    super(props);

    const radius = 3.5;
    if (useSprites) {
      this.lowSpriteMaterial = new THREE.MeshBasicMaterial({
        map: GraphCbgGl.lowSpriteTexture,
        transparent: true,
      });
      this.normalSpriteMaterial = new THREE.MeshBasicMaterial({
        map: GraphCbgGl.normalSpriteTexture,
        transparent: true,
      });
      this.highSpriteMaterial = new THREE.MeshBasicMaterial({
        map: GraphCbgGl.highSpriteTexture,
        transparent: true,
      });
      this.spriteGeometry = new THREE.PlaneGeometry(
        radius * 2 * this.pixelRatio,
        radius * 2 * this.pixelRatio,
        1,
        1

constructor(props) {
    // console.log(`GraphCbgGl ctor`);

    super(props);

    const radius = 3.5;
    if (useSprites) {
      this.lowSpriteMaterial = new THREE.MeshBasicMaterial({
        map: GraphCbgGl.lowSpriteTexture,
        transparent: true,
      });
      this.normalSpriteMaterial = new THREE.MeshBasicMaterial({
        map: GraphCbgGl.normalSpriteTexture,
        transparent: true,
      });
      this.highSpriteMaterial = new THREE.MeshBasicMaterial({
        map: GraphCbgGl.highSpriteTexture,
        transparent: true,
      });
      this.spriteGeometry = new THREE.PlaneGeometry(
        radius * 2 * this.pixelRatio,
        radius * 2 * this.pixelRatio,
        1,
        1
      );
    } else {
      this.circleGeometry = new THREE.CircleBufferGeometry(
        radius * this.pixelRatio,

componentDidMount() {
        // console.disableYellowBox = true;
        THREE.suppressExpoWarnings(true);
    }

const trackingConfiguration = AR.TrackingConfigurations[key];
        // AR.setConfigurationAsync(trackingConfiguration);
        console.log(
          'isConfigurationAvailable:',
          key,
          AR.isConfigurationAvailable(trackingConfiguration)
        );
      });
    }

    try {
      AR.setWorldOriginAsync(new THREE.Matrix4().toArray());
    } catch (error) {
      console.warn('Error:setWorldOriginAsync: ', error);
    }
    this.renderer = new ExpoTHREE.Renderer({ gl, width, height, pixelRatio });
    this.scene = new THREE.Scene();
    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);

    /// AR Camera
    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);
    this.points = new ThreeAR.Points();
    this.scene.add(this.points);
    this.light = new ThreeAR.Light(0x222222);
    this.scene.add(this.light);
    this.planes = new ThreeAR.Planes();
    this.scene.add(this.planes);
  };

// console.log(`GraphYAxisGl ctor`);
    super(props);

    const { width } = this.graphFixedLayoutInfo;

    this.lineDashedMaterial = new THREE.LineDashedMaterial({
      color: convertHexColorStringToInt(this.theme.graphLineStrokeColor),
      linewidth: 1.5 * this.pixelRatio,
      dashSize: 5 * this.pixelRatio,
      gapSize: 4 * this.pixelRatio,
    });
    const leftMargin = 30;
    const rightMargin = 4;
    const xStart = leftMargin * this.pixelRatio;
    const xEnd = width * this.pixelRatio - rightMargin * this.pixelRatio;
    this.lineGeometry = new THREE.Geometry();
    this.lineGeometry.vertices.push(
      new THREE.Vector3(xStart, 0, 0),
      new THREE.Vector3(xEnd, 0, 0)
    );

    this.yAxisBGBoundaryValueLines = new Map();
    this.yAxisLabelTextMeshes = new Map();
  }

constructor(props) {
    super(props);

    // console.log(`GraphNoteEventGl ctor`);

    const tickLineHeight = this.graphFixedLayoutInfo.height;
    this.tickLineGeometry = new THREE.Geometry();
    this.tickLineGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
    this.tickLineGeometry.vertices.push(
      new THREE.Vector3(0, -tickLineHeight * this.pixelRatio, 0)
    );
    this.tickLineMaterial = new THREE.LineBasicMaterial({
      color: 0x000000,
      linewidth: 1.5 * this.pixelRatio,
    });

    const tickTriangleWidth = 16;
    const tickTriangleHeight = Math.sqrt(
      tickTriangleWidth * tickTriangleWidth - tickTriangleWidth / 2
    );
    const tickTriangleShape = new THREE.Shape();
    tickTriangleShape.moveTo(-tickTriangleWidth / 2 * this.pixelRatio, 0);
    tickTriangleShape.lineTo(tickTriangleWidth / 2 * this.pixelRatio, 0);

mesh.traverse(async child => {
    if (child instanceof THREE.Mesh) {
      console.warn('child', child);

      /// Smooth geometry
      const tempGeo = new THREE.Geometry().fromBufferGeometry(child.geometry);
      tempGeo.mergeVertices();
      // after only mergeVertices my textrues were turning black so this fixed normals issues
      tempGeo.computeVertexNormals();
      tempGeo.computeFaceNormals();

      child.geometry = new THREE.BufferGeometry().fromGeometry(tempGeo);

      child.material.shading = THREE.SmoothShading;
      child.material.side = THREE.FrontSide;

      /// Apply other maps - maybe this is supposed to be automatic :[
      child.material.normalMap = await ExpoTHREE.loadAsync(
        model['B-AO_iOS_HERO_Bruce_Wayne_Batman_Arkham_Origins_Body_N.png']
      );
      child.material.specularMap = await ExpoTHREE.loadAsync(
        model['B-AO_iOS_HERO_Bruce_Wayne_Batman_Arkham_Origins_Body_S.png']

async setupModels() {
    await super.setupModels();

    const model = Assets.models.ply.ascii['dolphins.ply'];
    const geometry = await ExpoTHREE.loadAsync(model);

    geometry.computeVertexNormals();
    const material = new THREE.MeshStandardMaterial({
      color: 0x0055ff,
      flatShading: true,
    });
    const mesh = new THREE.Mesh(geometry, material);

    ExpoTHREE.utils.scaleLongestSideToSize(mesh, 3);
    ExpoTHREE.utils.alignMesh(mesh, { y: 1 });
    this.scene.add(mesh);
    this.mesh = mesh; // Save reference for rotation
  }

async setupModels() {
    await super.setupModels();

    const model = Assets.models.ply.binary['Lucy100k.ply'];
    const geometry = await ExpoTHREE.loadAsync(model);

    geometry.computeVertexNormals();
    const material = new THREE.MeshStandardMaterial({
      color: 0x0055ff,
      flatShading: true,
    });
    const mesh = new THREE.Mesh(geometry, material);

    ExpoTHREE.utils.scaleLongestSideToSize(mesh, 3);
    ExpoTHREE.utils.alignMesh(mesh, { y: 1 });
    this.scene.add(mesh);
    this.mesh = mesh; // Save reference for rotation
  }