CODEWITHSUNDEEP
three.js
SomeDude
SomeDude

Reputation: 14228

Sprite appearing large when zoomed in and appearing small when zoomed out

In a three.js scene, I have an image sprite whose image is constructed out of a html canvas. When I zoom in to the scene ( using mouse scroll ) the sprite appears larger and when I zoom out it appears smaller. But its not the case with other material like PointsMaterial. They appear smaller when I zoom in they appear smaller and when I zoom out they appear larger - which I think is the desired behavior. Here is the code for my sprite that uses canvas:

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

Is there any setting that I forgot to get the behavior that I described?

Upvotes: 1

Views: 227

Answers (1)

M -
M -

Reputation: 28472

They appear smaller when I zoom in and when I zoom out they appear larger - which I think is the desired behavior.

It sounds to me like you're trying to get rid of the sprite's size attenuation, so it maintains the same size regardless of distance to the camera. To achieve this, you can set the material's .sizeAttenuation property to false:

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

Upvotes: 1

Related Questions