如何将three.js页合并成A-frame页

Question

这里是stemkoski的Three.js Example，现在我想在A-frame页面中使用这个Texture-Animation plane or box，如何组合呢

A-frame Version: 0.9.0

我找不到任何示例。

Answer 1

将three.js个片段集成到框架中时，建议使用自定义components。这是一个简单的例子：

js

AFRAME.registerComponent('foo', {

  // this is called upon initialization
  init: function() {
     // we'll need this later on for updating the animation
     this.animator = null

     // wait until the component is loaded
     this.el.addEventListener('loaded', e => {
            // copied straight from stemkoski's code:
            var runnerTexture = new THREE.ImageUtils.loadTexture( 'images/run.png' );
            this.animator = new TextureAnimator( runnerTexture, 10, 1, 10, 75 ); 

            // apply the texture to our element
            let mesh = this.el.getObject3D('mesh')
            mesh.material.map = runnerTexture 
            mesh.material.needsUpdate = true
     })
  },

  // this is called before each render loop
  tick: function(time, delta) {
      // update only if animator was created
      if (!this.animator) return
      this.animator.update(1000 * delta);
  }
})

HTML:

<a-plane foo></a-plane>

故障here。由于 cors 问题，为了使其能够正常工作，我不得不使用 a-assets 预加载图像。

如何将three.js页合并成A-frame页

how to Combe three.js page into A-frame page

three.js

aframe