Problems texturing a simple box geometry with multiple side textures

Questions
, ,
1

Hello,

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,
Jonas

2

This is the code I have btw:

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

    init();
    animate();

    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();
        boxLoader.setPath('/assets/textures/box/');

        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);
        scene.add(mesh);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }

    function animate() {
        requestAnimationFrame(animate);

        render();
    }

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

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

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

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

1 Like
4

Thanks a lot @Mugen87

Problem solved! :grin:

1 Like
5

Hi,

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