How to split and image through an image coming from a web source and apply them through a texture on a threejs object?

Question

Ok, so I am super brand new to html/js and am trying to take in an image source through a web image url and use the parameters of the image to size objects and texture threejs boxgeometry objects. When debugging the image never seems to properly take in the image because the img.height and img.width's are undefined.

I am new so if you answer a thorough explanation is extremely helpful!

code:

document.getElementById('submit').onclick = function(){

        var numPieces;
        var imageURL = document.getElementById('imageInput');
        var myURL = imageURL.value;

        var easy = document.getElementById('easy');
        var hard = document. getElementById('hard');
        var extreme = document.getElementById('extreme');

        if (easy.checked)
            numPieces = 16;
        if (hard.checked)
            numPieces = 64;
        if (extreme.checked)
            numPieces = 100;


        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgSplits = [];
        var img = document.createElement('image');
        img.src = myURL;


        var imagePieces = [];
        var pls = img.height; //only used for debugging and finding image height

        var start = new THREE.BoxGeometry(img.width + 50, img.Height + 50, 2);
        var grid = new THREE.Mesh(start, new THREE.MeshBasicMaterial({color: 0x000000}));
        grid.position.set(((innerWidth / 2) * -1) + 400, innerHeight / 2 - 200, -1010);
        scene.add(grid);


        var innerGridGeo = new THREE.BoxGeometry(img.width, img.height, 2);
        var innerGrid = new THREE.Mesh(innerGridGeo, new THREE.MeshBasicMaterial({color:0xf0f0f0}));
        innerGrid.position.set(((innerWidth / 2) * -1) + 400, innerHeight / 2 - 200, -1005);
        scene.add(innerGrid);

        var pieceWidth = img.width / Math.sqrt(numPieces);
        var pieceHeight = img.height / Math.sqrt(numPieces);


        for(var x = 0; x < Math.sqrt(numPieces); ++x) {
            for(var y = 0; y < Math.sqrt(numPieces); ++y) {
                var canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                var context = canvas.getContext('2d');
                context.drawImage(img, x * img.width, y * img.height, img.width, img.height, 0, 0, canvas.width, canvas.height);
                imagePieces.push(canvas.toDataURL());
            }
        }



        var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
        //renderer.setClearColor(0xf0f0f0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);



       var camera = new THREE.OrthographicCamera( innerWidth / - 2, innerWidth / 2, innerHeight / 2, innerHeight / - 2, 0.1, 3000 );
        camera.position.set(0, 0, 0);


        var scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xf0f0f0 );
        scene.add(camera);


        var canvas = document.getElementById('myCanvas');

        document.body.appendChild( renderer.domElement );

        const textureLoader = new THREE.TextureLoader();
        textureLoader.crossOrigin = "Anonymous";
        const myTexture = textureLoader.load(myURL);

        var objects = [];



        var geometry = new THREE.BoxGeometry(50, 50, 2);
        for (var i = 0; i< numPieces; i++){

            var splitImg = new Image();
            splitImg.src = imagePieces[i];

            var texture = new THREE.TextureLoader().load( splitImg );


            var cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({map: texture}));

            cube.position.x = Math.random() * (window.innerWidth / 3) + 200;
            cube.position.y = -1 * Math.random() * (window.innerHeight  / 2) + 100;
            cube.position.z = -1000;

            scene.add(cube);

            objects.push(cube);

        }

        function render(){
            renderer.render(scene, camera);
        }





        function animate() {
            const dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        animate();




    }

Answer 1

This is because you're updating the img.src property and reading the height without giving it any time to load. Keep in mind that HTML is asynchronous, and things aren't immediately available when you want to get them from the net.

What you need to do is set up an onload event listener, which will give you access to the image's properties after the image has loaded.

From How to get image size (height & width) using JavaScript?

    var img = new Image();
    img.onload = function() {
      alert(this.width + 'x' + this.height);
    }

    img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';