Currently in the process of developing an art-making app that focuses on image-based content using three.js.
Utilizing React.js for this project, but aiming to make the following explanations clear even for individuals unfamiliar with React. Within the component, a canvas is rendered and receives a locally-hosted image URL from a parent component.
The existing code is structured to generate a full-window canvas, form a 2D shape covering the entire canvas, and apply the provided image as a texture:
import React, { PureComponent } from 'react';
import * as THREE from 'three';
const textureLoader = new THREE.TextureLoader();
// Code snippets omitted for brevity
class Canvas extends PureComponent {
// Code snippet omitted for brevity
componentDidMount() {
// Code snippet omitted for brevity
// Initializing renderer, camera, scene, loading initial texture, etc.
this.animate();
}
animate = () => {
requestAnimationFrame(this.animate);
this.renderer.render(this.scene, this.camera);
}
render() {
return (
<canvas innerRef={elem => this.canvas = elem} />
);
}
}
export default Canvas;
Encountering challenges where the texture appears stretched when displayed on the canvas. This results in distortion if the image dimensions do not match the window size precisely:
https://i.sstatic.net/clgI2.jpg
Seeking a solution similar to utilizing background-size: cover. The goal is to resize the image to fit the larger window dimension (e.g., 1000x1000) and then crop it at the center to display only the central 500px of height.