Create dataTexture by customer arrayBuffer. But got a complete black scene

Questions
1

Hi, i create a dataTexture by a Uint8Array. But finally i got a complete black scene.
Follows are my codes. Thanks for your help

var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( 320, 240 );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( [
        -0.5, 0.5,  0.0,
        -0.5, -0.5,  0.0,
        0.5, 0.5,  0.0,

        -0.5, -0.5,  0.0,               
        0.5, -0.5,  0.0,
        0.5, 0.5,  0.0
    ] );
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

var width = 320
var height = 240
var size = width * height;
var data = new Uint8Array( 3 * size );
for ( var i = 0; i < size; i ++ ) {

var stride = i * 3;

data[ stride ] = 255;
data[ stride + 1 ] = 255;
data[ stride + 2 ] = 255;

}
var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
texture.needsUpdate = true  

var material = new THREE.MeshBasicMaterial( { map: texture } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

var animate = function () {
    requestAnimationFrame( animate );

    renderer.render( scene, camera );
};
        
animate();
2

You have to move the camera away from the origin. Try it with the following line: camera.position.z = 1;

Live demo: https://jsfiddle.net/f2Lommf5/16303/

2 Likes
3

Thanks for your help. When i move the camera, the problem is resolved.
But now i have another question.
When i change my data like follows, I got the complete black scene again.

let image_dat = 0;
for ( let i = 0; i < size ; i ++ ) {

    let stride = i * 3;

    data[ stride ] = image_dat;
    data[ stride + 1 ] = image_dat;
    data[ stride + 2 ] = image_dat;                

    image_dat ++
    if(image_dat > 255) {
        image_dat = 0
    }                
}
4

Your BufferGeometry has no texture coordinates. This problem is not obvious if you have a texture with a single color. I have switched to PlaneBufferGeometry to illustrate the fix.

https://jsfiddle.net/f2Lommf5/16331/