main.js

import {mockWithVideo, mockWithImage} from './libs/camera-mock.js';
import {loadGLTF, loadTexture, loadTextures, loadVideo} from './libs/loader.js';

const capture = (mindarThree) => {
  const {video, renderer, scene, camera} = mindarThree;
  const renderCanvas = renderer.domElement;

  // output canvas
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.width = renderCanvas.width;
  canvas.height = renderCanvas.height;

  const sx = (video.clientWidth - renderCanvas.clientWidth) / 2 * video.videoWidth / video.clientWidth;
  const sy = (video.clientHeight - renderCanvas.clientHeight) / 2 * video.videoHeight / video.clientHeight;
  const sw = video.videoWidth - sx * 2; 
  const sh = video.videoHeight - sy * 2; 

  context.drawImage(video, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
  
  renderer.preserveDrawingBuffer = true;
  renderer.render(scene, camera); // empty if not run
  context.drawImage(renderCanvas, 0, 0, canvas.width, canvas.height);
  renderer.preserveDrawingBuffer = false;

  const data = canvas.toDataURL('image/png');
  return data;
}
const THREE = window.MINDAR.IMAGE.THREE;

document.addEventListener('DOMContentLoaded', () => {
  const start = async() => {
    const mindarThree = new window.MINDAR.IMAGE.MindARThree({
      container: document.querySelector("#container"),
      imageTargetSrc: './assets/targets/austrade.mind',
      uiScanning: "#scanning",
      uiLoading: "no",
    });
    
    const {renderer, scene, camera} = mindarThree;
    const cardTexture = await loadTexture('./assets/texture/water.jpeg');
    const geometry = new THREE.PlaneGeometry(1, 1280/1920); 
   const cardMaterial = new THREE.MeshBasicMaterial({map: cardTexture});
    const card = new THREE.Mesh(geometry, cardMaterial);

    const anchor = mindarThree.addAnchor(0);
    anchor.group.add(card);


    
   
   const previewImage = document.querySelector("#preview-image");
   const previewClose = document.querySelector("#preview-close");
   const preview = document.querySelector("#preview");
   const previewShare = document.querySelector("#preview-share");

   document.querySelector("#capture").addEventListener("click", () => {
     const data = capture(mindarThree);
     preview.style.visibility = "visible";
     previewImage.src = data;
   });

   previewClose.addEventListener("click", () => {
     preview.style.visibility = "hidden";
   });

   previewShare.addEventListener("click", () => {
     const canvas = document.createElement('canvas');
     canvas.width = previewImage.width;
     canvas.height = previewImage.height;
     const context = canvas.getContext('2d');
     context.drawImage(previewImage, 0, 0, canvas.width, canvas.height);

     canvas.toBlob((blob) => {
 const file = new File([blob], "photo.jpg", {type: "image/jpg"});
 const files = [file];
 if (navigator.canShare && navigator.canShare({files})) {
   navigator.share({
     files: files,
     title: 'AR Photo',
   })
 } else {
   const link = document.createElement('a');
   link.download = 'photo.jpg';
   link.href = previewImage.src;
   link.click();
 }
     });
   });

    
    await mindarThree.start();
    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
    });
  }
  
  start();
});