Javascript ThreeJS r71-平面缓冲几何体顶点UV

Javascript ThreeJS r71-平面缓冲几何体顶点UV,javascript,three.js,Javascript,Three.js,我有一个函数,可以创建一个简单的THREE.PlaneGeometry,并使用图像纹理材质将图像的一部分映射到平面上。我试图弄清楚的是如何将这个逻辑从使用THREE.PlaneGeometry转换为THREE.PlaneBufferGeometry,但我无法弄清楚如何以相同的方式访问顶点和更改 如果这是一个重复的问题,我道歉。我确实到处找过&如果有,我就找不到 下面是函数&下面是函数的示例调用: /** * options: * imageSize: { w: #, h: # } - si

我有一个函数,可以创建一个简单的
THREE.PlaneGeometry
,并使用图像纹理材质将图像的一部分映射到平面上。我试图弄清楚的是如何将这个逻辑从使用
THREE.PlaneGeometry
转换为
THREE.PlaneBufferGeometry
,但我无法弄清楚如何以相同的方式访问顶点和更改

如果这是一个重复的问题,我道歉。我确实到处找过&如果有,我就找不到

下面是函数&下面是函数的示例调用:

/**
 * options:
 *  imageSize: { w: #, h: # } - size of the source image
 *  planeSize: { w: #, h:# } - size of the actual plane to create
 *  position: { x: #, y:#, z: # } - position of the next plane
 *  material: material - the material to apply
 *  clipRect: { x: #, y:#, w: #, h:# } - the part of the image to clip
 *      x and y from the bottom left of the image.
 *      w and h width and height of the image region,
 *   name: name of the mesh
 */
function createPlane( opts ) {

    var i, faces, v, vertexes, point, p,
        plane = new THREE.PlaneGeometry( opts.planeSize.w, opts.planeSize.h, 1, 1 ),
        mesh = new THREE.Mesh(plane, opts.material),
        imgRect = {
            x: opts.clipRect.x / opts.imageSize.w,
            y: opts.clipRect.y / opts.imageSize.h,
            w: opts.clipRect.w / opts.imageSize.w,
            h: opts.clipRect.h / opts.imageSize.h
        };

    if (opts.name !== '') {
        mesh.name = opts.name;
    }

    if (opts.position !== null) {
        mesh.position.set(
            opts.position.x,
            opts.position.y,
            opts.position.z
        );
    }

    for( i = 0; i < plane.faceVertexUvs.length; i++) {
        faces = plane.faceVertexUvs[i];
        for( v = 0; v < faces.length; v++) {
            vertexes = faces[v];
            for( p = 0; p < vertexes.length; p ++ ) {
                point = vertexes[p];
                point.x = imgRect.x + ( point.x * imgRect.w );
                point.y = imgRect.y + ( point.y * imgRect.h );
            }
        }
    }
    return mesh;
}

您可以这样直接设置它们:

object.geometry.attributes.uv.array[0]=0.1

另一种方式(我想未来不太可能破裂):

var quad\u uvs=
[
0.0, 1.0,
1.0, 1.0,
0.0, 0.0,
1.0, 0.0
];
var uvs=新的Float32Array(quad_uvs);
object.geometry.addAttribute('uv',新的三个.BufferAttribute(uvs,2));

(1)在结尾处尝试以下操作:
bufferGeometry=new THREE.bufferGeometry.fromGeometry(平面)(2)与其修改UV,为什么不设置
myTexture.offset
,以及
myTexture.repeat
?重新设置fromGeometry(…),我将尝试一下。re texture.offset——我正在尝试最小化用于内存管理的纹理和材质的数量。这允许我在多个网格上使用一种材质&偏移每个网格的位置。据我所见,planegeometry工作正常,但planegeometry在渲染uv更新时存在一些问题
var plane = createPlane({
        imageSize: { w: 1024, h: 1024},
        planeSize: { w: 23, h: 31 },
        position: null,
        material: new THREE.MeshBasicMaterial({
            map: myTexture, // defined elsewhere
            transparent: true
        }),
        name: 'myPlane',
        clipRect: { x: 958, y: 226, w: 23, h: 31 }
    });