Sprite缩放会导致three.js中的定位和旋转不正确 [英] Sprite scaling causes incorrect positioning and rotation in three.js

问题描述

我正在尝试用文本创建一个精灵。由于性能原因，我没有使用 TextGeometry 。

I'm trying to create a sprite with text. I'm not using TextGeometry for performance reasons.

var fontsize = 18;
var borderThickness = 4;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = "Bold " + fontsize + "px Arial";
context.fillText( message, borderThickness, fontsize + borderThickness);
var texture = new THREE.Texture(canvas) 
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial({ map: texture});
var sprite = new THREE.Sprite( spriteMaterial );

由于某种原因，结果宽度是我期望的一半。我尝试改变用于创建精灵的画布的大小，具有奇怪的结果。所以我缩放它。

For some reason the resulting width is the half of what I expect. I tried to change the size of the canvas used to create the sprite, with weird results. So I scaled it.

sprite.scale.set(100,50,1.0);

问题是如果我缩放图像，它的位置和旋转就完全搞砸了。看起来像sprite的宽度比文本的宽度大得多。见小提琴：

The problem is that if I scale the image, its position and rotation is completely messed up. It seems like the width of the sprite is much larger that the width of the text. See the fiddle:

https://jsfiddle.net / ko3co15f / 1 /

理论上，一的文本应该在立方体顶点附近，旋转时不应该在内外移动这个立方体。

In theory the text with "one" should be near the cube vertex, and when it rotates it should not move inside and outside the cube.

这个行为在three.js修订版62中是正确的：

The behavior is correct in three.js revision 62:

https://jsfiddle.net/qqefadu8/4/

它对我来说似乎是一个错误，我将其报告到3.js github页面，但是它被关闭了。

It seems to me a bug and I reported it to three.js github page, but it was closed.

代码改编自 https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html

推荐答案

已解决。我不得不在画布创建之后更改画布大小：

Solved. I had to change the canvas size just after canvas creation:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var size = 56;
canvas.height = size;
canvas.width = size;

https://jsfiddle.net/03h4fyka/1/

对WestLangley的信用。我有另一个问题，我会把它发布在另一个问题。

Credits to WestLangley. I have another problem, I'll post it in another question.

这篇关于Sprite缩放会导致three.js中的定位和旋转不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！