重复凹凸贴图 [英] Repeating a bump map
问题描述
我正在尝试将凹凸贴图应用于平面，以使用Three.js r55创建一个模糊的感觉表面。
I'm trying to apply a bump map to a plane to create a vaguely felt-like surface using Three.js r55.
这是我的代码：
var mapHeight = THREE.ImageUtils.loadTexture("images/felt.png");
mapHeight.repeat.set(2, 2);
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
mapHeight.format = THREE.RGBFormat;
var groundMaterial = new THREE.MeshPhongMaterial({
ambient: 0x008800, color: 0x008800, specular: 0x888888,
shininess: 25, bumpMap: mapHeight, bumpScale: 10, metal: false
} );
scene.add(new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.3), groundMaterial));
注意我如何将纹理设置为沿x / y轴重复两次。然而，我所看到的仅在一个象限中应用纹理：
Notice how I set the texture to repeat twice along x/y axes. However what I'm seeing only applies the texture in one quadrant:
我希望这可以通过钳制/重复包装（或者其他任何方式）但我在这里请求 RepeatWrapping 。
I would expect this with clamp/repeat wrapping (or whatever it's called) but I've requested RepeatWrapping here.
如何让凹凸贴图在平面上正确重复任意次数。
How can I have the bump map correctly repeat an arbitrary number of times on the plane.
我着手制作一个简单的复制案例。这是非常小的并且再现下面的图像（从略微不同的摄像机角度。）输出具有相同的问题。
I set about making a simple reproduction case. This is pretty minimal and reproduces the image below (from a slightly different camera angle.) The output has the identical problem.
<!DOCTYPE html>
<html>
<head>
<script src="scripts/libs/three.min.js" type="text/javascript"></script>
</head>
<body>
<div id="scene-container"></div>
<script>
init();
function init() {
var camera, scene, renderer;
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x555555 ) );
var light = new THREE.DirectionalLight( 0x555555 );
light.position.set( 0, 0, 10 );
scene.add( light );
var bumpMapTexture = THREE.ImageUtils.loadTexture( "images/felt.png", undefined, function () {
requestAnimationFrame( function () {
// render once texture has loaded
renderer.render( scene, camera );
} );
} );
bumpMapTexture.repeat.set( 2, 2 );
bumpMapTexture.wrapS = bumpMapTexture.wrapT = THREE.RepeatWrapping;
var groundMaterial = new THREE.MeshPhongMaterial( {
ambient: 0x00AA00,
color: 0x00AA00,
bumpMap: bumpMapTexture
} );
scene.add( new THREE.Mesh( new THREE.PlaneGeometry( 3, 3 ), groundMaterial ) );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 100000 );
camera.position.set( 0, 0, 3 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );// renderer.render(scene, camera);
document.getElementById( 'scene-container' ).appendChild( renderer.domElement );
}
</script>
</body>
</html>
这链接到Three.js r55（缩小）。
This links to Three.js r55 (minified).
任何帮助表示赞赏。
推荐答案
如果你想重复一个纹理，它的每个维度的像素大小必须是2的幂（例如，512 x 256）。
If you want a texture to repeat, it's size in pixels in each dimension must be a power of two ( e.g., 512 x 256 ).
如果你有一个漫反射地图和一个 bumpMap ，它们必须具有相同的偏移/重复设置。例如，参见这个答案。
If you have a diffuse map and a bumpMap, they must have the same offset/repeat settings. See for example this answer.
three.js r.55
three.js r.55
这篇关于重复凹凸贴图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
