如何解决将精灵放置在正交摄影机的底部中心
我试图将精灵放置在正交摄影机的底部中心。
这是我目前拥有的-
对象:
function Obj() {
const texture = useLoader(THREE.TextureLoader,loadedimg);
const spriteRef = useRef();
return (
<group>
<sprite
position={[1,???,0]}
ref={spriteRef}
scale={[texture.image.width * 1.5,texture.image.height * 1.5,1]}
>
<spriteMaterial
attach="material"
map={texture}
sizeAttenuation={false}
/>
</sprite>
</group>
);
}
相机渲染:
<Canvas orthographic camera>
<Suspense fallback={<React.Fragment>loading...</React.Fragment>}>
<Obj />
</Suspense>
</Canvas
我尝试提出一种适用于所有不同精灵的计算(它们都具有不同的高度,因此例如通过设置position={[1,-128,0]}
可以将其中一个放置在底部,而将其他高度设置为坐标会因为高度变短而使其处于浮动状态)。我看了看文档,精灵的center
属性似乎并没有达到我想要的效果,我看过的所有示例都将其放置在屏幕的角落或中间。
感谢您的帮助!
解决方法
使用正交摄影机,只要照相机不旋转,就很容易找到平截头体的底部。由于正交凸轮的所有边缘都是平行的,因此无论精灵在z轴上的深度如何,都可以使用camera.bottom
获得底部。顶部是camera.top
,然后您可以在这两个位置之间找到一个要放置的值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。