Hey guys, I’ve been trying to add image to a cube but the texture of image is not same as a actual image. I tried adding “renderer.outputColorSpace = THREE.SRGBColorSpace;” still didn’t work.
here’s you can see how it is looking online.
On bottom you can see actual image.
Also here’s the code-
import ‘./style.css’;
import * as THREE from ‘three’;
//html element
const bookSection = document.querySelector(‘.book’);
//variables
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//adding renderer
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
bookSection.appendChild(renderer.domElement);
//adding lights
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 0, 6);
// scene.add(ambient);
// scene.add(directionalLight);
//adding textures
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(‘src/images/front.png’, (tex) => {
tex.encoding = THREE.sRGBEncoding;
});
//adding boxes
const geometry = new THREE.BoxGeometry(3.5, 5, 0.5);
const material = new THREE.MeshBasicMaterial({
map: texture,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 6;
function animate() {
//animation here
// Rotate all the cubes in the scene
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);
Thanks in advance!!