精灵缩放会导致三个.js的定位和旋转不正确

Sprite scaling causes incorrect positioning and rotation in three.js

本文关键字：js 三个 定位 不正确 旋转 缩放 精灵      更新时间：2023-09-26

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

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 );

出于某种原因，生成的宽度是我期望的一半。我试图改变用于创建精灵的canvas的大小，结果很奇怪。所以我缩放了它。

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

问题是，如果我缩放图像，它的位置和旋转就会完全混乱。似乎精灵的宽度比文本的宽度大得多。看小提琴：

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

理论上，带有"一"的文本应该靠近立方体顶点，当它旋转时，它不应该在立方体内外移动。

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

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

在我看来，这是一个错误，我将其报告给三个.js github页面，但它已关闭。

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

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

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var size = 56;
canvas.height = size;
canvas.width = size;

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

归功于西兰利。我有另一个问题，我会在另一个问题中发布它。

相关文章：