threejs 看看(有点)
threejs look at (sort of)
我的场景中有一个形状几何体,它看起来像一个从一个对象指向另一个对象的箭头。它被添加为直视相机。想象一下相机面向 x,y(例如前面,请参见第一张图片)。当用户旋转到 "right" (z,x) 时,您会一直看下去,所以什么也看不到。这很好,但是,它无限薄,如果你从 top/bottom 看也是如此,当你开始钓鱼时,你不能告诉它是箭头,这就是我想要防止的。
如果您在渲染过程中使用 lookat(camera.postion),则箭头将不再位于相对于两个对象的原始位置。
我能想到的唯一方法是在相机移动时沿单个轴旋转箭头?我正在寻找任何其他建议在这里输入图片描述
我附上了一张图片来尝试更好地解释
基本上我希望箭头看起来像用户旋转场景时的箭头,而不是从顶部看时它消失得无影无踪。请注意,这些箭头可以添加到任何 location/orientation 中,这使得它有点棘手
有两种选择。一个全 3D 选项和一个假 2d 选项。
一个。 3D选项
假设您的箭头有一个主轴(运行 从头到尾)和一个副轴(垂直于其扁平形状)。您需要做的是计算相机位置和次轴之间的角度。给你一张图,你找的角度就是黄色圆弧。
这些都是非常简单的计算,这里没有提供,因为不清楚你的箭头是如何定义的,哪个 XYZ 轴是主要的,
二级.
一旦知道角度,就可以将箭头绕其主轴旋转该角度。这会将箭头旋转到可见度最佳的位置。
请注意,如果相机位于主轴上,则不会定义角度。但是无论如何你都不会从这个相机位置看到任何箭头。
乙。二维选项
这个比较简单。不要在 3D 中渲染箭头。只需在 3D 中跟踪箭头的头部和尾部位置。当相机位置发生变化时,将这些 3D 位置投影到 2D canvas 坐标中。然后,您可以在这些 2D 头部和尾部位置之间绘制一个 2D 形状。请注意,绘制 2D 形状需要在当前 WebGL canvas.
之上创建透明 2D canvas
2D 选项的缺点是箭头将叠加在 3d 场景之上,因此它有时会与蓝色立方体重叠。
我的场景中有一个形状几何体,它看起来像一个从一个对象指向另一个对象的箭头。它被添加为直视相机。想象一下相机面向 x,y(例如前面,请参见第一张图片)。当用户旋转到 "right" (z,x) 时,您会一直看下去,所以什么也看不到。这很好,但是,它无限薄,如果你从 top/bottom 看也是如此,当你开始钓鱼时,你不能告诉它是箭头,这就是我想要防止的。
如果您在渲染过程中使用 lookat(camera.postion),则箭头将不再位于相对于两个对象的原始位置。
我能想到的唯一方法是在相机移动时沿单个轴旋转箭头?我正在寻找任何其他建议在这里输入图片描述
我附上了一张图片来尝试更好地解释
基本上我希望箭头看起来像用户旋转场景时的箭头,而不是从顶部看时它消失得无影无踪。请注意,这些箭头可以添加到任何 location/orientation 中,这使得它有点棘手
有两种选择。一个全 3D 选项和一个假 2d 选项。
一个。 3D选项
假设您的箭头有一个主轴(运行 从头到尾)和一个副轴(垂直于其扁平形状)。您需要做的是计算相机位置和次轴之间的角度。给你一张图,你找的角度就是黄色圆弧。
这些都是非常简单的计算,这里没有提供,因为不清楚你的箭头是如何定义的,哪个 XYZ 轴是主要的, 二级.
一旦知道角度,就可以将箭头绕其主轴旋转该角度。这会将箭头旋转到可见度最佳的位置。
请注意,如果相机位于主轴上,则不会定义角度。但是无论如何你都不会从这个相机位置看到任何箭头。
乙。二维选项
这个比较简单。不要在 3D 中渲染箭头。只需在 3D 中跟踪箭头的头部和尾部位置。当相机位置发生变化时,将这些 3D 位置投影到 2D canvas 坐标中。然后,您可以在这些 2D 头部和尾部位置之间绘制一个 2D 形状。请注意,绘制 2D 形状需要在当前 WebGL canvas.
之上创建透明 2D canvas2D 选项的缺点是箭头将叠加在 3d 场景之上,因此它有时会与蓝色立方体重叠。