關於three.js THREE.ExtrudeGeometry貼紋理填坑指南

關於three.js THREE.ExtrudeGeometry貼紋理填坑指南

最近開發中用到了擠壓幾何體，本着好看的原則貼上漂亮的紋理，過程一波三折，對於不熟悉套路的同僚們記錄，僅作爲參考。

1. 加載紋理無錯誤信息，幾何體顯示爲黑色塊，這種情況一般是引用的three.js庫版本不一致，建議更換；
2. 加載紋理無錯誤信息，幾何體顯示爲紋理的基本色素，但紋理不顯示，參數設置問題：

        map1.wrapS = map1.wrapT = THREE.RepeatWrapping; // CHANGED
        map1.offset.set( 0, 0.5 ); // CHANGED
        map1.repeat.set( 0.01, 0.01 ); // CHANGED

設置參考源碼
Texture

Properties
.id : Integer Readonly - unique
number for this texture instance.

.uuid : String UUID of this object instance. This gets automatically
assigned, so this shouldn’t be edited.

.name : String Optional name of the object (doesn’t need to be
unique). Default is an empty string.

.image : Image An image object, typically created using the
TextureLoader.load method. This can be any image (e.g., PNG, JPG, GIF,
DDS) or video (e.g., MP4, OGG/OGV) type supported by three.js.

To use video as a texture you need to have a playing HTML5 video
element as a source for your texture image and continuously update
this texture as long as video is playing - the VideoTexture class
handles this automatically.

.isTexture : Boolean Used to check whether this or derived classes are
Textures. Default is true.

You should not change this, as it is used internally for optimisation.

.mipmaps : array Array of user-specified mipmaps (optional).

.mapping : number How the image is applied to the object. An object
type of THREE.UVMapping is the default, where the U,V coordinates are
used to apply the map. See the texture constants page for other
mapping types.

.wrapS : number This defines how the texture is wrapped horizontally
and corresponds to U in UV mapping. The default is
THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge
texels. The other two choices are THREE.RepeatWrapping and
THREE.MirroredRepeatWrapping. See the texture constants page for
details.

.wrapT : number This defines how the texture is wrapped vertically and
corresponds to V in UV mapping. The same choices are available as for
.wrapS : number.

NOTE: tiling of images in textures only functions if image dimensions
are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048,
…) in terms of pixels. Individual dimensions need not be equal, but
each must be a power of two. This is a limitation of WebGL, not
three.js.

.magFilter : number How the texture is sampled when a texel covers
more than one pixel. The default is THREE.LinearFilter, which takes
the four closest texels and bilinearly interpolates among them. The
other option is THREE.NearestFilter, which uses the value of the
closest texel. See the texture constants page for details.

.minFilter : number How the texture is sampled when a texel covers
less than one pixel. The default is THREE.LinearMipmapLinearFilter,
which uses mipmapping and a trilinear filter.

See the texture constants page for all possible choices.

.anisotropy : number The number of samples taken along the axis
through the pixel that has the highest density of texels. By default,
this value is 1. A higher value gives a less blurry result than a
basic mipmap, at the cost of more texture samples being used. Use
renderer.getMaxAnisotropy() to find the maximum valid anisotropy value
for the GPU; this value is usually a power of 2.

.format : number The default is THREE.RGBAFormat, although the
TextureLoader will automatically set this to THREE.RGBFormat for JPG
images.

See the texture constants page for details of other formats.

.type : number This must correspond to the .format. The default is
THREE.UnsignedByteType, which will be used for most texture formats.

See the texture constants page for details of other formats.

.offset : Vector2 How much a single repetition of the texture is
offset from the beginning, in each direction U and V. Typical range is
0.0 to 1.0. Note: The offset property is a convenience modifier and only affects the Texture’s application to the first set of UVs on a
model. If the Texture is used as a map requiring additional UV sets
(e.g. the aoMap or lightMap of most stock materials), those UVs must
be manually assigned to achieve the desired offset.

.repeat : Vector2 How many times the texture is repeated across the
surface, in each direction U and V. If repeat is set greater than 1 in
either direction, the corresponding Wrap parameter should also be set
to THREE.RepeatWrapping or THREE.MirroredRepeatWrapping to achieve the
desired tiling effect. Note: The repeat property is a convenience
modifier and only affects the Texture’s application to the first set
of UVs on a model. If the Texture is used as a map requiring
additional UV sets (e.g. the aoMap or lightMap of most stock
materials), those UVs must be manually assigned to achieve the desired
repetiton.

.rotation : number How much the texture is rotated around the center
point, in radians. Positive values are counter-clockwise. Default is
0.

.center : Vector2 The point around which rotation occurs. A value of
(0.5, 0.5) corresponds to the center of the texture. Default is (0,
0), the lower left.

.matrixAutoUpdate : boolean Whether to update the texture’s
uv-transform .matrix from the texture properties .offset, .repeat,
.rotation, and .center. True by default. Set this to false if you are
specifying the uv-transform matrix directly.

.matrix : Matrix3 The uv-transform matrix for the texture. Updated by
the renderer from the texture properties .offset, .repeat, .rotation,
and .center when the texture’s .matrixAutoUpdate property is true.
When .matrixAutoUpdate property is false, this matrix may be set
manually. Default is the identity matrix.

.generateMipmaps : boolean Whether to generate mipmaps (if possible)
for a texture. True by default. Set this to false if you are creating
mipmaps manually.

.premultiplyAlpha : boolean If set to true, the alpha channel, if
present, is multiplied into the color channels when the texture is
uploaded to the GPU. Defaut is false.

Note that this property has no effect for ImageBitmap. You need to
configure on bitmap creation instead. See ImageBitmapLoader.

.flipY : boolean If set to true, the texture is flipped along the
vertical axis when uploaded to the GPU. Default is true.

Note that this property has no effect for ImageBitmap. You need to
configure on bitmap creation instead. See ImageBitmapLoader.

.unpackAlignment : number 4 by default. Specifies the alignment
requirements for the start of each pixel row in memory. The allowable
values are 1 (byte-alignment), 2 (rows aligned to even-numbered
bytes), 4 (word-alignment), and 8 (rows start on double-word
boundaries). See glPixelStorei for more information.

.encoding : number THREE.LinearEncoding is the default. See the
texture constants page for details of other formats.

Note that if this value is changed on a texture after the material has
been used, it is necessary to trigger a Material.needsUpdate for this
value to be realized in the shader.

.version : Integer This starts at 0 and counts how many times
.needsUpdate : Booleanis set to true.

.onUpdate : Function A callback function, called when the texture is
updated (e.g., when needsUpdate has been set to true and then the
texture is used).

.needsUpdate : Boolean Set this to true to trigger an update next time
the texture is used. Particularly important for setting the wrap mode.

Methods EventDispatcher methods are available on this class.
.updateMatrix () : null Update the texture’s uv-transform .matrix from
the texture properties .offset, .repeat, .rotation, and .center.

.clone () : Texture Make copy of the texture. Note this is not a “deep
copy”, the image is shared.

.toJSON ( meta : Object ) : Object meta – optional object containing
metadata. Convert the texture to three.js JSON Object/Scene format.

.dispose () : null Call EventDispatcher.dispatchEvent with a ‘dispose’
event type.

.transformUv ( uv : Vector2 ) : Vector2 Transform the uv based on the
value of this texture’s .offset, .repeat, .wrapS, .wrapT and .flipY
properties.