Three.js不会拉伸网格纹理(图像)-使它覆盖其容器 [英] Three.js don't strecht mesh texture (image) - make it cover its container
问题描述
我有一个容器,我使用Three.js和网格将图像应用到该容器.
I have a container which i apply an image to using a three.js and mesh.
这就是我将网格物体应用于场景的方式:
That's how I apply my mesh to the scene:
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
一样?
Currently images/textures are being stretched to fit the container - how can I make the behave just like object-fit: cover
or background-size: cover
?
推荐答案
使用此代码段中提供的 cover()
函数进行尝试.这个想法是利用容器和图像的外观来实现类似 background-size:cover
这样的结果.
Try it with the cover()
function presented in this code snippet. The idea is to use the aspect of your container and of the image to achieve a similar result like 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>
BTW:代替使用 window.innerWidth
和 window.innerHeight
,而是使用容器的尺寸.
BTW: Instead of using window.innerWidth
and window.innerHeight
, use the dimensions of the container instead.
这篇关于Three.js不会拉伸网格纹理(图像)-使它覆盖其容器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!