在three.js场景中,我有一个图片精灵,其图片是由html画布构造的。当我放大场景(使用鼠标滚动)时,精灵会变大,而当我缩小时,精灵会变小。但是其他材料(例如PointsMaterial)则不是这种情况。当我放大时,它们显得更小;当我缩小时,它们看起来更大;我认为这是理想的行为。 这是我使用画布的精灵的代码:
var image = new Image();
image.src = canvas.toDataURL("image/png");
var imgLoader = new THREE.TextureLoader();
imgLoader.setCrossOrigin("");
var imgTexture = imgLoader.load(image.src);
imgTexture.minFilter = THREE.LinearFilter;
var spriteMaterial = new THREE.SpriteMaterial({
map: imgTexture,
depthWrite: false,
depthTest: false,
transparent: true,
});
var sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(0.3*canvas.width, 0.25*canvas.height, 1);
sprite.position.x = x0; //fixed
sprite.position.y = y0; //fixed
sprite.position.z = z0; //fixed
var cx = (0.17/187)*w; // w is width of text present on canvas.
var cy = 0.35;
sprite.center.set(cx, cy);
我是否忘记了我描述的行为的任何设置?
答案 0 :(得分:1)
当我放大时它们会变小,而当我缩小时它们会变大-我认为这是理想的行为。
在我看来,您正在尝试摆脱精灵的尺寸衰减,因此无论与相机的距离如何,它都保持相同的尺寸。为此,您可以将材料的.sizeAttenuation
属性设置为false:
var spriteMaterial = new THREE.SpriteMaterial({
map: imgTexture,
depthWrite: false,
depthTest: false,
transparent: true,
sizeAttenuation: false
});