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.
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();
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 ) {
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;
