Hello everyone, I am new in three, and having this issue of gettin html/text instead of jpg.
I am importing files from script:
import bg1 from "../images/prvi.jpg";
import bg2 from "../images/1.png";
import bg3 from "../images/2.jpg";
import bg4 from "../images/3.jpg";
import bg5 from "../images/4.jpg";
import bg6 from "../images/5.jpg";
import bg7 from "../images/6.png";
import bg8 from "../images/7.jpg";
import bg9 from "../images/8.jpg";
import bg10 from "../images/9.jpg";
const images = {
bg1,
bg2,
bg3,
bg4,
bg5,
bg6,
bg7,
bg8,
bg9,
bg10,
};
export default images;
here is the script:
import * as THREE from "three";
import images from "./images";
const container = document.querySelector(".three_bg");
const loader = new THREE.TextureLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
70,
window.innerHeight / window.innerWidth,
0.1,
1000
);
const renderer = new THREE.WebGL1Renderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
const back1 = loader.load(images.bg1);
const geometry = new THREE.PlaneGeometry(5, 5);
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
map: back1,
});
const mesh = new THREE.Mesh(geometry, material);
camera.position.z = 5;
scene.add(mesh);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
container.appendChild(renderer.domElement);
animate();
Now the problem is that I don’t get image rendered. In the developer tool I get html/text. I’ve tried to link image from the folder:
const back1 = loader.load("../images/background.jpg");
but still getting html/text.
But when I link the image to the outside link lke:
const back1 = loader.load(
"https://i0.wp.com/3dtextures.me/wp-content/uploads/2022/06/Material_2081.jpg?w=600&ssl=1"
);
everyting works fine. can anyone tell me what am I doing wrong
Thank you