如何镜像图像使其处于正确的方向?
我遵循了@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 不会影响镜像。
通过使用镜像精灵表解决了这个问题,这样当应用为弯曲纹理时它看起来就正确了。这更像是黑客攻击,尚未使用正确的编码来解决。