如何为Three.js样条拉伸创建UV纹理？对于道路，公路和铁路将非常有用

Question

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9RZVd2N2k5LnBuZyJ9” alt =“显示问题的我的jsfiddle”>

[如果有人可以帮助我进行纹理处理，这对于想要修路或铁路等的人来说真的很有用。

我有一个形状，然后用花键将其拉伸。而且我还沿着样条线设置了一个动画（可能是汽车或火车）。但是我正在努力使纹理沿着路径前进。

我创建了小提琴http://jsfiddle.net/neonDog/tpuczbyw/52/

我已经尝试过UVGenerator的拉伸选项-但我不知道自己在做什么，甚至无法使纹理看起来与默认设置不同。我在提琴中有默认生成器THREE.ExtrudeGeometry.WorldUVGenerator的副本，存储为customUVGenerator。

var extrudeSettings = {
    steps           : 100,
    bevelEnabled    : false,
    extrudePath     : spline,
    UVGenerator     : customUVGenerator //THREE.ExtrudeGeometry.WorldUVGenerator
};

类似的问题，没有答案：

THREE.JS UV Mapping on ExtrudeGeometry

Three.js How to map a texture over multiple faces onto a curved custom geometry

Calculating UV coordinates during mesh extrusion

我找到的最有帮助的帖子在这里：THREE.js generate UV coordinate

但是这些定制的UV解决方案都无法产生理想的结果

所需的结果可能是Unity，Unreal和CryEngine之类的游戏引擎中的纹理随样条曲线路径弯曲的东西

Answer 1

也许不是全部答案，但是答案的一部分在此threejs项目的“ roadrace”和“ wall”部分中：https://github.com/hofk/THREEg.js

查看此示例：https://hofk.de/main/threejs/sandboxthreeg/RoadRace.html