javascript - aframe 不呈现映射到 Canvas 的 lottie json 纹理，但可以在 Three.js 中工作

Question

所以我基本上是在尝试通过 aframe 将 json 渲染到 Canvas 上，您确实成功地将它映射到了 Three.js 中的 Canvas 上，但是当我尝试在 aframe 中复制它时，它只显示一个白色框架，它显示它在那里，但没有显示动画。
无法在 aframe 中渲染 ( https://glitch.com/edit/#!/sun-innate-cupboard )
能够在three.js中渲染( https://jsfiddle.net/crays/15cgbvsp )

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 5;

    scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xffffff );
        
        const canvas = document.createElement( 'canvas' );
        canvas.width = 1024;
        canvas.height = 1024;
        const context = canvas.getContext( '2d' );
        
        const animation = bodymovin.loadAnimation( {
            container: document.getElementById( 'bm' ),
            renderer: 'canvas',
            rendererSettings: {
                context: context
            },
            loop: true,
            autplay: true,
            path: 'https://assets5.lottiefiles.com/packages/lf20_mb9ka7yz.json'
      //animationData: json
        } );

        const texture = new THREE.CanvasTexture( canvas );

    const geometry = new THREE.PlaneGeometry();
    const material = new THREE.MeshBasicMaterial( { map: texture } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
        
        mesh.material.map.needsUpdate = true;
    

    renderer.render( scene, camera );

}

可能是我缺少的东西吗？

Answer 1

两件事，不仅是关于乐蒂动画，还有一般的纹理:
1. Canvas 包含透明元素
你需要告诉 Material 你想要它是透明的，否则你会看到这样的工件:

这样做非常简单:

<!-- in threejs: material.transparent = true -->
<!-- in a-frame: -->
<a-entity material="transparent: true">

2. Canvas 动画
您需要告诉纹理在每个渲染循环上更新。否则只有动画的第一帧是可见的(或一个空的 cavas)。
您可以使用 custom component 轻松完成。 ， 简而言之:

// grab the mesh upon initialization
const mesh = element.getObject3D("mesh");
// cache it for later use
texture = mesh.material.map;

// on each renderloop
texture.needsUpdate = true;

3、理论付诸实践

// load the lottie animation
const canvas = document.getElementById('animation')
const context = canvas.getContext("2d");

const animation = bodymovin.loadAnimation({
  renderer: "canvas",
  rendererSettings: {
    context: context
  },
  loop: true,
  autplay: true,
  path: "https://assets5.lottiefiles.com/packages/lf20_mb9ka7yz.json"
});

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js"></script>
<script>
  AFRAME.registerComponent("update-texture", {
    init: function() {
      this.el.addEventListener("loaded", e => {
        const mesh = this.el.getObject3D("mesh");
        this.texture = mesh.material.map
      })
    },
    tick: function() {
      if (this.texture) {
        this.texture.needsUpdate = true;
      }
    }
  })
</script>

<canvas id="animation" width="1024" height="1024"></canvas>
<a-scene background="color: #ECECEC">
  <a-plane position="0 1.5 -1" material="shading: flat; transparent: true; src: #animation" update-texture></a-plane>
</a-scene>