Why cant I access AR mode #327

hmejbri · 2024-08-09T08:48:55Z

hmejbri
Aug 9, 2024

I followed every step in the documentation and I still cant access the AR mode in my phone (It supports webXR). and when I use the XR emulator extension I dont see my object anywhere.

This is my code :

Model.jsx

import React from "react";
import { useGLTF } from "@react-three/drei";
import { DRACOLoader } from "three-stdlib";

const Model = () => {
  const { scene } = useGLTF("/models/villa/villasss.gltf", true, true, (loader) => {
    // Draco loader setup
    loader.setDRACOLoader(new DRACOLoader().setDecoderPath("/models/villa"));
  });

  scene.scale.set(0.1, 0.1, 0.1); // Example: scaling down the model
  scene.position.set(-0.2, -0.2, -0.2);
  return <primitive object={scene} />;
};

export default Model;

ModelContainer.jsx

import React, { Suspense, useEffect, useRef, useState } from "react";
import Model from "./Model";
import { DirectionalLightHelper } from "three";
import { Html } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import Controls from "../Controls/Controls";
import { XR, createXRStore } from '@react-three/xr';

const ModelContainer = () => {
  const store = createXRStore();
  const dirLightRef = useRef();

  return (
    <>
      <div className="bottom-right-container">
        <button onClick={() => store.enterAR()}><img src="icons/AR.png" width="40" height="40" /></button>
        <button onClick={() => store.enterVR()}><img src="icons/VR.png" width="40" height="40" /></button>
      </div>

      <Canvas camera={{ position: [0, 1, 0] }}>
        <XR store={store}>
          <Controls />
          <ambientLight intensity={2} />
          <directionalLight position={[1, 1, 0]} intensity={3} ref={dirLightRef} />
          <Suspense
            fallback={
              <Html center>
                <div className="loading-container">
                  Loading
                </div>
              </Html>
            }
          >
            <Model />
          </Suspense>
        </XR>
      </Canvas>
    </>
  );
};

export default ModelContainer;

Answered by bbohlender

Aug 9, 2024

yes
https://docs.pmnd.rs/xr/advanced/pitfalls#missing-https

View full answer

bbohlender · 2024-08-09T08:53:27Z

bbohlender
Aug 9, 2024
Maintainer

@hmejbri
2 things I can see that are incorrect:

the suspense fallback is html, which cannot be rendered in WebXR. Only in handheld ar you can use XRDomOverlay
you are executing createXRStore every time the component re-renders -> either put it outside of the component or wrap it in a useMemo

5 replies

hmejbri Aug 9, 2024
Author

Thank you for your response, I fixed those 2 problems but still cant access AR. After further investigation I can see the model using the emulator extension but Its behind the camera.

bbohlender Aug 9, 2024
Maintainer

what exactly happens if you try to access AR?

hmejbri Aug 9, 2024
Author

Nothing.

I'm working on a remote server not on localhost and its http not https, can that be the reason ?

bbohlender Aug 9, 2024
Maintainer

yes
https://docs.pmnd.rs/xr/advanced/pitfalls#missing-https

Answer selected by hmejbri

bbohlender Aug 9, 2024
Maintainer

here's a exmplanation of a recommended dev setup
https://docs.pmnd.rs/xr/getting-started/development-setup

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Why cant I access AR mode #327

{{title}}

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Why cant I access AR mode #327

hmejbri Aug 9, 2024

Replies: 1 comment · 5 replies

bbohlender Aug 9, 2024 Maintainer

hmejbri Aug 9, 2024 Author

bbohlender Aug 9, 2024 Maintainer

hmejbri Aug 9, 2024 Author

bbohlender Aug 9, 2024 Maintainer

bbohlender Aug 9, 2024 Maintainer

hmejbri
Aug 9, 2024

Replies: 1 comment 5 replies

bbohlender
Aug 9, 2024
Maintainer

hmejbri Aug 9, 2024
Author

bbohlender Aug 9, 2024
Maintainer

hmejbri Aug 9, 2024
Author

bbohlender Aug 9, 2024
Maintainer

bbohlender Aug 9, 2024
Maintainer