Three.js - 在对象的一部分上显示纹理贴图

时间:2016-02-17 13:33:36

标签: javascript three.js textures

在2d物体的中心/右侧/左侧显示纹理的最简单方法是什么?

我试图玩质地的偏移和重复,但没有运气,我无法在任何地方找到它的答案。

加上,我试过这个:

        someButton.onClick(function () {

            var geom = editor.selected.geometry;
            var uvs = geom.faceVertexUvs[0]; 

            var face0 = uvs[0];
            face0[0] = new THREE.Vector2(0,1);
            face0[1] = new THREE.Vector2(0,0.2);
            face0[2] = new THREE.Vector2(0.5,1);

            var face1 = uvs[1];
            face1[0] = new THREE.Vector2(0,0.2);
            face1[1] = new THREE.Vector2(0.5,0.2);
            face1[2] = new THREE.Vector2(0.5,1);

            geom.uvsNeedUpdate = true;

    });

再次,没有运气。

例如,如果对象是2d方格并且我想让考拉熊图片居中,那么它需要看起来像这样:

koala bear on center of square

我想动态改变纹理的位置 提前谢谢

1 个答案:

答案 0 :(得分:0)

我终于想出了一个很好的解决方案,看看它是否有帮助:

someButton.onClick(function () {

    var obj = editor.selected;
    var width = obj.geometry.parameters.width;
    var height = obj.geometry.parameters.height;
    var geometry = new THREE.PlaneGeometry(width,height, 3, 3);
    var material = obj.material;

    material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping;
    material.map.repeat.x = material.map.repeat.y = 3;

    var materials = [];
    materials.push(material);
    materials.push(new THREE.MeshBasicMaterial({}));

    for (var i = 0; i < 18; i++) {
        if (i == 8 || i == 9) geomtery.faces[i].materialIndex = 0;
        else geomtery.faces[i].materialIndex = 1;
    }

    obj.geomtery = geomtery;
    obj.material = new THREE.MeshFaceMaterial(materials);
    editor.signals.materialChanged.dispatch(obj);

});