TextureLoader does not load png image

Questions
1

I recently got into node and immediatly wante to build 3d things on my website so I saw a video on yt about three.js. At this point I am trying to render a play card on my scene. First of all, i assume that the lights and camera are okay because I can see the “depth” of the card as white and I can not see the image that I set to face of the card. If i remove “map:xxxxx” the face gets white too.
Here is the code for main.js:

import * as THREE from 'three';

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';

import{CARDS} from './cards';

const gltfLoader = new GLTFLoader()

//Scene

const scene=new THREE.Scene()

//Create objects

/*const geometry=new THREE.SphereGeometry(5,64,64)

const material= new THREE.MeshStandardMaterial({color:"#00ff83",})

const mesh=new THREE.Mesh(geometry,material)*/

CARDS.forEach(function(card){

scene.add(card)

console.log(card)

})

//Light

const light=new THREE.PointLight(0xffffff,1,100)

const ambientLight = new THREE.AmbientLight(0xA3A3A3, 1)

scene.add(ambientLight)

light.position.set(0,10,7)

scene.add(light)

//Camera

const camera=new THREE.PerspectiveCamera(45,800/600)

camera.position.set(0,10,6)

camera.lookAt(new THREE.Vector3(0,6,2))

scene.add(camera)

//Renderer

const canvas=document.querySelector('.webgl')

const renderer=new THREE.WebGL1Renderer({canvas})

renderer.setSize(800,600)

renderer.render(scene,camera)

And here is the code for cars.js:

import{
    MeshBasicMaterial,
    BoxGeometry,
    Mesh,
    SRGBColorSpace,
    TextureLoader,
    Vector3
} from 'three';

const textureLoader=new TextureLoader();
const cardGeo = new BoxGeometry(0.4,0.7,0.03);

const citizen1Texture = textureLoader.load('textures/citizen1.png');
citizen1Texture.colorSpace=SRGBColorSpace;

const coverTexture = textureLoader.load('textures/cardback.png');
coverTexture.colorSpace=SRGBColorSpace;

const card1Mat=[
    new MeshBasicMaterial(),
    new MeshBasicMaterial(),
    new MeshBasicMaterial(),
    new MeshBasicMaterial(),
    new MeshBasicMaterial( {map:citizen1Texture} ),
    new MeshBasicMaterial( {map:coverTexture} )
];

const CARDS=[];

const cardsPositions=[
    new Vector3(0.5,7.005,3.21)
];

function configureCard(card,pos,name){
    card.name-name;
    card.castShadow=true;
    card.position.copy(pos[0]);
    CARDS.push(card);
}

const card1 = new Mesh(cardGeo,card1Mat);
configureCard(card1,cardsPositions,'card1');

export{CARDS}

I also know that the path to images are right because I can see when i write in console that the object has a link to localhost…etc at texture attribute and if i acces it , it return me the photo.

Fără titlu3
Fără titlu31276×912 164 KB

2

Did you resolve the problem? The load function has call-backs … you can use them to see whether the loading finished well. Have you tried this? You can also try with another PNG file to test whether there is a problem with the PNG itself, or with the environment. If it is not the PNG, you can start simplifying the code – for example, you can start by loading only one texture and apply it to all sides of the card (i.e. single material and one texture only, not array of materials).

BTW what is the meaning of the first line in this function? Should it be '=' ?

function configureCard(card,pos,name){
    card.name-name;
    card.castShadow=true;
    card.position.copy(pos[0]);
    CARDS.push(card);
}