javascript - aframe 不渲染映射到 Canvas 的 Lottie json 纹理，但可以在 Three.js 中使用

Question

所以我基本上试图通过aframe将json渲染到 Canvas 上，你确实成功地将它映射到三个.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 是动画的

您需要告诉纹理在每个渲染循环上更新。否则，只有动画的第一帧可见(或空的卡瓦)。 您可以使用 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>