这是指向堆栈溢出帖子的链接:https://stackoverflow.com/questions/53615865/css3drender-disable-scaling12
但我也会将问题复制并粘贴到这里:
请参阅我前面的问题4,以了解我试图实现的目标TL;DR:我试图让HTML元素与OrbitControls一起旋转,使其看起来好像这些HTML元素粘在地球上并随地球移动。(想想某些国家上空3D地球上的地图标记)
我使用THREE.jsCSS3DRenderer,并且能够通过lat/long计算将HTML元素粘贴到我的3D地球仪上的某个位置,并在使用OrbitControls时随地球仪旋转。
问题是
我唯一的问题是HTML元素的缩放比例与它们离相机的距离成比例。通常我认为这将是帮助感觉更接近/更进一步的理想效果,但缩放导致我无法正确且一致地调整HTML元素的大小,还导致元素中的文本和SVG模糊/变成像素化
我想要什么
我正在寻找一种方法来关闭此功能缩放,使HTML元素仍然以其他方式变换,但保持相同的大小(即比例(1,1,1)或其原始比例),无论它们位于CSS3DRenderer创建的3D渲染器中的何处。
我假设必须编辑CSS3Drender.js这个代码,但是我完全不知道从哪里开始,我在其他地方找不到任何信息。
谢谢。
我的一些代码:
创建>
调整大小功能(调用window resize>
从HTML中的
我需要它们是HTML元素,因为我需要将文本作为标记的一部分,并且需要对文本进行内容管理,即文本可以动态更改(使用Wordpress)。
我已经附上了我的地球仪当前外观的图像,以便您可以更好地了解。正如你所看到的,地球背后褪色的标记被缩小了,“活动的”标记被放大了,因此彼此重叠(不幸的是,我不能链接到站点),但我希望它们都是相同的大小,而不是完全缩放,这样我就可以用CSS和类来控制大小。nso换句话说,您不希望特定THREE.CSS3DSprite元素的大小衰减,对吗?
如果您不熟悉此术语,请查看以下示例以查看将sizeAttenuatio
设置为true或false(默认值)的效果。它使用THREE.Points,但也可以使用THREE.Sprite。nhttps://threejs.org/examples/webgl_points_billboards.html27
这似乎就是我要找的。我在演示中看到sizeAttenuatio
设置在点的材质上,但我的CSS3DSprite没有材质,那么如何使用CSS3DSprite实现相同的效果?
我对CSS3DRenderer不是很熟悉,但也许有一种方法可以引入一个新的属性CSS3DSprite.sizeAttenuatio
来控制效果。可能值得在github提交一个功能请求…
在文档中,它说“不可能使用的材料系统”three.js有了CSS3德伦德勒,所以我确信它不会起作用,但是是的,如果没有办法的话,我可能会做一个功能请求……你对我如何在这段时间内停止扩展有什么其他想法吗?谢谢你的帮助
@jgerrish我刚才用一个3d到2D的替代投影回答了你关于StackOverflow 12的问题。正如我们所讨论的,缩放现在已经消失了,因为它不再使用CSS3DRenderer,这意味着你失去了旋转。但是,您仍然可以使用2D向量的.z属性来跟踪它是否在相机的平截头体的内部/外部。
谢谢,我将尝试实现您的代码,我将在这个线程上告诉您它是如何运行的!
顺便说一句:还有一个CSS2Drender 4,它只执行翻译,有时对呈现标签非常有用:nhttps://threejs.org/examples/css2d_label.html23
也许你可以用这个渲染器代替CSS3DRenderer。通过这种方式,您不必执行自定义修改。
哇,这就是我一直在寻找的东西哈哈哈,谢谢您给我指出这一点,我不知道我怎么会错过2D渲染器和3D渲染器,非常感谢!
我也完全忘记了CSS2DRenderer
哦,至少我们终于到了那里!
CSS3DRenderer disable distance scaling of HTML elementsn