aframe 不渲染lottie json 纹理映射到 canvas 但适用于 three.js

Question

so i'm basically trying to render a json onto a canvas via aframe, u did successfully get it to map onto a canvas in three.js, but when i try to replicate this in aframe, it just show a white frame, it shows that it在那里，但没有显示 animation。

无法在框架中渲染 ( 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 包含透明元素

你需要告诉材质你希望它是透明的，否则你会看到像这样的工件：

这样做非常简单：

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

2. canvas 动画

您需要告诉纹理在每个渲染循环上更新。 否则，只有 animation 的第一帧可见（或空腔）。 简而言之，您可以使用自定义组件轻松完成此操作：

// 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>