Aframe 如何弯曲平面图元以匹配球体曲面？

我是个新手 我有一个问题：使用帧位置球形组件，我成功地将元素定位在360度 但是我怎样才能弯曲我的元素呢？为了匹配球体显示，顺便说一句，我的元素是

第一次尝试解决这个问题： 现在，我设法得到了接近我想要的东西，但值是手动找到的，并不完美

a-sphere解决方案的第二次尝试： 这是一种工作，但图像是镜像的，添加一个单击事件来显示更大的图像是很难实现的

所以它可能不太合适。 那么，实际使用球体几何体怎么样？

几何学

---

你可以让它看起来像一个小男孩。最好将这些值保存在变量base value和delta中，但我希望这样更容易理解。

hello@piotradamilewski。你的解决方案很管用。我删除了球体，因为它不是我的项目的一部分，我想在360度显示10个图像。问题是，在你的解决方案中，点击一张图片看得更大是很难做到的。另外，我看到镜像的图像，这正常吗？如果你想让它“onClick”更大，那么你可以像我一样操纵θ和φ。镜像图像可能是因为它位于网格的背面。一个巧妙的技巧是设置材质。重复=-1，就像我做得很好一样。最后一个小问题，如果我想让单击的图像在另一个图像上显示，我只需要这样做。el.setAttribute'radius'，sphere.getAttribute'radius'*0.95？@xDelph您可以这样做：第一次单击-设置半径*0.95 b第二次单击-设置半径*1。这对你有用吗？@xDelph我已经将大部分内容添加到了anwser中

<a-sphere geometry='thetaStart: 45; thetaLength: 45; psiLength: 45'></a-sphere>

AFRAME.registerComponent('foo', {        
  schema: {
     // we'll use it to provide the sphere
     target: {type: selector}            
  },
  init: function() {
     let sphere = this.data.target
     // make sure the sphere radius and transform is identical:
     this.el.setAttribute('radius', sphere.getAttribute('radius'))
     this.el.setAttribute('position', sphere.getAttribute('position'))
  }
})

<!-- the background with some position and radius -->
<a-sphere id='background'></a-sphere>
<!-- the inner sphere  -->  
<a-sphere foo='target: #background'></a-sphere>

 this.el.setAttribute('radius', sphere.getAttribute('radius') * 0.95)

// grab the inner sphere's mesh
let mesh = this.el.getObject3D('mesh')
// we need an axis - I'd substract the mesh's center from the spheres center
let axis = sphere.getAttribute('position').clone()
axis.add(mesh.geometry.boundingSphere.center.clone().multiplyScalar(-1))
axis.normalize();
// move the inner sphere a bit along the axis
this.el.object3D.translateOnAxis(axis, 0.05)

this.el.addEventListener('click', e => {
   this.clicked = !this.clicked
   // preset values depending if the image is clicked or not
   let thetaLength = this.clicked ? 65 : 45
   let thetaStart = this.clicked ? 35 : 45
   let psiLength = this.clicked ? 65 : 45
   let psiStart = this.clicked ? -10 : 0
   let scale = this.clicked ? 0.95 : 1
   // apply the new geometry 
   this.el.setAttribute('geometry', {
    'thetaLength': thetaLength,
    'thetaStart': thetaStart,
    'phiLength': psiLength,
    'phiStart' : psiStart
   })
   this.el.setAttribute('radius', sphere.getAttribute('radius') * scale)
})