• Developer Samples

    • Components
      fbx model
      gltf model
      quad
    • Transforms
      model-scale
      node rotation
      stage extension
      z-offset
      transform events
    • Animations
      animated model
      animated gltf model
      scale-to
      move-to
      move-by
      rotate-to
      rotate-by
      spin
      animation events
    • Detached CSS
      detached video
      spinning detached cube
    • Demos
      page orientation
      Instances
      content placement
      content placement with URL
      transparency
      multiple models
      video transparency
      effects
      raycast control
      raycast headpos
      2d-3d extraction
      update stage
      gobble gobble
  • model
  • >gltf model
  • quad
  • model-scale
  • node rotation
  • stage extension
  • z-offset
  • transform events
  • animated model
  • animated gltf model
  • scale-to
  • move-to
  • move-by
  • rotate-to
  • rotate-by
  • spin
  • animation-events
  • detached-video
  • spinning-detached-cube
  • page orientation
  • Instances
  • content placement
  • content placement with URL
  • transparency
  • multiple models
  • video transparency
  • effects
  • raycast control
  • raycast headpos
  • 2d-3d extraction
  • update stage
  • gobble gobble
Developer Samples
  • componentsarrow_drop_down
  • animationsarrow_drop_down
  • transformsarrow_drop_down
  • demosarrow_drop_down
Show source code
        
          <ml-model
                id="leaperVideoTest"
                src="Leaper/RedLeaper.fbx"
                materials="kmat: Leaper/RedLeaper.kmat; textures: Leaper/RedLeaper.png;"
                breadth="1200px"
                model-scale="0.3 0.3 0.3"
                z-offset="-300px">
          </ml-model>

          <ml-quad
                id="magicLeapLogo"
                visibility="hidden"
                src="images/magic-leap-vertical-white.png">
          </ml-quad>

          <video id="portalVideo" class="test-video">
                <source src="portal.webm" type="video/webm">
          </video>

        
      
        
    /* Once the 3d model is ready, play video at 1.25 rate and do transform animation          
              moveTo on the model.*/
          leaperVideoTest.addEventListener('model-displayed', (e) => {
                let vid = document.getElementById('portalVideo');
                vid.playbackRate = 1.25;
                vid.play();

                let leaper = document.getElementById('leaperVideoTest');
                leaper.moveTo = "offset: stay stay 200px; duration: 7s; track: 1;"
          });
    /* When moveTo animation is finished, show logo. */
          leaperVideoTest.addEventListener('transform-animation-end', (e) => {
               document.getElementById("magicLeapLogo").visibility = "show";
          });
        
      
Close
Legal Privacy Email Preferences Cookie Preferences
Copyright © 2018 - 2019 Magic Leap, Inc.