Javascript 在Three.js中通过getImageData像素颜色数据循环生成多个立方体
我使用一个简单的3x3.png文件从中检索颜色/不透明度数据。(9个像素中的每一个都是不同的颜色/不透明度) 加载.png并将其放置在屏幕外单独的画布中,然后以3x3的形式绘制9个立方体 我认为这真的很接近成功,但显然有些地方出了问题Javascript 在Three.js中通过getImageData像素颜色数据循环生成多个立方体,javascript,three.js,html5-canvas,getimagedata,Javascript,Three.js,Html5 Canvas,Getimagedata,我使用一个简单的3x3.png文件从中检索颜色/不透明度数据。(9个像素中的每一个都是不同的颜色/不透明度) 加载.png并将其放置在屏幕外单独的画布中,然后以3x3的形式绘制9个立方体 我认为这真的很接近成功,但显然有些地方出了问题 <!DOCTYPE html> <head> <title>a png made into cubes per pixel</title> <style>body {margin: 0px;backgro
<!DOCTYPE html>
<head>
<title>a png made into cubes per pixel</title>
<style>body {margin: 0px;background-color: #99F;overflow: hidden;}</style>
<script src="js/three.min.js"></script>
</head>
<body>
<!-- the 3x3 png image pre-loading -->
<img id='image1' src='3x3.png' onload="javascript:loaded();">
<canvas id='canvas'></canvas>
<script>
function loaded(){
var img = new Image();
img.src = document.getElementById("image1").src;
var ctx = document.getElementById("canvas").getContext("2d");
ctx.drawImage(img, 0, 0);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 5;
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
for (ix = 0; ix < img.width; ix++) {
for (iy = 0; iy < img.height; iy++) {
// get next pixel data
var data = ctx.getImageData( ix, iy, 1, 1 ).data;
var floats = data.slice( 0, 4 ).map( function( val ) { return val / 255; });
var computedcolor = THREE.Color( floats[0], floats[1], floats[2] );
var computedopacity = floats[4];
var material = new THREE.MeshBasicMaterial( { color: computedcolor, opacity: computedopacity, side: THREE.DoubleSide } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.position.x = ix; //move the cube positions to rebuild the image using cubes instead of pixels
cube.position.y = iy;
}
}
var render = function () {
requestAnimationFrame( render );
camera.position.z = camera.position.z + .01;
renderer.render(scene, camera);
}
render();
}
</script>
</body>
</html>
每像素制作成立方体的png
正文{margin:0px;背景色:#99F;溢出:隐藏;}
函数加载(){
var img=新图像();
img.src=document.getElementById(“image1”).src;
var ctx=document.getElementById(“画布”).getContext(“2d”);
ctx.drawImage(img,0,0);
var scene=new THREE.scene();
var摄像机=新的三透视摄像机(75,window.innerWidth/window.innerHeight,0.11000);
var renderer=new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth、window.innerHeight);
document.body.appendChild(renderer.doElement);
摄像机位置z=5;
var geometry=新的3.BoxGeometry(1,1,1);
对于(ix=0;ix
var computedopacity=floats[4]
应改为var computedopacity=floats[3]
然而,我不知道这是否解决了问题。我没有试图找出问题所在,而是将您试图从头开始做的事情编码为:
function boxelizeImage( image ) {
// 2D
var canvas = document.createElement( 'canvas' );
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext( '2d' );
context.drawImage( image, 0, 0 );
var data = context.getImageData( 0, 0, canvas.width, canvas.height ).data;
// 3D
var group = new THREE.Group();
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
for ( var i = 0, j = 0; i < data.length; i += 4, j ++ ) {
var color = new THREE.Color();
color.fromArray( data, i );
color.multiplyScalar( 1 / 255 );
if ( color.getHex() === 0 ) continue;
var material = new THREE.MeshBasicMaterial( {
color: color,
wireframe: true,
} );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = j % canvas.width;
mesh.position.y = - Math.floor( j / canvas.width );
group.add( mesh );
}
return group;
}
//
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.x = 15;
camera.position.y = -10;
camera.position.z = 80;
var scene = new THREE.Scene();
var image = new Image();
image.addEventListener( 'load', function () {
var group = boxelizeImage( image );
scene.add( group );
renderer.render( scene, camera );
} );
image.src = '../img/logo.png';
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
函数图像(图像){
//二维
var canvas=document.createElement('canvas');
canvas.width=image.width;
canvas.height=image.height;
var context=canvas.getContext('2d');
drawImage(image,0,0);
var data=context.getImageData(0,0,canvas.width,canvas.height);
//三维
var group=新的三个.group();
var geometry=新的3.BoxGeometry(1,1,1);
对于(变量i=0,j=0;i
我认为这很接近成功,但显然有些地方出了问题。请描述你的问题:你怎么能说有什么不对劲?当这个页面在Chrome中加载时,窗口顶部的1/4显示包含小的3像素正方形png图像的html输出,而页面剩余的3/4显示的画布中没有任何内容。我想这两个问题可能是预加载图像数据的方法,然后在for循环中绘制9个立方体。我已经分别使用了这两个示例,但在本例中没有。-这里的目标是指定一个图像-在本例中为3x3.png,然后使每个像素成为其自己的立方体3.mesh。非常感谢。