我有点新手我有一个问题：有了Aframe-position-Spherical-Compongont，我设法将元素定位在360DEG中但是如何"曲线"我的元素？(要匹配Sphering显示((顺便说一句，我的元素是
<html>
<head>
<script src="/lib/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-position-spherical-component/index.js"></script>
</head>
<body>
<a-scene>
<a-image src="/static/cat.jpeg" width="3" height="1.5" rotation="0 180 0" position-spherical="10 90 180"></a-image>
</a-scene>
</body>
</html>
首先尝试解决此问题：
目前，我设法获得了一些我想要的东西，但该价值是手动找到的，不是完美的
<a-curvedimage src="/static/cat.jpeg" width="3" height="1.5" theta-length="64" radius="3" theta-start="-32" rotation="0 180 0" position-spherical="10 90 180"></a-curvedimage>
第二次尝试(使用A-Sphere解决方案(：
有点工作，但图像是镜像的，添加单击事件，例如显示更大的图像很难实现
<a-assets>
<img id="cat" src="/static/cat.jpeg" />
</a-assets>
<a-box scale="0.1 0.1 0.1" color="red"></a-box>
<a-sphere radius="10" geometry="phiLength: 20; thetaLength: 14.12; thetaStart: 65" rotation="0 210 0" material="side: back; shader: flat; src: #cat"></a-sphere>
<a-sphere radius="10" geometry="phiLength: 20; thetaLength: 14.12; thetaStart: 65" rotation="0 240 0" material="side: back; shader: flat; src: #cat"></a-sphere>
<a-sphere radius="10" geometry="phiLength: 20; thetaLength: 14.12; thetaStart: 65" rotation="0 270 0" material="side: back; shader: flat; src: #cat"></a-sphere>
<a-sphere radius="10" geometry="phiLength: 20; thetaLength: 14.12; thetaStart: 65" rotation="0 300 0" material="side: back; shader: flat; src: #cat"></a-sphere>
<a-curvedimage>基于气缸(源(，因此它可能不太吻合。
那么实际使用球几何形状呢？tldr小提琴
几何
您可以使用球体的theta和psi属性使其看起来像<a-curvedimage>：
<a-sphere geometry='thetaStart: 45; thetaLength: 45; psiLength: 45'></a-sphere>
这应该导致<a-curvedimage> ISH平面，但也会在垂直轴上弯曲。与psi和theta一起玩，以查看更多三角形或钻石形状的几何形状。
拟合在球体中
这似乎是自定义组件的工作！如果您以前没有使用它们，请查看链接，否则下面的组件简单地复制了球形半径和位置，并将其值用于图像。
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>
Z-Fighting
您应该注意到图像不可见，或者是扭曲的。到目前
您可以轻松地处理此问题 - 通过更改内部球体的半径：
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)
在单击
上放大图像通常我们会使用scale属性，但是在这里我们可以操纵phi和theta值以使图像更大。另外，您应该在扩大时将图像放在前面，以防止图像之间的Z战斗：
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)
})
小提琴在这里。最好将这些值保留在变量(基本值和三角洲(中，但是我希望以此方式更容易得到这个想法。