ExtrudeGeometry 上的 THREE.JS 纹理映射答案

【问题标题】：THREE.JS Texture Mapping on ExtrudeGeometryExtrudeGeometry 上的 THREE.JS 纹理映射
【发布时间】：2018-09-17 19:25:29
【问题描述】：

我正在解决 three.js 和 ExtrudeGeometry 的问题。我确实有一个由几个单独的框架组成的波浪状结构。它们中的每一个都使用 ExtrudeGeometry 进行拉伸。

我想将纹理应用到“环绕”结构的结构的每一帧。由于某种原因（可能是错误的 UV 映射？）纹理无法正确显示在波浪状表面不水平的挤出边缘上。（图片中有一些小部分纹理正确包裹）。我正在使用以下脚本来应用纹理：

// create some simple Geometry
var shape = new THREE.Shape();

shape.moveTo( 0,0 );
shape.lineTo( 0,10 );
shape.lineTo( 100,7 );
shape.lineTo( 100,0 );

var extrudeSettings = {
    steps: 2,
    amount: 10,
    bevelEnabled: false,
    bevelThickness: 0,
    bevelSize: 0,
    bevelSegments: 0
};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var texture = new THREE.Texture( image );

texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.repeat.set( 0.1, 0.1 );

var material = new THREE.MeshBasicMaterial( {map: texture} );
var mesh = new THREE.Mesh( geometry, material ) ;

scene.add( mesh );

非常感谢每一个帮助！干杯！

编辑：

我创建了这张图片来更好地说明问题。白色箭头显示纹理应该如何环绕对象。在一些非常罕见的地方它确实如此！

【问题讨论】：

一方面，您需要设置THREE.RepeatWrapping，而不是。
感谢您指出这一点。但并没有解决问题...
不要使用ExtrudeGeometry，而是考虑从一个基本的盒子开始并修改顶点。这是一个开始：jsfiddle.net/3trnvd2z。确保你理解每一行代码。如果你只打算使用BasicMaterial，那么你不需要场景灯，你可以忽略校正法线。
非常感谢，韦斯特兰利！这太棒了。我认为纹理以错误的方式包裹，因为 UV 坐标高于 1。当我将坐标缩小 1000 并将模型放大 1000 倍时，一切正常...

标签： javascript three.js

【解决方案1】：

看看这个例子 https://threejs.org/examples/?q=geome#webgl_geometry_shapes

在第 70 行有一条注释指出必须将 texture.repeat 设置为 (0.008, 0.008)

【讨论】：