在Three.js中由过程生成的凹凸贴图或镜面贴图？

Question

I know with Three.js, you can use external images to define bump maps and specular maps:

var specular = THREE.ImageUtils.loadTexture("path/to/file.png");
var myMaterial = new THREE.MeshPhongMaterial();
myMaterial.specularMap = specular;

Is it possible to create a bump map or specular map procedurally? For example, maybe you just need a random, bumpy surface on your material. Can you use some sort of function to random create this bumpy map to use for your bump or specular map instead of having to use an external file?

Answer 1

It's super easy. I made a fiddle

http://jsfiddle.net/zs1bzkab/

generateNoise = function(opacity,canvas) {
   var
   x, y,
   number,
   opacity = opacity || .2;
     ctx = canvas.getContext('2d');
   for ( x = 0; x < canvas.width; x++ ) {
      for ( y = 0; y < canvas.height; y++ ) {
         number = Math.floor( Math.random() * 60 );

         ctx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";
         ctx.fillRect(x, y, 1, 1);
      }
   }
}



var mesh;
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(50, 500 / 400, 0.1, 1000);
camera.position.z = 10;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(500, 400);
document.body.appendChild(renderer.domElement);

var canvas = document.createElement("canvas");

canvas.width = 400;
canvas.height = 400;


generateNoise(.1, canvas);

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshPhongMaterial({ map: texture, bumpMap: texture });

var light = new THREE.PointLight( new THREE.Color("rgb(255,70,3)"), 2.5);
var light2 = new THREE.PointLight( new THREE.Color("rgb(255,15,255)"), 4);
light.position.set( 0, -100, 800 );
light2.position.set( 50, 50, 900 );
mesh = new THREE.Mesh(geometry, material);

scene.add ( light );
scene.add ( light2 );
scene.add(mesh);

var render = function () {
    requestAnimationFrame(render);
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
};

render();