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

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

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

---

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

这非常简单。我拉了把小提琴

generateNoise=函数（不透明度，画布）{
变量
x、 y,，
数字，
不透明度=不透明度| |.2；
ctx=canvas.getContext（'2d'）；
对于（x=0；x

这非常简单。我拉了把小提琴

generateNoise=函数（不透明度，画布）{
变量
x、 y,，
数字，
不透明度=不透明度| |.2；
ctx=canvas.getContext（'2d'）；
对于（x=0；x

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