This is my cube with texture:
const textureLoader: TextureLoader = new TextureLoader();
const textureArray: MeshBasicMaterial[] = [
new MeshBasicMaterial({ map: textureLoader.load("./model/front.jpeg") }),
new MeshBasicMaterial({ map: textureLoader.load("./model/back.jpeg") }),
new MeshBasicMaterial({ map: textureLoader.load("./model/top.jpeg") }),
new MeshBasicMaterial({ map: textureLoader.load("./model/bottom.jpeg") }),
new MeshBasicMaterial({ map: textureLoader.load("./model/left.jpeg") }),
new MeshBasicMaterial({ map: textureLoader.load("./model/right.jpeg") }),
];
textureArray.forEach((_, index) => {
textureArray[index].side = BackSide;
});
const cubeGeometry: BoxGeometry = new BoxGeometry(5, 5, 5);
const cube: Mesh = new Mesh(cubeGeometry, textureArray);
scene.add(cube);
I got no errors and the screen is black. what's wrong?
My bundler is parcel
Try it like so:
let camera, scene, renderer;
let mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 4;
scene = new THREE.Scene();
const textureLoader = new THREE.TextureLoader().setPath('https://threejs.org/examples/textures/cube/Bridge2/');
const materials = [
new THREE.MeshBasicMaterial({
map: textureLoader.load("negx.jpg")
}),
new THREE.MeshBasicMaterial({
map: textureLoader.load("negy.jpg")
}),
new THREE.MeshBasicMaterial({
map: textureLoader.load("negz.jpg")
}),
new THREE.MeshBasicMaterial({
map: textureLoader.load("posx.jpg")
}),
new THREE.MeshBasicMaterial({
map: textureLoader.load("posy.jpg")
}),
new THREE.MeshBasicMaterial({
map: textureLoader.load("posz.jpg")
}),
];
materials.forEach((_, index) => {
materials[index].side = THREE.BackSide;
});
const cubeGeometry = new THREE.BoxGeometry();
mesh = new THREE.Mesh(cubeGeometry, materials);
scene.add(mesh);
//
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/three@0.139.2/build/three.min.js"></script>