使用threejs点云秀出酷炫的图片效果(一)
來(lái)源:http://blog.csdn.net/srk19960903/article/details/70214556
使用了點(diǎn)云拼湊出了照片輪播十分有趣,于是用threejs實(shí)現(xiàn)這個(gè)效果。
??????? 首先這件事情分為兩步:1.根據(jù)圖片數(shù)據(jù)創(chuàng)建對(duì)應(yīng)大小、顏色的點(diǎn)云。2.給點(diǎn)云加上著色器,給渲染管線傳遞點(diǎn)云變換需要的數(shù)據(jù)(位置數(shù)據(jù),顏色數(shù)據(jù))。
??????? 今天我們先來(lái)實(shí)現(xiàn)加載圖片并且通過(guò)圖片數(shù)據(jù)加載點(diǎn)云:
??????? 首先繪制一個(gè)200*200的畫布,然后將圖片繪制到畫布上,接下來(lái)將圖片數(shù)據(jù)存放到進(jìn)行存儲(chǔ),等待后面使用。
?
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(); //創(chuàng)建點(diǎn)云 };??????? 當(dāng)圖片加載完成之后調(diào)用創(chuàng)建點(diǎn)云的方法~不然會(huì)出現(xiàn)錯(cuò)誤。首先根據(jù)畫布長(zhǎng)寬像素,創(chuàng)建相應(yīng)數(shù)量的點(diǎn)對(duì)象,positions和colors存放每個(gè)點(diǎn)的位置坐標(biāo)和顏色信息(這里的顏色只有rgb沒(méi)有a),最后把這些信息加入geometry對(duì)象的attribute里面,這里特別要注意的有兩點(diǎn):
?
??????? 1.imgData里面的數(shù)據(jù)與圖片是上下顛倒的需要用canvas.height-i才可以得到正確的圖像。
??????? 2.圖片數(shù)據(jù)在canvas里面最大值是255而在threejs里面是1所以需要給每個(gè)顏色值除以255.0才可以得到正確的顏色,不然全都是白色的。
這樣就完成了點(diǎn)云的創(chuàng)建,等有時(shí)間在做點(diǎn)云照片的交互~。
?
function createPotCloud() { //創(chuàng)建點(diǎn)云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 );}??????? 最后讓我們看看實(shí)現(xiàn)的效果吧:
?
最后附上github的地址:https://github.com/StringKun/ThreeJSPotCloud
轉(zhuǎn)載于:https://www.cnblogs.com/lst619247/p/8376259.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的使用threejs点云秀出酷炫的图片效果(一)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 光纤信号衰减的原因
- 下一篇: ansible-playbook相关