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