• 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
        

<!-- Copyright Magic Leap, Inc. 2019.-->
<!-- You may reuse the code below, but not the visual assets themselves.-->


          <audio id="spottedAudio" src="audios/trukey_spotted_01.wav"></audio>
          <audio id="walkingAudio" src="audios/turkey_walking_01.wav" loop></audio>

          <ml-model
                id="birdModel"
                src="turkey/turkey.fbx"
                materials="kmat: turkey/turkey.kmat;
                                      textures:   turkey/turkey_baseColor.png
                                                            turkey/turkey_Normal.png
                                                            turkey/turkey_Roughness.png;"
                model-scale="0 0 0"
                model-position="0 -150 -250"
                scale-to="axes: 0.5 0.5 0.5; duration: 6s; track: 1;"
                move-by="axes: 0 100px 270px; duration: 7s; track: 2;"
                model-animation-speed="1"
                model-animation="walking, false, -1">
          </ml-model>
        
      
        
      /* Listen for transform animation end event. Once event is triggered, play a different
                  audio and play a different animation. */
              birdModel.addEventListener('transform-animation-end', (e) => {
              /* Check move-by animation on track 2 is finished. */
                    if (e.detail.track === 2) {
                       walkingAudio.pause();
                       spottedAudio.play();
                       birdModel.animation = "spotted, false, 1";
                    }
                });
          
      
Close
Legal Privacy Email Preferences Cookie Preferences
Copyright © 2018 - 2019 Magic Leap, Inc.