javascript - How to get texture dimensions with Three.js - Stack Overflow

admin管理员组

文章数量:1345090

I would like to know wether it is possible to get the dimensions of a texture ? I used this line to set my texture :

const texture = THREE.ImageUtils.loadTexture(src)

Maybe it is necessary to load the image to get its dimensions (but is it possible only with javascript, not html and its div ?) ?

I would like the material I create afterwards to fit the texture dimensions.

I would like to know wether it is possible to get the dimensions of a texture ? I used this line to set my texture :

const texture = THREE.ImageUtils.loadTexture(src)

Maybe it is necessary to load the image to get its dimensions (but is it possible only with javascript, not html and its div ?) ?

I would like the material I create afterwards to fit the texture dimensions.

• javascript
• three.js
• textures

Share Improve this question Follow edited Mar 6, 2018 at 8:56 user128511 asked Mar 5, 2018 at 13:21 Fred CoudFred Coud 14711 gold badge11 silver badge1313 bronze badges 3

• What format image are you loading? – TheJim01 Commented Mar 5, 2018 at 18:10
• I'm using a mapping web service, so I don't know the format (its not in the URL I use to load the image) – Fred Coud Commented Mar 6, 2018 at 9:00
• You should be able to get that information from the mapping service, either through their documentation, or by downloading an image manually and examining its format yourself. – TheJim01 Commented Mar 6, 2018 at 13:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

First, THREE.ImageUtils.loadTexture is deprecated in the latest THREE.js (r90). Take a look at THREE.TextureLoader instead.

That said, you can get to the image and its properties from a loaded texture.

texture.image

Depending on the image format, you should be able to access the width/height properties, which will be your texture's dimensions.

Just a note: Loading a texture is asynchronous, so you'll need to define the onLoad callback.

var loader = new THREE.TextureLoader();
var texture = loader.load( "./img.png", function ( tex ) {
    // tex and texture are the same in this example, but that might not always be the case
    console.log( tex.image.width, tex.image.height );
    console.log( texture.image.width, texture.image.height );
} );

If you turn off sizeAttenuation, and you have a function that scales the Sprite according to the desired width, then this function will be like:

scaleWidth(width) {
     const tex = sprite.material.map;
     const scaleY = tex.image.height / tex.image.width;
     sprite.scale.setX(width).setY(width * scaleY);
}

So, at this point, you can set the scale according to the desired width, maintaining the aspectRatio of the image.

Then you must have a function that receives the camera, and depending on the type of camera, updates the sprite's width:

updateScale(cam) {
     let cw = 1;
     if(cam.isOrthographicCamera) {
         cw = cam.right - cam.left;
     }
     else if(cam.isPerspectiveCamera) {
         cw = 2 * cam.aspect * Math.tan(cam.fov * 0.5 * 0.01745329);
     }
     scaleWidth(cw * desiredScaleFactor);
}

本文标签： javascriptHow to get texture dimensions with ThreejsStack Overflow