I am trying to render a sphere with a texture wrapped on it, i am using a png texture with 1920px1080p resolution but the resulted texture is always very blurry,
here is my sample code :
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer({
antialias: true,
});
var canvas = renderer.domElement;
this.$refs.threeCanvas.appendChild(canvas);
renderer.setSize(104, 104);
// Load textures
var textureLoader = new THREE.TextureLoader();
var wrappingTexture = textureLoader.load(this.texture, () => {
// Create the main sphere with the wrapping texture
wrappingTexture.magFilter = THREE.LinearFilter; // <-- i tried adding these mag and min Filters but to no result
wrappingTexture.minFilter = THREE.LinearMipMapLinearFilter;
var sphereGeometry = new THREE.SphereGeometry(10, 256, 256);
var wrappingMaterial = new THREE.MeshBasicMaterial({
map: wrappingTexture,
transparent: true, // Make the material transparent
opacity: 0.5, // Set opacity for see-through effect
});
var sphere = new THREE.Mesh(sphereGeometry, wrappingMaterial);
scene.add(sphere);
})
Should i try a different texture ? Like SVG and with lower dimensions ?