Базовые материалы сетки не отображают текстурированный четырехугольник

Я только начинаю изучать Three.js. У меня есть базовый пример webgl. Но теперь, когда я хочу получить аналогичный пример, работающий в среде THREE.js, у меня возникли проблемы с текстурированием.

Текстура загружается с помощью прелоадера createjs.

Я попытался добавить htmlImageElement к документу, чтобы убедиться, что он загружен до создания материала. И это выглядит нормально. Поэтому я не думаю, что моя проблема заключается в создании материала до завершения загрузки текстуры. Как это было проблемой для других.

Также я протестировал текстуру из моего предыдущего примера webgl, и это выдает ту же ошибку, поэтому я не думаю, что используемое изображение недействительно.

Четырехугольник в приведенном ниже примере будет отображаться как синий квадрат, но в тот момент, когда я добавляю свою текстуру к материалу, возникает ошибка. GL_INVALID_OPERATION : glDrawElements: попытка доступа к вершинам вне диапазона в атрибуте 1.

У меня мало опыта работы с Three.js, поэтому я думаю, что проблема в том, как я создаю материал, сцену или геометрию. Хотя у меня действительно закончились идеи.

Я использую TypeScript.

private createPaper(): THREE.Mesh {
        var paperGeo = new THREE.Geometry();
        paperGeo.vertices.push(new THREE.Vector3(1, 1, 0));
        paperGeo.vertices.push(new THREE.Vector3(3, 1, 0));
        paperGeo.vertices.push(new THREE.Vector3(3, 3, 0));
        paperGeo.vertices.push(new THREE.Vector3(1, 3, 0));

        paperGeo.faces.push(new THREE.Face3(0,1,2));
        paperGeo.faces.push(new THREE.Face3(2,3,0));

        var img: HTMLImageElement = m.getAsset("paper0");

        this.paperTex = new THREE.Texture(img, THREE.UVMapping,THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping,
            THREE.LinearFilter, THREE.LinearFilter, THREE.RGBAFormat, THREE.UnsignedByteType, 0);

        var paperMaterial = new THREE.MeshBasicMaterial({
            map:this.paperTex, color: 0x0000dd, side: THREE.DoubleSide
        });

        var paper = new THREE.Mesh(paperGeo, paperMaterial);


        return paper;
    }

typescript three.js createjs
person Culzean    schedule 09.10.2013    source источник
comment
Я получил хороший рендеринг синего четырехугольника с помощью PlaneGeometry. Намного понятнее и проще. И теперь никаких ошибок, просто получаю черный квадрат, когда пытаюсь применить текстуру.   -  person Culzean    schedule 09.10.2013
comment
спасибо WestLangley, теперь работает отлично. Есть ли много накладных расходов, связанных с наличием NeedUpdate true?   -  person Culzean    schedule 09.10.2013
comment
Не беспокойтесь о накладных расходах, если вы не столкнетесь с проблемой производительности.   -  person WestLangley    schedule 09.10.2013

Ответы (1)


arrow_upward
0
arrow_downward

Как минимум, вам нужно указать UV в геометрии.faceVertexUvs[ 0 ]. Но сначала заставьте его работать с THREE.PlaneGeometry.

Если вы создаете текстуру с помощью texture = new THREE.Texture(), вам необходимо установить texture.needsUpdate = true; Альтернативой является использование THREE.ImageUtils.LoadTexture();

три.js р.61

person WestLangley    schedule 09.10.2013