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

如果您不想使用纹理（也许可以使用类似的方法），您可以只读取图像的像素数据，并使用它来设置类似于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);
};

纹理贴图控制THREE.Points网格中的像素颜色

1 个答案: