three.js 将图片马赛克化的示例代码

canvas = document.createElement(‘canvas’);

content = canvas.getContext(‘2d’);

canvas.width = 1600;

canvas.height = 1200;

img = new Image();

img.crossOrigin = ‘*’;

img.src = “/static/images/base/girl.jpg”;

img.onload = () => {

content.drawImage(img, 0, 0, canvas.width, canvas.height);

imgDate = content.getImageData(0, 0, canvas.width, canvas.height);

this.createPotCloud();  //创建点云

};

}

if (points) {

scene.remove(points)

}

let cw = Math.floor(canvas.width / size);

let ch = Math.floor(canvas.height / size);

particles = cw * ch;

geometry = new THREE.BufferGeometry();

positions = new Float32Array(Math.floor(particles * 3));

positions_af = new Float32Array(Math.floor(particles * 3));

var colors = new Float32Array(Math.floor(particles * 3));

for (var i = 0; i < positions.length; i += 1) {

positions[3 * i] = – canvas.width / 2 + (i % cw) * size;

positions[3 * i + 1] = canvas.height / 2 + Math.floor((-1 – i) / cw) * size;

positions[3 * i + 2] = 0;

let selectPos = size * (i % cw) + Math.floor(i / cw) * cw * size * size;

colors[3 * i] = imgDate.data[4 * selectPos] / 255.0;

colors[3 * i + 1] = imgDate.data[4 * selectPos + 1] / 255.0;

colors[3 * i + 2] = imgDate.data[4 * selectPos + 2] / 255.0;

}

geometry.setAttribute(‘position’, new THREE.BufferAttribute(positions, 3));

geometry.setAttribute(‘color’, new THREE.BufferAttribute(colors, 3))

geometry.dynamic = true;

geometry.attributes.position.needsUpdate = true;

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

points = new THREE.Points(geometry, material);

points.name = ‘points’;

scene.add(points);

loaded = true;

},