I'm using MindAr and Three.js to build a scene where I can detect the marker and then load an image and a gltf model with its animation on top of the marker, so I tried to merge three.js code with mindar code the problem is that I'm not able to load the gltf model, its not showing here's my code and please if anyone has any idea would be great Thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image-three.prod.js"></script>
<script type="module">
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/GLTFLoader.js';
const THREE = window.MINDAR.IMAGE.THREE;
const mindarThree = new window.MINDAR.IMAGE.MindARThree({
container: document.querySelector("#container"),
imageTargetSrc: "./assets/targets.mind"
});
const {renderer, scene, camera} = mindarThree;
var mixer;
const anchor = mindarThree.addAnchor(0);
var geometry = new THREE.PlaneGeometry(1, 0.55);
var texture = new THREE.TextureLoader().load( "./assets/TextureImage.png" );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh(geometry, material);
anchor.group.add(mesh);
var loader = new GLTFLoader();
loader.load( './assets/3DObject.glb', function ( gltf ) {
console.log(gltf);
console.log(anchor.group);
anchor.group.add( gltf.scene );
gltf.scene.scale.set(0.5,0.5,0.5);
console.log(scene);
/* mixer = new THREE.AnimationMixer( gltf.scene );
gltf.animations.forEach( ( clip ) => {
mixer.clipAction( clip ).play();
} ); */
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
} );
function animate() {
requestAnimationFrame( animate );
var delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
}
const start = async() => {
await mindarThree.start();
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
}
const startButton = document.querySelector("#startButton");
startButton.addEventListener("click", () => {
start();
});
stopButton.addEventListener("click", () => {
mindarThree.stop();
mindarThree.renderer.setAnimationLoop(null);
});
</script>
<style>
body {
margin: 0;
}
#container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
#control {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
</style>
</head>
<body>
<div id="control">
<button id="startButton">Start</button>
<button id="stopButton">Stop</button>
</div>
<div id="container">
</div>
</body>
</html>
