texture.objectFit(800/600, "cover")

[abernier]

Description

A utility-method, that partially implements https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for THREE.Texture

given:

const w = 4
const h = 3
const geometry = new THREE.PlaneGeometry( w, h );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );

const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
material.map = texture

like in CSS, it could be handy to "cover" the plane with the texture:

texture.objectFit(w/h, "cover"); // 👈🏻 THIS

TODO:

• update doc
• an example?

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
677.8 kB (168 kB)	678.3 kB (168.2 kB)	+538 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Filesize dev	Filesize PR	Diff
455.8 kB (110.1 kB)	456.4 kB (110.2 kB)	+538 B

[abernier]

Or maybe a TextureUtils function would be more appropriate?

[mrdoob]

TextureUtils seems more appropriate yes.

[WestLangley]

Related: #17199

And a use case: https://threejs.org/examples/webgl_test_wide_gamut.html

[Mugen87]

I prefer the more explicit API style of #17199. So how about doing this:

TextureUtils.contain( texture, aspect );
TextureUtils.cover( texture, aspect );
TextureUtils.fill( texture, aspect );

[Mugen87]

Closing in favor of #28713.