plunkerでa-frame

1789 ワード
A-Frame glTF Plunker A-Frame テキストリンク

概要

plnkerでa-frameやってみた。
gltfをアニメーション表示してみた。

写真

サンプルコード

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
    <script src="lib/script.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
  <a-scene>
    <a-assets>
      <a-asset-item id = "vrm" src= "https://rawcdn.githack.com/pissang/claygl/c4f45119/example/assets/models/SambaDancing/SambaDancing.gltf"></a-asset-item>
    </a-assets>    
    <a-entity gltf-model = "#vrm" scale = "0.2 0.2 0.2" animation-mixer></a-entity>      
    <a-camera position = "0 10 30" cursor-visible = "true" cursor-scale = "5" cursor-color = "#0095DD" cursor-opacity = "1"></a-camera>      
    <a-light type = "directional" color = "#FFF" intensity = "0.5" position = "-1 1 2"></a-light>      
    <a-light type = "ambient" color = "#FFF"></a-light>
  </a-scene>
  </body>
</html>

成果物

以上。