[英]ThreeJS r71 - PlaneBufferGeometry Vertex UV
I have a function that creates a simple THREE.PlaneGeometry
and using an image texture material maps a piece of the image onto the plane.我有一个函数可以创建一个简单的THREE.PlaneGeometry
并使用图像纹理材料将图像的一部分映射到平面上。 What I am trying to figure out is how to convert this logic from using a THREE.PlaneGeometry
to a THREE.PlaneBufferGeometry
, but I cannot figure out how to access the vertices & alter in the same way.我想弄清楚的是如何将此逻辑从使用THREE.PlaneGeometry
转换为THREE.PlaneBufferGeometry
,但我无法弄清楚如何以相同的方式访问顶点和更改。
I apologize if this is a repeat question.如果这是一个重复的问题,我深表歉意。 I did search around & if one existed, I could not find it.我确实搜索过,如果存在,我找不到它。
Here is the function & below it is a sample call for it:这是函数,下面是它的示例调用:
/**
* 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;
}
Here is a sample call:这是一个示例调用:
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 }
});
You can set them directly like this:您可以像这样直接设置它们:
object.geometry.attributes.uv.array[0] = 0.1;
Another way (less likely to break in the future I guess):另一种方式(我猜将来不太可能打破):
var quad_uvs =
[
0.0, 1.0,
1.0, 1.0,
0.0, 0.0,
1.0, 0.0
];
var uvs = new Float32Array( quad_uvs);
object.geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.