我已经基于“平面几何”为Three.js创建了一个自定义几何函数。
一切正常，除了我不知道如何正确显示紫外线。
我每平方使用4个三角形，而THREE.PlaneGeometry仅每平方使用2个三角形。
PlaneGeometry UV的代码如下所示：
var uva = new THREE.Vector2( ix / gridX, 1 - iz / gridZ );
var uvb = new THREE.Vector2( ix / gridX, 1 - ( iz + 1 ) / gridZ );
var uvc = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - ( iz + 1 ) / gridZ );
var uvd = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - iz / gridZ );
我的代码在源代码中：
var uva = new THREE.Vector2( a );
var uvb = new THREE.Vector2( b );
var uvc = new THREE.Vector2( c );
var uvd = new THREE.Vector2( d );
var uve = new THREE.Vector2( e );
显然那是错误的。但是我尝试使用PlaneGeometry代码，但得到了奇怪的失真，并且不确定如何计算正确的位置。
这个：
var uva = new THREE.Vector2( ix / gridX, 1 - iz / gridZ );
var uvb = new THREE.Vector2( ix / gridX, 1 - ( iz + 1 ) / gridZ );
var uvc = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - ( iz + 1 ) / gridZ );
var uvd = new THREE.Vector2( (( ix ) / gridX) + gridX, 1 - iz / gridZ );
var uve = new THREE.Vector2( ( ix + 1 ) / gridX, 1 - iz / gridZ );
给我这个：BAD UV
我在THREE.JS ChatRoom中得到了某种答案，但我听不懂，因此该人也没有详细说明...
（Q）.. UV的Vector2是否不应该与顶点位于同一位置？
（A）没有UV是可以映射到纹理的向量
具有512x512的纹理以及[0.25，0.75]的UV，它将映射到
纹理中位于每个顶点256、768的像素具有uv
这意味着该顶点将映射到如上所述的纹理中
这是针对顶点的每个面以及
然后使用这三个uvs对人脸进行插值
因此，这并没有消除我的困惑。.我不理解[0.25，0.75]部分。或者每个顶点都有纹理。点如何具有纹理。
有人能指出我正确的方向吗？
我需要知道的是紫外线的位置。但是一个例子会很棒。
如果您想看一下，这里是消息来源：
THREE.DiamondGeometry = function ( width, height, widthSegments, heightSegments ) {
THREE.Geometry.call( this );
this.width = width;
this.height = height;
this.widthSegments = widthSegments || 1;
this.heightSegments = heightSegments || 2;
var long_row = this.widthSegments + 1;
var short_row = this.widthSegments;
// First Row is the long_row, the ternary statement will toggle this.
var current_row = short_row;
var gridY = 0;
var vX = width / 2, vY = height / 2;
var ix, iz;
var width_half = width / 2;
var height_half = height / 2;
var gridX = this.widthSegments;
var gridZ = this.heightSegments;
var gridX1 = gridX + 1;
var gridZ1 = gridZ + ( gridZ - 2) + 1;
var segment_width = this.width / gridX;
var segment_height = this.height / gridZ;
var normal = new THREE.Vector3( 0, 0, 1 );
// Height Segments Verticies
for ( iz = 0; iz < (gridZ1 + 1) * 2; iz ++ ) {
// Ternary Operator:
current_row === long_row ? (current_row = short_row, vX = width_half - (segment_width / 2) ) : (current_row = long_row, vX = width_half );
// Width Segment Verticies
for ( ix = 0; ix < current_row; ix ++ ) {
var x = ix * segment_width - vX ;
var y = (iz * segment_height - vY) / 2 - (vY / 2);
this.vertices.push( new THREE.Vector3( x, - y, 0 ) );
}
}
for ( iz = 0; iz < gridZ ; iz ++ ) {
for ( ix = 0; ix < gridX; ix ++ ) {
var a = ix + gridX * iz + (iz * gridX1) ;
var b = a + 1;
var c = a + gridX1;
var d = c + gridX;
var e = d + 1;
// THIS IS THE BAD PART THAT I NEED TO CALCULATE THE UV POSITIONS FOR:
var uva = new THREE.Vector2( a );
var uvb = new THREE.Vector2( b );
var uvc = new THREE.Vector2( c );
var uvd = new THREE.Vector2( d );
var uve = new THREE.Vector2( e );
// UP
var face = new THREE.Face3( c, b, a );
face.normal.copy( normal );
face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );
this.faces.push( face );
this.faceVertexUvs[ 0 ].push( [ uva, uvb, uvc ] );
// DOWN
face = new THREE.Face3( e, c, d );
face.normal.copy( normal );
face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );
this.faces.push( face );
this.faceVertexUvs[ 0 ].push( [ uvd, uvc.clone(), uve ] );
// LEFT
face = new THREE.Face3( d, c, a );
face.normal.copy( normal );
face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );
this.faces.push( face );
this.faceVertexUvs[ 0 ].push( [ uva.clone(), uvc.clone(), uvd.clone() ] );
// RIGHT
face = new THREE.Face3( e, b, c );
face.normal.copy( normal );
face.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );
this.faces.push( face );
this.faceVertexUvs[ 0 ].push( [ uvc.clone(), uvb.clone(), uve.clone() ] );
}
}
this.computeCentroids();
};
THREE.DiamondGeometry.prototype = Object.create( THREE.Geometry.prototype );
最佳答案
看到这张图片：
http://cgkit.sourceforge.net/tutorials/_images/uvmap.png
如此处所述，对于没有纹理重复的1个纹理，UV坐标在（0,0）到（1,1）的范围内。如果您有一个四边形平面并将UV分配给顶点（如图像中所示），则整个纹理将显示在四边形上。如果您添加了边缘环/对例如四边形进行细分的四边形，但是仍然希望不重复地强制显示纹理，则需要计算介于两个顶点之间在UV空间中的值。例如，中间的顶点（来自镶嵌效果）现在是UV（0.5，0.5）
中段顶部的那个是（0，0.5）。看看PlaneGeometry是如何做到的，并尝试从中学习^^
关于javascript - (Three.js)正确自定义网格UV显示纹理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19798637/