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