javascript - 如何通过来自网络源的图像进行分割和成像，并通过 Threejs 对象上的纹理应用它们？

Question

好吧，所以我对 html/js 非常陌生，我正在尝试通过 Web 图像 url 获取图像源，并使用图像的参数来调整对象的大小和纹理 Threejs boxgeometry 对象。调试时，图像似乎永远无法正确接收图像，因为 img.height 和 img.width 未定义。

我是新人，所以如果您回答，完整的解释将非常有帮助!

代码:

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

这是因为您正在更新 img.src 属性并读取高度，而没有给它任何加载时间。请记住，HTML 是异步的，当您想从网络获取内容时，它们不会立即可用。

您需要做的是设置一个 onload event listener ，这将使您可以在图像加载后访问图像的属性。

来自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';