如何像GL_REPEAT一样重复纹理贴图？

Question

我的游戏中有一个房子模型,我有一些房子几何材料.房子的墙上有一种材料,我有一个纹理图像来显示砖块.

var mat = new THREE.MeshPhongMaterial( { 
    ambient: 0x969696,
    map: THREE.ImageUtils.loadTexture( 'textures/G/G0.jpg' ), 
    overdraw: true,combine: THREE.MultiplyOperation 
} );

通过这种方式,纹理贴图就像GL_CLAMP我希望它显示一样GL_REPEAT.

我该怎么办？

如果您看不到图像,请检查此项.

Answer 1

我在以下网址发布了一个完整的工作示例:http: //stemkoski.github.com/Three.js/Texture-Repeat.html

代码示例的相关部分是:

// for example, texture repeated twice in each direction
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 2, 2 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );
var lavaBall = new THREE.Mesh( THREE.GeometryUtils.clone(sphereGeom), lavaMaterial );
scene.add( lavaBall );      

Answer 2

那里叫THREE.RepeatWrapping。默认loadTexture为THREE.ClampToEdgeWrapping（请参阅上一个链接中的 ctor 函数）。不知道是否可以使用callback（因为this在JS中有点奇怪（看起来它指向created Image，而不是created Texture））。签名：

loadTexture: function ( path, mapping, callback ) {

最好只在本地命名纹理并手动设置环绕模式：

var t = THREE.ImageUtils.loadTexture( 'textures/G/G0.jpg' );
t.wrapS = t.wrapT = THREE.RepeatWrapping;

看起来如果不查看实际代码，您就不会在 Threejs 上走得太远......