Displaying multiple images on the face of a cylinder using three.js

Question

Displaying multiple images on the face of a cylinder using three.js

I am struggling to showcase multiple images on the outer surface (not the top or bottom) of a rotating cylinder using three.js. I have managed to display one image successfully, but my objective is to exhibit several side by side. Despite adding three textures to my materials array, only the first one appears. Any assistance would be greatly appreciated.

<html>
<head>
    <title>My Initial three.js Creation</title>
    <span>Test</span>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.y = 24;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var diameter = 20;
        var geometry = new THREE.CylinderGeometry( diameter, diameter, 15, 32 );

        var texture1 = new THREE.TextureLoader().load( 'images/image1.jpg' );
        var texture2 = new THREE.TextureLoader().load( 'images/image2.jpg' );
        var texture3 = new THREE.TextureLoader().load( 'images/image3.png' );

        texture1.wrapS = THREE.RepeatWrapping;
        //texture.wrapT = THREE.RepeatWrapping;
        //texture.repeat.set( 1, 4 );

        var materials = [];
        materials.push(new THREE.MeshBasicMaterial({ map: texture1 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture2 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture3 }));

        var cylinder = new THREE.Mesh( geometry, materials );
        cylinder.position.y = 25;
        scene.add( cylinder);

        camera.position.z = 40;


        function render() {
            requestAnimationFrame(render);
            //cylinder.rotation.z += 0.05;
          cylinder.rotation.y += 0.005;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>

javascript three.js

Answer 1

Answer №1

If you're looking to add multiple textures to your cylinder, there's a simple solution that doesn't involve merging them into a single texture. You can render three cylinder wedges, each with its own unique texture. Here's an example of how you could achieve this:

var group = new THREE.Group();
scene.add( group );

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 10, 16, 1, false, 0, 2 * Math.PI / 3 ); // Define a 1/3 cylinder wedge

var endCapMaterial = new THREE.MeshBasicMaterial();

// Create and position the meshes
mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture1 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 0, 0 );
group.add( mesh );

mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture2 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 2 * Math.PI / 3, 0 );
group.add( mesh );

mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture3 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 4 * Math.PI / 3, 0 );
group.add( mesh );

This code snippet is compatible with three.js version r.89.

Answer 2

If you're looking to add multiple textures to your cylinder, there's a simple solution that doesn't involve merging them into a single texture. You can render three cylinder wedges, each with its own unique texture. Here's an example of how you could achieve this:

var group = new THREE.Group();
scene.add( group );

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 10, 16, 1, false, 0, 2 * Math.PI / 3 ); // Define a 1/3 cylinder wedge

var endCapMaterial = new THREE.MeshBasicMaterial();

// Create and position the meshes
mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture1 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 0, 0 );
group.add( mesh );

mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture2 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 2 * Math.PI / 3, 0 );
group.add( mesh );

mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture3 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 4 * Math.PI / 3, 0 );
group.add( mesh );

This code snippet is compatible with three.js version r.89.

Answer 3

Answer №2

One alternative method involves assigning textures to each face of your geometry by utilizing the geometry.faces[i].materialIndex property. In this scenario, it's crucial to ensure that the number of radial segments is divisible by three (for instance, when dealing with 3 textures).

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<html>
<head>
    <title>Creating a three.js application</title>
    <style>
        body { margin: 0; overflow:hidden;}
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.y = 24;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var diameter = 20;
    var radialSegments = 33;
    var geometry = new THREE.CylinderGeometry( diameter, diameter, 15, radialSegments );
    
    var img1 = "http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX9108127.jpg";
    var img2 = "http://d2gg9evh47fn9z.cloudfront.net/thumb_COLOURBOX8923432.jpg";
    var img3 = "http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX19377428.jpg";

    var texture1 = new THREE.TextureLoader().load( img1 );
    var texture2 = new THREE.TextureLoader().load( img2 );
    var texture3 = new THREE.TextureLoader().load( img3 );

    THREE.DefaultLoadingManager.onLoad = function () {
        var materials = [];
        materials.push(new THREE.MeshBasicMaterial({ map: texture1 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture2 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture3 }));
        var l = geometry.faces.length;
        for (var i = 0; i < l; i++) {
            if (geometry.faces[i].normal.y !== 0) {
                // these are caps
                geometry.faces[i].materialIndex = 0;
            } else {
                // each segment has 2 faces
                geometry.faces[i].materialIndex = Math.floor(i * 3 / (radialSegments * 2));
            }
        }

        var cylinder = new THREE.Mesh( geometry, materials);
        cylinder.position.y = 25;
        scene.add( cylinder);

        camera.position.z = 40;

        function render() {
            requestAnimationFrame(render);
            cylinder.rotation.y += 0.005;
            renderer.render(scene, camera);
        }
        render();
    }
</script>
</body>

Answer 4

One alternative method involves assigning textures to each face of your geometry by utilizing the geometry.faces[i].materialIndex property. In this scenario, it's crucial to ensure that the number of radial segments is divisible by three (for instance, when dealing with 3 textures).

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<html>
<head>
    <title>Creating a three.js application</title>
    <style>
        body { margin: 0; overflow:hidden;}
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.y = 24;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var diameter = 20;
    var radialSegments = 33;
    var geometry = new THREE.CylinderGeometry( diameter, diameter, 15, radialSegments );
    
    var img1 = "http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX9108127.jpg";
    var img2 = "http://d2gg9evh47fn9z.cloudfront.net/thumb_COLOURBOX8923432.jpg";
    var img3 = "http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX19377428.jpg";

    var texture1 = new THREE.TextureLoader().load( img1 );
    var texture2 = new THREE.TextureLoader().load( img2 );
    var texture3 = new THREE.TextureLoader().load( img3 );

    THREE.DefaultLoadingManager.onLoad = function () {
        var materials = [];
        materials.push(new THREE.MeshBasicMaterial({ map: texture1 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture2 }));
        materials.push(new THREE.MeshBasicMaterial({ map: texture3 }));
        var l = geometry.faces.length;
        for (var i = 0; i < l; i++) {
            if (geometry.faces[i].normal.y !== 0) {
                // these are caps
                geometry.faces[i].materialIndex = 0;
            } else {
                // each segment has 2 faces
                geometry.faces[i].materialIndex = Math.floor(i * 3 / (radialSegments * 2));
            }
        }

        var cylinder = new THREE.Mesh( geometry, materials);
        cylinder.position.y = 25;
        scene.add( cylinder);

        camera.position.z = 40;

        function render() {
            requestAnimationFrame(render);
            cylinder.rotation.y += 0.005;
            renderer.render(scene, camera);
        }
        render();
    }
</script>
</body>

Displaying multiple images on the face of a cylinder using three.js

Answer №1

Answer №2

Similar questions

Prevent cross-site scripting (XSS) when using vue toasted for displaying notifications

Could the THREE.raycaster be utilized for implementing enemy AI?

Executing an Ajax SPARQL request in Firefox

Exploring the colors of legend navigation icons in Google Pie charts

Fresh React framework

Various materials including point cloud material and line basic material

Unable to trigger jQuery .post() function

What is the process for retrieving information from a retail outlet?

How can I extract the URL from the event listener in Cordova's in-app browser event and then automatically close it once a specific URL is reached?

Do not forget to implement Array.find when working with the useSWR hook in Next.js

Move the focus to the previous input field by removing the key

Tips for closing a sidecart by clicking outside of it

Issue encountered when trying to display a view in Laravel using PHP

Trigger route handlers on both, successful authentication and failure, when using passport.js with a Node.js and Express.js REST API

The close icon in the ReactStrap modal is not being displayed properly, and I need to know how to utilize the header with a different tag

What is the best way to convert the response from an XMLHttpRequest to a JavaScript array and display it

Tips for using ng-repeat in AngularJs to filter (key, value) pairs

Transfer an HTML file object between two <input type="file"> elements

What is the best method for calculating the total of a column field within an array in Angular 9.1.9?

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)