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

在Three.js中程序生成的凹凸或高光贴图？

1 个答案: