Question

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

我是否忘记了我描述的行为的任何设置？

Answer 1

当我放大时它们会变小，而当我缩小时它们会变大-我认为这是理想的行为。

在我看来，您正在尝试摆脱精灵的尺寸衰减，因此无论与相机的距离如何，它都保持相同的尺寸。为此，您可以将材料的.sizeAttenuation属性设置为false：

var spriteMaterial = new THREE.SpriteMaterial({
    map: imgTexture,
    depthWrite: false,
    depthTest: false,
    transparent: true,
    sizeAttenuation: false
});

精灵在放大时显示为大，在缩小时显示为小

1 个答案: