1

我需要在 ExtrudeGeometry 对象上应用纹理。

形状是圆形，拉伸路径由 2 个向量组成：

  • 一为顶。
  • 一个用于底部。

我没有选择 cylinderGeometry，因为我需要将几何图形的顶部/底部部分放置在精确的位置，而且创建的几何图形并不总是完全垂直的（例如斜圆柱）。

这是一个部分的图片（一个顶部矢量，一个底部矢量和这两个矢量之间的挤压形状）。

部分

以及我正在尝试应用的纹理图片。

部分

我想要做的就是将这张图片包裹在我的对象的垂直边上一次。

这是我的代码：

var biVectors = [ new THREE.Vector3( this.startVector.x, this.startVector.y, this.startVector.z ) , new THREE.Vector3( this.endVector.x, this.endVector.y, this.endVector.z ) ];
    var wellSpline = new THREE.SplineCurve3(biVectors);
    var extrudeSettings = {
        steps : 1,
        material: 0,
        extrudeMaterial: 1,
        extrudePath : wellSpline
    };

    var pts = [];
    for (var i = 0; i <= this.segments; i++) {
        var theta = (i / this.segments) * Math.PI * 2;
        pts.push( new THREE.Vector3(Math.cos(theta) * this.diameter , Math.sin(theta) * this.diameter, 0) );            
    }
    var shape = new THREE.Shape( pts );
    var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

    var texture = THREE.ImageUtils.loadTexture( 'textures/sampleTexture2.jpg' );
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.flipY = false;

    var material = new THREE.MeshBasicMaterial( { map: texture } );

    var slice = new THREE.Mesh( geometry, material );
    var faceNormals   = new THREE.FaceNormalsHelper( slice );
    console.log("face normals: ", faceNormals);
    myCanvas.scene.add( faceNormals );
    slice.parentObject = this;
    myCanvas.scene.add( slice );
    this.object3D = slice;
}

现在，如您所见，映射根本不正确。

在过去的 3 天里，我已经阅读了很多关于这个问题的信息。但是由于我是 THREE.JS 的新手，所以我的选择已经不多了。

我想我必须重新定义 UV 坐标，但我不知道该怎么做。

在 THREE.JS 中，将纹理包裹在类似圆柱体的对象上似乎绝非易事。

有人可以帮我解决这个问题吗？

4

0 回答 0