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(); //创建点云 };
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 ++ ) { // positions positions[ 3*i ] = parseInt(i%canvas.width); positions[ 3*i + 1 ] = 200+ parseInt((canvas.height-i)/canvas.width) ; positions[ 3*i + 2 ] = 0; // colors colors[ 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 ); }