在Three.js中程序生成的凹凸贴图或镜面反射贴图？

Question

我知道使用Three.js，您可以使用外部图像来定义凹凸贴图和镜面反射贴图：

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

可以按程序创建凹凸贴图或镜面反射贴图吗？例如，也许您只需要在材质上有一个随机的凹凸不平的表面。你可以使用某种函数来随机创建这个凹凸贴图用于凹凸贴图或镜面反射贴图，而不是使用外部文件吗？

Answer 1

这非常简单。我做了个小提琴

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();