Three.js не растягивает текстуру сетки (изображение) - пусть она закрывает свой контейнер

Question 1

У меня есть контейнер, к которому я применяю изображение, используя three.js и сетку.

Вот как я применяю свою сетку к сцене:

this.$els = {
    el: el,
    image: el.querySelector('.ch__image') <-- size of container image is being applied to
};

this.loader = new THREE.TextureLoader();
this.image = this.loader.load(this.$els.image.dataset.src);
this.sizes = new THREE.Vector2(0, 0);
this.offset = new THREE.Vector2(0, 0);

getSizes() {
    const { width, height, top, left } = this.$els.image.getBoundingClientRect();

    this.sizes.set(width, height);
    this.offset.set(left - window.innerWidth / 2 + width / 2, -top + window.innerHeight / 2 - height / 2)
}

createMesh() {
    this.geometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1);
    this.material = new THREE.MeshBasicMaterial({
        map: this.image
    });

    this.mesh = new THREE.Mesh(this.geometry, this.material);

    this.mesh.position.set(this.offset.x, this.offset.y, 0);
    this.mesh.scale.set(this.sizes.x, this.sizes.y, 1);

    this.scene.add(this.mesh)
}

В настоящее время изображения / текстуры растягиваются, чтобы соответствовать контейнеру - как я могу заставить их вести себя так же, как object-fit: cover или background-size: cover?

javascript css three.js

2

Johnny 18 Апр 2020 в 17:07

Answer

Попробуйте это с помощью функции cover(), представленной в этом фрагменте кода. Идея состоит в том, чтобы использовать аспект вашего контейнера и изображения для достижения такого же результата, как background-size: cover.

var camera, scene, renderer;

var texture;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    texture = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif', () => {
    
      cover( texture, window.innerWidth / window.innerHeight );
    
      scene.background = texture;
    
    } );
    texture.matrixAutoUpdate = false;

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

  var aspect = window.innerWidth / window.innerHeight;

  camera.aspect = aspect;
  camera.updateProjectionMatrix();
  
  cover( texture, aspect );

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function cover( texture, aspect ) {

  var imageAspect = texture.image.width / texture.image.height;

  if ( aspect < imageAspect ) {

      texture.matrix.setUvTransform( 0, 0, aspect / imageAspect, 1, 0, 0.5, 0.5 );

  } else {

      texture.matrix.setUvTransform( 0, 0, 1, imageAspect / aspect, 0, 0.5, 0.5 );

  }

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

body {
  margin: 0;
 }
 canvas {
  display: block;
 }

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

Кстати: вместо использования window.innerWidth и window.innerHeight используйте размеры контейнера.

4

Mugen87 18 Апр 2020 в 14:49

Question 2

Попробуйте это с помощью функции cover(), представленной в этом фрагменте кода. Идея состоит в том, чтобы использовать аспект вашего контейнера и изображения для достижения такого же результата, как background-size: cover.

var camera, scene, renderer;

var texture;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    texture = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif', () => {
    
      cover( texture, window.innerWidth / window.innerHeight );
    
      scene.background = texture;
    
    } );
    texture.matrixAutoUpdate = false;

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

  var aspect = window.innerWidth / window.innerHeight;

  camera.aspect = aspect;
  camera.updateProjectionMatrix();
  
  cover( texture, aspect );

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function cover( texture, aspect ) {

  var imageAspect = texture.image.width / texture.image.height;

  if ( aspect < imageAspect ) {

      texture.matrix.setUvTransform( 0, 0, aspect / imageAspect, 1, 0, 0.5, 0.5 );

  } else {

      texture.matrix.setUvTransform( 0, 0, 1, imageAspect / aspect, 0, 0.5, 0.5 );

  }

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

body {
  margin: 0;
 }
 canvas {
  display: block;
 }

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

Кстати: вместо использования window.innerWidth и window.innerHeight используйте размеры контейнера.

4

Mugen87 18 Апр 2020 в 14:49

Three.js не растягивает текстуру сетки (изображение) - пусть она закрывает свой контейнер

1 ответ

Похожие вопросы

Новые вопросы

javascript