Skip to content

WIP: Added Texture.contain, .cover, .fill#17199

Closed
WestLangley wants to merge 5 commits intomrdoob:devfrom
WestLangley:dev_object_fit
Closed

WIP: Added Texture.contain, .cover, .fill#17199
WestLangley wants to merge 5 commits intomrdoob:devfrom
WestLangley:dev_object_fit

Conversation

@WestLangley
Copy link
Copy Markdown
Collaborator

@WestLangley WestLangley commented Aug 8, 2019

When a flat texture is set as the scene.background, it stretches to fit by default.

I'm trying to find the right API to support something like the CSS object-fit "cover" and "contain" properties.

(This feature does not have to be supported by adding new methods to Texture as I have done. I could just show an example.)

Suggestions welcome...

void main() {

if ( vUv.x < 0.0 || vUv.x > 1.0 ) discard; // works, but it messes up repeated textures in other use cases
if ( vUv.y < 0.0 || vUv.y > 1.0 ) discard;
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is required to support "contain". Is it worth supporting contain?

@donmccurdy
Copy link
Copy Markdown
Collaborator

Perhaps Scene or SceneUtils might be a better place for this API? For example:

import { Scene } from 'three';
import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js';

const scene = new Scene();
scene.background = texture;
SceneUtils.setBackgroundFit( scene, 'contain', aspect );

@WestLangley
Copy link
Copy Markdown
Collaborator Author

@donmccurdy That is probably better...

@WestLangley
Copy link
Copy Markdown
Collaborator Author

@mrdoob Maybe we could have a SceneBackground object. You indicated something like that, if I remember correctly. I do not recall the motivation, though. One advantage would be having user-access to the background material.

@WestLangley WestLangley deleted the dev_object_fit branch January 30, 2020 00:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants