three.js自适应平铺贴图

1,253 阅读1分钟

cscs6.jpg

uv实现自适应平铺贴图实现;

this.assignUVs = function (geometry) {
        geometry.computeBoundingBox(); // 获取最大边框
        var max = geometry.boundingBox.max, 
            min = geometry.boundingBox.min; // 计算最大和最小点;
        var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
        var range = new THREE.Vector2(max.x - min.x, max.y - min.y); // 平铺区域;
        var faces = geometry.faces; // 模型的面
        geometry.faceVertexUvs[0] = [];
        for (var i = 0; i < faces.length; i++) {
        // 三角面
            var v1 = geometry.vertices[faces[i].a],
                v2 = geometry.vertices[faces[i].b],
                v3 = geometry.vertices[faces[i].c];
            geometry.faceVertexUvs[0].push([
                new THREE.Vector2((v1.x + offset.x) / range.x, (v1.y + offset.y) / range.y),
                new THREE.Vector2((v2.x + offset.x) / range.x, (v2.y + offset.y) / range.y),
                new THREE.Vector2((v3.x + offset.x) / range.x, (v3.y + offset.y) / range.y)
            ]);
        }
        //更新模型材质贴图;
        geometry.uvsNeedUpdate = true;
    }