Three.jsデータ配列からテクスチャを生成する

threejs-data-texture.png
    var rgba = new Uint8Array( width*height*4);
    for(var i=0;i<width*height;i++){ 
       rgba[i*4+0] = 0;//赤
       rgba[i*4+1] = 255;//緑
       rgba[i*4+2] = 255;//青
       rgba[i*4+3] = 255;//アルファ
    }
var texture= new THREE.DataTexture(rgba, width, height, THREE.RGBAFormat, THREE.UnsignedByteType);
texture.needsUpdate = true; // 絶対必要

配列 type 値の範囲
Uint8Array THREE.UnsignedByteType 0~255
Int8Array THREE.ByteType
Int16Array THREE.ShortType
Uint16Array THREE.UnsignedShortType
Int32Array THREE.IntType
Uint32Array THREE.UnsignedIntType
Float32Array THREE.FloatType 0.0~1.0
Uint16Array THREE.HalfFloatType

format

format
(a) THREE.AlphaFormat
(r,g,b) THREE.RGBFormat
(r,g,b,a) THREE.RGBAFormat
(l) THREE.LuminanceFormat
(l,a) THREE.LuminanceAlphaFormat

輝度だけのテクスチャを作る

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
  <script>
    var width=64;
    var height=64;
    var scene = new THREE.Scene(); 
    var camera = new THREE.OrthographicCamera ( -1.0, 1.0,1.0, -1.0, 0.1, 2000 )
    camera.position.z = 5;
 
    var renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement); 
    var geometry =  new THREE.PlaneGeometry( 2, 2, 10, 10 );
    var luminance= new Float32Array ( width*height);
    for(var i=0;i<width*height;i++){ 
       luminance[i] = Math.random();
    }
 
    var tex= new THREE.DataTexture(luminance, width, height, THREE.AlphaFormat , THREE.FloatType );
   tex.needsUpdate = true; // 絶対必要
    var material = new THREE.MeshBasicMaterial({ map: tex });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 render();
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
</script>
</body>
Bibliography

サポートサイト Wikidot.com