I followed this Google's tutorial: https://developers.google.com/ar/develop/webxr/hello-webxr?hl=pt-br and successfully made a scene that recgonizes planes in real world, displays a reticle above it and when clicked, show the sunflower model, as it seems in this tutorial. Now I want to load my own .gltf model. I made my GitHub repository and uploaded my .gltf and .bin files generated in Blender, but when I change the URL of the sunflower that was in tutorial for my uploaded model URL, nothing happens when I click on screen, the model isn't displayed on scene. Here are some parts of the code that handles it:
Here I add the GLTF Loader from three.js:
<!-- three.js -->
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
Here I add the .gltf model URL:
let model;
loader.load("https://github.com/joaopedrovga/GltfModels/blob/main/GLTF/SensiaParis_GLTF.gltf", function(gltf) {
model = gltf.scene;
});
And here I add the touch event listener:
session.addEventListener("select", (event) => {
if (model) {
const clone = model.clone();
clone.position.copy(reticle.position);
scene.add(clone);
}
});
I don't have much experience with code so I hope someone can help me this, please! Thanks!