Custom UVgenerator Three.js for extruded geometry
I want to use a texture on the surface of my extruded geometry. I've been researching custom UV generators for a while now and found the following related questions: 1.) How do I apply a texture to a THREE.ExtrudeGeometry? 2.) The loaded texture appears to be blurry or similar to one color. How to make a texture crisp and crisp
However, the method suggested for dividing my geometry points by 1000 and mesh.scale.set(1000,1000,1)
does not work because my geometry is no longer in the correct place. I would prefer to specify UV Mapping. One answer talks about implementing a custom uvgenerator based on source, but I'm stuck and can't figure out what to do.
This is my geometry creation, material 512x512px, how can I apply a texture to the vertex ?:
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 );
source to share
You can specify custom UVs for yours ExtrudeGeometry
by specifying your own UVGenerator
one of the properties extrusionSettings
.
To specify your own UV generator, you can use it as a template THREE.ExtrudeGeometry.WorldUVGenerator
, which can be found in src/extras/geometries/ExtrudeGeometry.js
.
However, there is a simpler solution that might work for you.
Instead of a custom UV generator, you can use texture properties offset
and repeat
. Use the following template:
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1 / 500, 1 / 500 );
texture.offset.set( 0.1, 0.5 );
three.js r.68
source to share