用於控制THREE.Points網格中像素顏色的紋理貼圖

Question

我對Three.js相當陌生，但我嘗試使用紋理貼圖來控制THREE.Points網格中的像素顏色。我期望的結果是，頂點0將被着色爲圖像像素x = 0，y = 0。頂點1將被着色爲圖像x = 1，y = 0，依此類推。

所有嘗試我做的結果是將要呈現與整個圖像中的每個頂點（不按照座標使用一種顏色。）

這裏是我的代碼片段。

... Define Geometry ... 
var texture = new THREE.TextureLoader().load("img/MyImage.jpg"); 
var mat = new THREE.PointsMaterial({ size: 2.5, vertexColors: THREE.VertexColors, map: texture }); 
var points = new THREE.Points(geo, mat); 

Answer 1

如果你不喜歡，你必須使用一個texure（也許這是可能用類似的方法），你可以只讀取圖像的PixelData取出，並用它來設置類似於WestLangleys建議的顏色。

我不確定顏色大小和頂點數量之間的差異是否會出現問題，但它對我來說工作正常。祝你好運！

var img = new Image(); 
img.src = "Image1.png"; 

img.onload = function(){ 

    // apply image to canvas 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    canvas.getContext('2d').drawImage(img,0,0,img.width,img.height); 

    var colors = []; 

    // geometry of choice 
    var geo = new THREE.SphereGeometry(50,50); 

    for(var i = 0; i < img.width; i++){ 
     for(var j = 0; j < img.height; j++){ 

      // pd - pixeldata array in the format of rgba. example: [53, 53, 130, 255] 
      var pd = canvas.getContext('2d').getImageData(i,j,1,1).data; 

      // not pretty, but works 
      colors.push(new THREE.Color("rgb("+pd[0]+","+pd[1]+","+pd[2]+")")); 
     } 
    } 
    geo.colors = colors; 

    var material = new THREE.PointsMaterial({size: 10, vertexColors: THREE.VertexColors }); 

    var point = new THREE.Points(geo, material); 
    scene.add(point); 
};