Different Textures on each face of cube

I’ve been having the most difficult time rendering a 3D cube that has a different image for each side of the cube. I’m trying to have my images render like the model shown in the picture provided but the images of the letters won’t show up once I mesh the geometry and material together. The entire cube disappears and a black background shows when I add all my loaders. I am running a Live Server for this html file so I’m not sure if that’s the problem since the images are being loaded locally. If anyone has any advice, I’d greatly appreciate it!

Sorry, forgot to mention I don’t get any errors on my console when refreshing the page.

Model:

My Code:
import * as THREE from “https://threejs.org/build/three.module.js

let scene, camera, renderer, cube;

function init(){
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //create shape
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const loader = new THREE.TextureLoader();
    const cubeMaterials = [
        new THREE.MeshBasicMaterial({ map: loader.load('images/d.png') }), //right side
        new THREE.MeshBasicMaterial({ map: loader.load('images/a.png')}), //left side
        new THREE.MeshBasicMaterial({ map: loader.load('images/n.png')}), //top side
        new THREE.MeshBasicMaterial({ map: loader.load('images/k.png')}), //bottom side
        new THREE.MeshBasicMaterial({ map: loader.load('images/a.png')}), //front side
        new THREE.MeshBasicMaterial({ map: loader.load('images/m.png')}), //back side
    ];

    //create material, color, or image texture
    cube = new THREE.Mesh(geometry, cubeMaterials);
    scene.add(cube);

    camera.position.z = 5;
}

//animation
function animate(){
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

//resized shape based on windows
function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false);

init();
animate();

That’s weird. check for cross origin warning, try with lambert material and make sure to add light

you have to set your mesh like this

new THREE.MeshBasicMaterial({ map: loader.load(‘images/a.png’) ,transparent:true, side:THREE.DoubleSide })

i have tried it is working only if you add in your mesh those option
,transparent :true, side:THREE.DoubleSide
for all face

This got it working wow. Seriously, thank you so much I really appreciate it.

i ve just seen this not as perfect as i wish . in some case , according angle of view when cube is turning ,i can see a face like opacity was set to 1 . need help of somebody else to set mesh with good option there is something wrong .

but i ve been able to do exactly what you need but i ve used blender

use this code to load cubeletter.glb in your init() ( you have to import GLTFLoader.js)

const loaderCube = new THREE.GLTFLoader();

loaderCube.load( ‘images/cubeletter.glb’, function ( gltf ) {

cube = gltf.scene;

scene.add( cube);

}, undefined, function ( error ) {

console.error( error );

} );

cubeletter.glb (71.1 KB)

indeed , add a background image in your scene, and you will see the problem that transparent is not very well in all case when cube is rotated . there is a problem but idon’t understand what happen exactly

var bgTexture = loader.load(‘images/your_background_picture.jpg’);
scene.background = bgTexture;

hello,

ok i ve found the correct option to set .

see all those two options

  1. from glft import which work well
    ;uuid : 3FAF105E-6527-4C61-89CA-7D2454E7D852
    ;name : d
    ;type : MeshStandardMaterial
    ;fog : true
    ;blending : 1
    ;side : 2
    ;flatShading : false
    ;vertexColors : false
    ;opacity : 1
    ;transparent : false
    ;blendSrc : 204
    ;blendDst : 205
    ;blendEquation : 100
    ;blendSrcAlpha : null
    ;blendDstAlpha : null
    ;blendEquationAlpha : null
    ;depthFunc : 3
    ;depthTest : true
    ;depthWrite : true
    ;stencilWriteMask : 255
    ;stencilFunc : 519
    ;stencilRef : 0
    ;stencilFuncMask : 255
    ;stencilFail : 7680
    ;stencilZFail : 7680
    ;stencilZPass : 7680
    ;stencilWrite : false
    ;clippingPlanes : null
    ;clipIntersection : false
    ;clipShadows : false
    ;shadowSide : null
    ;colorWrite : true
    ;precision : null
    ;polygonOffset : false
    ;polygonOffsetFactor : 0
    ;polygonOffsetUnits : 0
    ;dithering : false
    ;alphaTest : 0.5
    ;premultipliedAlpha : false
    ;visible : true
    ;toneMapped : true
    ;userData : [object Object]
    ;version : 0
    ;defines : [object Object]
    ;color : [object Object]
    ;roughness : 0.5
    ;metalness : 0
    ;map : [object Object]
    ;lightMap : null
    ;lightMapIntensity : 1
    ;aoMap : null
    ;aoMapIntensity : 1
    ;emissive : [object Object]
    ;emissiveIntensity : 1
    ;emissiveMap : null
    ;bumpMap : null
    ;bumpScale : 1
    ;normalMap : null
    ;normalMapType : 0
    ;normalScale : [object Object]
    ;displacementMap : null
    ;displacementScale : 1
    ;displacementBias : 0
    ;roughnessMap : null
    ;metalnessMap : null
    ;alphaMap : null
    ;envMap : null
    ;envMapIntensity : 1
    ;refractionRatio : 0.98
    ;wireframe : false
    ;wireframeLinewidth : 1
    ;wireframeLinecap : round
    ;wireframeLinejoin : round
    ;skinning : false
    ;morphTargets : false
    ;morphNormals : false

  2. from material which have been created with three tools

;uuid : BD80E870-951F-4466-84AC-BB59BE0E38E5
;name :
;type : MeshBasicMaterial
;fog : true
;blending : 1
;side : 2
;flatShading : false
;vertexColors : false
;opacity : 1
;transparent : true
;blendSrc : 204
;blendDst : 205
;blendEquation : 100
;blendSrcAlpha : null
;blendDstAlpha : null
;blendEquationAlpha : null
;depthFunc : 3
;depthTest : true
;depthWrite : true
;stencilWriteMask : 255
;stencilFunc : 519
;stencilRef : 0
;stencilFuncMask : 255
;stencilFail : 7680
;stencilZFail : 7680
;stencilZPass : 7680
;stencilWrite : false
;clippingPlanes : null
;clipIntersection : false
;clipShadows : false
;shadowSide : null
;colorWrite : true
;precision : null
;polygonOffset : false
;polygonOffsetFactor : 0
;polygonOffsetUnits : 0
;dithering : false
;alphaTest : 0
;premultipliedAlpha : false
;visible : true
;toneMapped : true
;userData : [object Object]
;version : 0
;color : [object Object]
;map : [object Object]
;lightMap : null
;lightMapIntensity : 1

i found the main difference which work is to set alphaTest : 0.5

like this
new THREE.MeshBasicMaterial({ map: loader.load(‘jpg/a.png’),side:THREE.DoubleSide, alphaTest:0.5}),

option transparent is not important work if it is false or true but alphaTest option has to be set to 0.5

im not able to explain why this the main option and how it is working .

you need expert of three.js to explain this option

live demo at 3D demo : Cube, on nicer.app