來源：http://blog.csdn.net/srk19960903/article/details/70214556

使用了點云拼湊出了照片輪播十分有趣，于是用threejs實現這個效果。

??????? 首先這件事情分為兩步：1.根據圖片數據創建對應大小、顏色的點云。2.給點云加上著色器，給渲染管線傳遞點云變換需要的數據（位置數據，顏色數據）。

??????? 今天我們先來實現加載圖片并且通過圖片數據加載點云：

??????? 首先繪制一個200*200的畫布，然后將圖片繪制到畫布上，接下來將圖片數據存放到進行存儲，等待后面使用。

?

canvas = document.createElement('canvas'); content = canvas.getContext('2d'); canvas.width = 200; canvas.height = 200; document.body.appendChild( canvas ); // container.appendChild( canvas ); img = new Image(); img.src = "bg1.jpg"; canvas.style.position = 'absolute'; img.onload = function () {content.drawImage(img, 10, 10, canvas.width, canvas.height);imgDate = content.getImageData(0,0,canvas.width, canvas.height);createPotCloud(); //創建點云 };

??????? 當圖片加載完成之后調用創建點云的方法~不然會出現錯誤。首先根據畫布長寬像素，創建相應數量的點對象，positions和colors存放每個點的位置坐標和顏色信息（這里的顏色只有rgb沒有a），最后把這些信息加入geometry對象的attribute里面，這里特別要注意的有兩點：

?

??????? 1.imgData里面的數據與圖片是上下顛倒的需要用canvas.height-i才可以得到正確的圖像。

??????? 2.圖片數據在canvas里面最大值是255而在threejs里面是1所以需要給每個顏色值除以255.0才可以得到正確的顏色，不然全都是白色的。

這樣就完成了點云的創建，等有時間在做點云照片的交互~。

?

function createPotCloud() { //創建點云console.log(imgDate);var particles = canvas.width * canvas.height;var geometry = new THREE.BufferGeometry();var positions = new Float32Array( particles * 3 );var colors = new Float32Array( particles * 3 );for ( var i = 0; i < positions.length; i ++ ) {// positionspositions[ 3*i ] = parseInt(i%canvas.width);positions[ 3*i + 1 ] = 200+ parseInt((canvas.height-i)/canvas.width) ;positions[ 3*i + 2 ] = 0;// colorscolors[ 3*i ] = imgDate.data[ 4*i ]/255.0;colors[ 3*i + 1 ] = imgDate.data[ 4*i + 1]/255.0;colors[ 3*i + 2 ] = imgDate.data[ 4*i + 2]/255.0;}geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) ); // geometry.computeBoundingSphere();console.log("geometry",geometry);var material = new THREE.PointsMaterial( { size: 1, vertexColors: THREE.VertexColors } );var points = new THREE.Points( geometry, material );scene.add( points );}

??????? 最后讓我們看看實現的效果吧：

?

最后附上github的地址：https://github.com/StringKun/ThreeJSPotCloud

轉載于:https://www.cnblogs.com/lst619247/p/8376259.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的使用threejs点云秀出酷炫的图片效果(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。