AR Television Projector Code


      AFRAME.registerComponent("canvas-updater", {
  tick: function () {
    var material = this.el.getObject3D("mesh").material;
    if (!material.map) {
      return;
    }
    material.map.needsUpdate = true;

    if(typeof draw === "function"){
      draw();
    }
  },
});

AFRAME.registerComponent("television-image", {
  schema: {
    image_url: { type: "string", default: "" },
    scale: { type: "string", default: "1 1 1" },
  },

  init: function () {
    var sceneEl = document.querySelector("a-scene");
    var assetsEl = document.querySelector("a-assets");

    //if a-assets tag is not created by the user, create the tag here
    if (assetsEl == null) {
      assetsEl = document.createElement("a-assets");
      sceneEl.appendChild(assetsEl);
    }

    //set up the floor television model asset
    var television_floor_asset_el = document.createElement("a-asset-item");
    television_floor_asset_el.setAttribute("id", "television_model_floor");
    television_floor_asset_el.setAttribute(
      "src",
      "https://cdn.glitch.global/0cd8cb4e-5e5b-401a-b49f-4c023b0961a9/television_rotated.glb?v=1646677666922"
    );
    assetsEl.appendChild(television_floor_asset_el);

    //set up the wall television model asset
    var television_wall_asset_el = document.createElement("a-asset-item");
    television_wall_asset_el.setAttribute("id", "television_model_wall");
    television_wall_asset_el.setAttribute(
      "src",
      "https://cdn.glitch.global/0cd8cb4e-5e5b-401a-b49f-4c023b0961a9/television_wall.glb?v=1646689792831"
    );
    assetsEl.appendChild(television_wall_asset_el);

    //set up the image asset
    var image_asset_el = document.createElement("img");
    image_asset_el.setAttribute("id", "image");
    image_asset_el.setAttribute("src", this.data.image_url);
    assetsEl.appendChild(image_asset_el);

    //add the floor television model asset to the scene
    var television_floor_entity_el = document.createElement("a-entity");
    television_floor_entity_el.setAttribute("id", "television_floor");
    television_floor_entity_el.setAttribute(
      "gltf-model",
      "#television_model_floor"
    );
    television_floor_entity_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(television_floor_entity_el);

    //add the wall television model asset to the scene
    var television_wall_entity_el = document.createElement("a-entity");
    television_wall_entity_el.setAttribute("id", "television_wall");
    television_wall_entity_el.setAttribute(
      "gltf-model",
      "#television_model_wall"
    );
    television_wall_entity_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(television_wall_entity_el);

    //add the image asset to the scene
    var image_el = document.createElement("a-image");
    image_el.setAttribute("id", "television_screen");
    image_el.setAttribute("material", "src:#image");
    image_el.setAttribute("width", "0.065");
    image_el.setAttribute("height", "0.04");
    sceneEl.appendChild(image_el);
  },
});

AFRAME.registerComponent("television-video", {
  schema: {
    video_url: { type: "string", default: "" },
    scale: { type: "string", default: "1 1 1" },
  },

  init: function () {
    var sceneEl = document.querySelector("a-scene");
    var assetsEl = document.querySelector("a-assets");

    //if a-assets tag is not created by the user, create the tag here
    if (assetsEl == null) {
      assetsEl = document.createElement("a-assets");
      sceneEl.appendChild(assetsEl);
    }

    //set up the floor television model asset
    var television_floor_asset_el = document.createElement("a-asset-item");
    television_floor_asset_el.setAttribute("id", "television_model_floor");
    television_floor_asset_el.setAttribute(
      "src",
      "https://cdn.glitch.global/0cd8cb4e-5e5b-401a-b49f-4c023b0961a9/television_rotated.glb?v=1646677666922"
    );
    assetsEl.appendChild(television_floor_asset_el);

    //set up the wall television model asset
    var television_wall_asset_el = document.createElement("a-asset-item");
    television_wall_asset_el.setAttribute("id", "television_model_wall");
    television_wall_asset_el.setAttribute(
      "src",
      "https://cdn.glitch.global/0cd8cb4e-5e5b-401a-b49f-4c023b0961a9/television_wall.glb?v=1646689792831"
    );
    assetsEl.appendChild(television_wall_asset_el);
    
    //set up the video asset
    var video_asset_el = document.createElement("video");
    video_asset_el.setAttribute("id", "video");
    video_asset_el.setAttribute("src", this.data.video_url);
    assetsEl.appendChild(video_asset_el);

    //add the floor television model asset to the scene
    var television_floor_entity_el = document.createElement("a-entity");
    television_floor_entity_el.setAttribute("id", "television_floor");
    television_floor_entity_el.setAttribute(
      "gltf-model",
      "#television_model_floor"
    );
    television_floor_entity_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(television_floor_entity_el);

    //add the wall television model asset to the scene
    var television_wall_entity_el = document.createElement("a-entity");
    television_wall_entity_el.setAttribute("id", "television_wall");
    television_wall_entity_el.setAttribute(
      "gltf-model",
      "#television_model_wall"
    );
    television_wall_entity_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(television_wall_entity_el);

    //add the video asset to the scene
    var video_el = document.createElement("a-video");
    video_el.setAttribute("id", "television_screen");
    video_el.setAttribute("material", "src:#video");
    video_el.setAttribute("position", "0 0.048 0.002");
    video_el.setAttribute("width", "0.065");
    video_el.setAttribute("height", "0.04");
    sceneEl.appendChild(video_el);

  },
});


AFRAME.registerComponent("television-canvas", {
  schema:{
    scale: {type: 'string', default: '1 1 1'}
  },
  
  init: function () {
    var sceneEl = document.querySelector("a-scene");
    var assetsEl = document.querySelector("a-assets");
    var scale = 0.00009;

    //if a-assets tag is not created by the user, create the tag here
    if (assetsEl == null) {
      assetsEl = document.createElement("a-assets");
      sceneEl.appendChild(assetsEl);
    }

    //set up the floor television model asset
    var television_floor_asset_el = document.createElement("a-asset-item");
    television_floor_asset_el.setAttribute("id", "television_model_floor");
    television_floor_asset_el.setAttribute(
      "src",
      "https://cdn.glitch.global/0cd8cb4e-5e5b-401a-b49f-4c023b0961a9/television_rotated.glb?v=1646677666922"
    );
    assetsEl.appendChild(television_floor_asset_el);

    //set up the wall television model asset
    var television_wall_asset_el = document.createElement("a-asset-item");
    television_wall_asset_el.setAttribute("id", "television_model_wall");
    television_wall_asset_el.setAttribute(
      "src",
      "https://cdn.glitch.global/0cd8cb4e-5e5b-401a-b49f-4c023b0961a9/television_wall.glb?v=1646689792831"
    );
    assetsEl.appendChild(television_wall_asset_el);

    //set up the canvas asset
    var canvas_asset_el = document.createElement("canvas");
    canvas_asset_el.setAttribute("id", "aframe_canvas");
    assetsEl.appendChild(canvas_asset_el);

    //add the floor television model asset to the scene
    var television_floor_entity_el = document.createElement("a-entity");
    television_floor_entity_el.setAttribute("id", "television_floor");
    television_floor_entity_el.setAttribute(
      "gltf-model",
      "#television_model_floor"
    );
    television_floor_entity_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(television_floor_entity_el);

    //add the wall television model asset to the scene
    var television_wall_entity_el = document.createElement("a-entity");
    television_wall_entity_el.setAttribute("id", "television_wall");
    television_wall_entity_el.setAttribute(
      "gltf-model",
      "#television_model_wall"
    );
    television_wall_entity_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(television_wall_entity_el);
    
    //add the canvas asset to the scene
    var plane_el = document.createElement("a-plane");
    plane_el.setAttribute("canvas-updater", "");
    plane_el.setAttribute("id", "television_screen");
    plane_el.setAttribute("material", "src:#aframe_canvas");
    plane_el.setAttribute("width", "0.065");
    plane_el.setAttribute("height", "0.04");
    sceneEl.appendChild(plane_el);

  },
});

AFRAME.registerComponent("projector-image", {
  schema: {
    image_url: { type: "string", default: "" },
    scale: { type: "string", default: "1 1 1" },
  },
  
  init: function(){
    var sceneEl = document.querySelector("a-scene");
    var assetsEl = document.querySelector("a-assets");

    //if a-assets tag is not created by the user, create the tag here
    if (assetsEl == null) {
      assetsEl = document.createElement("a-assets");
      sceneEl.appendChild(assetsEl);
    }
    //set up the image asset
    var image_asset_el = document.createElement("img");
    image_asset_el.setAttribute("id", "image");
    image_asset_el.setAttribute("src", this.data.image_url);
    assetsEl.appendChild(image_asset_el);
    
    //add the image asset to the scene
    var image_el = document.createElement("a-image");
    image_el.setAttribute("id", "projector_plane");
    image_el.setAttribute("material", "src:#image");
    image_el.setAttribute("width", "0.065");
    image_el.setAttribute("height", "0.04");
    image_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(image_el);
    
  }
});


AFRAME.registerComponent("projector-video", {
  schema: {
    video_url: { type: "string", default: "" },
    scale: { type: "string", default: "1 1 1" },
  },

  init: function () {
    var sceneEl = document.querySelector("a-scene");
    var assetsEl = document.querySelector("a-assets");

    //if a-assets tag is not created by the user, create the tag here
    if (assetsEl == null) {
      assetsEl = document.createElement("a-assets");
      sceneEl.appendChild(assetsEl);
    }

    //set up the video asset
    var video_asset_el = document.createElement("video");
    video_asset_el.setAttribute("id", "video");
    video_asset_el.setAttribute("src", this.data.video_url);
    assetsEl.appendChild(video_asset_el);

    //add the video asset to the scene
    var video_el = document.createElement("a-video");
    video_el.setAttribute("id", "projector_plane");
    video_el.setAttribute("material", "src:#video");
    video_el.setAttribute("position", "0 0.048 0.002");
    video_el.setAttribute("width", "0.065");
    video_el.setAttribute("height", "0.04");
    video_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(video_el);

  },
});


AFRAME.registerComponent("projector-canvas", {
  schema:{
    scale: {type: 'string', default: '1 1 1'}
  },
  
  init: function () {
    var sceneEl = document.querySelector("a-scene");
    var assetsEl = document.querySelector("a-assets");

    //if a-assets tag is not created by the user, create the tag here
    if (assetsEl == null) {
      assetsEl = document.createElement("a-assets");
      sceneEl.appendChild(assetsEl);
    }

   
    //set up the canvas asset
    var canvas_asset_el = document.createElement("canvas");
    canvas_asset_el.setAttribute("id", "aframe_canvas");
    assetsEl.appendChild(canvas_asset_el);
    
    //add the canvas asset to the scene
    var plane_el = document.createElement("a-plane");
    plane_el.setAttribute("canvas-updater", "");
    plane_el.setAttribute("id", "projector_plane");
    plane_el.setAttribute("material", "src:#aframe_canvas");
    plane_el.setAttribute("width", "0.065");
    plane_el.setAttribute("height", "0.04");
    plane_el.setAttribute("scale", this.data.scale);
    sceneEl.appendChild(plane_el);

  },
});