Problems texturing a simple box geometry with multiple side textures


I’m having difficulties creating a simple box, I have 3 textures, one for the top and bottom, 1 for 1 side of the box and 1 for the remaining 3 sides of the box. When I map 1 texture using the TextureLoader() it works fine, but ofcourse I need different textures on some sides. I thought of using the CubeTextureLoader, but this doesn’t work like I want it, because when I rotate the box, the texture changes place. Is this an UV mapping problem?

Kind regards,

This is the code I have btw:

var camera, controls, scene, renderer;
    var mesh;


    function init() {
        // Setup new camera (perspective)
        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);

        // Define camera starting Z position
        camera.position.z = 1000;

        // Setup new OrbitControls
        controls = new THREE.OrbitControls(camera);

        // Set control properties
        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = 1.2;
        controls.panSpeed = 0.8;
        controls.enableZoom = true;
        controls.enabledPan = true;

        // Setup new scene
        scene = new THREE.Scene();

        // Set scene background
        scene.background = new THREE.Color('skyblue');

        // Create a new box texture
        // var boxTexture = new THREE.TextureLoader().load('/assets/textures/box/box_side_label.jpg');

        var boxLoader = new THREE.CubeTextureLoader();

        var boxTexture = boxLoader.load([
            'box_top.jpg', 'box_top.jpg',
            'box_top.jpg', 'box_top.jpg',
            'box_top.jpg', 'box_top.jpg'

        boxTexture.anisotropy = 16;

        var geometry = new THREE.BoxBufferGeometry(256, 256, 256);

        // var material = new THREE.MeshBasicMaterial({ map: boxTexture });
        var material = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: boxTexture, side: THREE.DoubleSide });

        mesh = new THREE.Mesh(geometry, material);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);

    function animate() {


    function render() {
        // Update controls
        // Required if controls.enableDamping or controls.autoRotate are set to true

        // renderer.setRenderTarget(null);
        renderer.render(scene, camera);

Using THREE.CubeTextureLoader won’t work. Instead try to work with an array of materials like demonstrated in the following fiddle:

In this way, you define a material per side that you can freely configure.

1 Like

Thanks a lot @Mugen87

Problem solved! :grin:

1 Like


Is it possible to set multiple texture on one face of cube ? like layer.