augmented-realityaframear.js

In A-Frame (AR.js), Want to make 3D object appear to come out of the floor, i.e. clip/mask below marker somehow


I am looking for a way to clip a 3D object below a certain point in A-Frame with Ar.js. The clipping point would be 0,0,0 I suppose, the marker location. My idea is to have an object appear to come out of the marker from below, so below that point you wouldn't see it. Hopefully my diagram will explain what I mean.

Diagram

I have tried using a C4D compositing tag but as expected that doesn't export as a gltf object.


Solution

  • There is a neat technique used to create an invisible cloak - disabling the colorWrite property of a material.

    Lets say you want to hide your object within a box. You need to create a box, slightly bigger than your object, and set its material as described:

    AFRAME.registerComponent('cloak', {
       init: function() {
         var geometry = new THREE.BoxGeometry( 1.1, 1.1, 1.1 );
         var material = new THREE.MeshBasicMaterial( {colorWrite: false} );
         var cube = new THREE.Mesh( geometry, material );
         this.el.object3D.add( cube );
       }
    })
    

    Then just make sure its rendered before the cloaked objects:

    <a-marker>
      <a-entity cloak></a-entity>
      <a-box animation="property: position; to: 0 1.2 0; dur: 1500; 
             easing: linear; loop: true; dir: alternate"> </a-box>
    </a-marker>
    

    check it out in this glitch.