问题
I want to use a texture on the surface of my extruded geometry. I have been researching custom UVgenerators for a while now, and have found these related questions: 1.) How to apply a texture to THREE.ExtrudeGeometry? 2.) Loaded texture appears blurred, or like a single color. How to make the texture crisp and sharp
However, the method proposed to divide my geometry points by 1000 and to mesh.scale.set(1000,1000,1)
doesn't work because my geometry is no longer in the correct place. I would prefer to specify the UV Mapping. One answer says to implement a custom uvgenerator based on the source code, but I am stuck & can't figure out what to do.
This is my geometry creation, the material is 512x512px, how can I map a texture onto the top?:
pointList=[[0,0,0],
[0,1000,0],
[750,1000,0],
[750,750,0],
[1000,750,0],
[1000,0,0]]
for (i=0;i < pointList.length; i++) {
point = pointList[i];
x = point[0];
y = point[1];
myPoints.push( new THREE.Vector2 (x,y) );
}
myShape = new THREE.Shape( myPoints );
extrusionSettings = {
amount:height
};
myGeometry = new THREE.ExtrudeGeometry( myShape, extrusionSettings );
resultshape = new THREE.Mesh( myGeometry, material );
回答1:
You can specify custom UVs for your ExtrudeGeometry
by specifying your own UVGenerator
, one of the properties of extrusionSettings
.
To specify your custom UV generator, you can use as a template THREE.ExtrudeGeometry.WorldUVGenerator
, which can be found in src/extras/geometries/ExtrudeGeometry.js
.
There is a simpler solution that may work for you, however.
Instead of a custom UV generator, you can take advantage of the offset
and repeat
properties of your texture. Use the following pattern:
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1 / 500, 1 / 500 );
texture.offset.set( 0.1, 0.5 );
three.js r.68
来源:https://stackoverflow.com/questions/25336027/custom-uvgenerator-three-js-for-extrudedgeometry