A-frame：如何将镜像球体几何图像转向正确方向？

Question

如何镜像图像使其处于正确的方向？

我遵循了@Piotr Adam Milewski 对于这个堆栈问题的解决方案：how-to-curve-a-plan-entity-to-match-a-sphere-surface。将材质重复设置为 -1 也不会更改镜像。我正在使用 aframe-sprite-sheet 组件来制作 sprite-sheet 动画。

    <script>
        AFRAME.registerComponent("match-sphere", {
          schema: {
            target: {
              type: "selector",
            },
          },
          init() {
            const sphere = this.data.target;

            this.el.setAttribute("radius", sphere.getAttribute("radius"));
            this.el.setAttribute("position", sphere.getAttribute("position"));
            this.el.sceneEl.addEventListener("loaded", () => {

              setTimeout(() => {
                const mesh = this.el.getObject3D("mesh");
                const axis = sphere.getAttribute("position").clone();
                axis.add(
                  mesh.geometry.boundingSphere.center.clone().multiplyScalar(-1)
                );
                axis.normalize();
                this.el.object3D.translateOnAxis(axis, 0.1);
              }, 200);
            });
          },
      });
  </script>

<a-scene>
  <a-assets>
    <img
       id="15Anim"
       crossorigin="anonymous"
       src="https://cdn.glitch.global/1e9da372-6263-4de8-9156-5eb917844f9b/15-Unit.png"
     />
    <a-mixin
      id="anim"
      material="shader:flat; side: double; transparent:true; opacity:0.3; alphaTest:0.1"
      match-sphere="target: #foo"
      click-sphere
      rotation='0 180 0'
      radius='2.8' 
     ></a-mixin>
  </a-assets>
  
  <a-entity id="group" rotation="0 222 0" position="0 -55 0" scale="20 20 20">
     <a-sphere 
        id='foo' 
        position="0 0 0" 
        radius='4.05' 
        theta-length="90"ength="90" 
        material='color: #59A1FF; shader: flat; side: double; opacity:0.7; transparent:false; wireframe:false;'>
      </a-sphere>

     <a-sphere  
       mixin="anim" 
       class="cantap" 
       material='src: #15Anim' 
       sprite-sheet="cols:5; rows: 10; progress: 0.;" 
       geometry='phiLength: 53; thetaLength: 26; thetaStart: 25; phiStart:200'>
    </a-sphere>
  </a-entity>
</a-scene>

结果参考：

尝试将重复值从 -1 更改为 1 和 0。更改旋转会将图像移动到不同的位置。将 alphatest 设置为 0 不会影响镜像。

Answer 1

通过使用镜像精灵表解决了这个问题，这样当应用为弯曲纹理时它看起来就正确了。这更像是黑客攻击，尚未使用正确的编码来解决。