How to use the DataTexture function from three
Find comprehensive JavaScript three.DataTexture code examples handpicked from public code repositorys.
three.DataTexture is a class in the Three.js library that creates a texture from a data array.
GitHub: edankwan/hyper-mix
![edankwan profile picture](/edankwan.png?size=40)
143 144 145 146 147 148 149 150 151 152
positions[i4 + 0] = r * Math.cos(theta) * Math.cos(phi); positions[i4 + 1] = r * Math.sin(phi); positions[i4 + 2] = r * Math.sin(theta) * Math.cos(phi); positions[i4 + 3] = 0.002 + Math.random() * 0.998; } var texture = new THREE.DataTexture( positions, TEXTURE_WIDTH, TEXTURE_HEIGHT, THREE.RGBAFormat, THREE.FloatType ); texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.needsUpdate = true; texture.generateMipmaps = false;
+ 13 other calls in file
GitHub: umamiMike/Constraint
![umamiMike profile picture](/umamiMike.png?size=40)
162 163 164 165 166 167 168 169 170 171
a[ i + 0 ] = 0; a[ i + 1 ] = 0; a[ i + 2 ] = 0; a[ i + 3 ] = ((~~(i / 4) % TEXTURE_SIZE) + 1) % TEXTURE_SIZE; // "random" gl_FragCoord x } var texture = new THREE.DataTexture( a, TEXTURE_SIZE, TEXTURE_SIZE, THREE.RGBAFormat, THREE.FloatType ); texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.needsUpdate = true; texture.generateMipmaps = false;
+ 3 other calls in file
How does three.DataTexture work?
three.DataTexture
is a class in the Three.js library that represents a texture where pixel data can be provided directly by the user, rather than sourced from an image file. The texture can be used to apply patterns, colors, or images onto 3D objects in a scene. The user can specify the width, height, format, type, and data of the texture.
GitHub: edankwan/touch-leap-motion
![edankwan profile picture](/edankwan.png?size=40)
176 177 178 179 180 181 182 183 184 185
for ( var i = 0, len = a.length; i < len; i += 4 ) { a[ i + 0 ] = 0; a[ i + 1 ] = -Math.random() * 10; a[ i + 2 ] = 0; } var texture = new THREE.DataTexture( a, settings.simulatorTextureWidth, settings.simulatorTextureHeight, THREE.RGBAFormat, THREE.FloatType ); texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.needsUpdate = true; texture.flipY = false;
+ 3 other calls in file
41 42 43 44 45 46 47 48 49 50
-10000, 10000 ); _cameraRTT.position.z = -10; // renderer.extensions.get( "OES_texture_float" ); var _initPosTexture = new THREE.DataTexture( initPosTypedArray, simWidth, simWidth, // 200,
+ 19 other calls in file
Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
// Create a data array with pixel values const data = new Uint8Array([ 255, 0, 0, // Red pixel 0, 255, 0, // Green pixel 0, 0, 255, // Blue pixel ]); // Create a DataTexture from the data array const texture = new THREE.DataTexture( data, 3, // Width (in pixels) 1, // Height (in pixels) THREE.RGBFormat, // Texture format (RGB) THREE.UnsignedByteType // Data type (unsigned byte) );
This example creates a new Uint8Array data array with three pixels (red, green, and blue) and uses it to create a new DataTexture with a width of 3 pixels and a height of 1 pixel. The texture format is set to THREE.RGBFormat and the data type is set to THREE.UnsignedByteType.
57 58 59 60 61 62 63 64 65 66
} this.geom.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); this.geom.addAttribute('uv', new THREE.BufferAttribute(uvs, 2)); this.geom.addAttribute('color', new THREE.BufferAttribute(colors, 3)); this.textureDataPos = new THREE.DataTexture( this.dataPos, width, height, THREE.RGBAFormat, THREE.FloatType); this.textureDataPos.minFilter = THREE.NearestFilter; this.textureDataPos.magFilter = THREE.NearestFilter;
+ 3 other calls in file
GitHub: amatelus/paintcoin
![amatelus profile picture](/amatelus.png?size=40)
125 126 127 128 129 130 131 132 133
} initCoinPattern() { const scene = this.scene; const texture = new THREE.DataTexture(formatImageData(this.imageData), this.imageData.width, this.imageData.height, THREE.RGBAFormat, THREE.UnsignedByteType); texture.needsUpdate = true; texture.flipY = true;
+ 5 other calls in file
129 130 131 132 133 134 135 136 137 138
positions[i4 + 0] = r * Math.cos(theta) * Math.cos(phi); positions[i4 + 1] = r * Math.sin(phi); positions[i4 + 2] = r * Math.sin(theta) * Math.cos(phi); positions[i4 + 3] = Math.random(); } var texture = new THREE.DataTexture(positions, TEXTURE_WIDTH, TEXTURE_HEIGHT, THREE.RGBAFormat, THREE.FloatType); texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.needsUpdate = true; texture.generateMipmaps = false;
+ 3 other calls in file
155 156 157 158 159 160 161 162 163 164
setVertexAlphaZeros(alphaZeros, idx) { this.geometries[idx].addAttribute('alphaZero', new THREE.BufferAttribute(alphaZeros, 1)); } createDataTexture(data, width, height, format) { const texture = new THREE.DataTexture(data, width, height, format, THREE.FloatType); texture.generateMipmaps = false; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; texture.wrapS = THREE.ClampToEdgeWrapping;
+ 9 other calls in file
GitHub: piscis/xmas2016
![piscis profile picture](/piscis.png?size=40)
77 78 79 80 81 82 83 84 85 86
this.geom.addAttribute('size', new THREE.BufferAttribute(size, 1)); this.textureDataPos = new THREE.DataTexture( this.dataPos, width, height, THREE.RGBAFormat, THREE.FloatType); this.textureDataInfos = new THREE.DataTexture( this.datatInfos, width, height, THREE.RGBAFormat, THREE.FloatType); this.textureDataPos.minFilter = THREE.NearestFilter; this.textureDataPos.magFilter = THREE.NearestFilter;
+ 3 other calls in file
GitHub: vdaguenet/spirit
![vdaguenet profile picture](/vdaguenet.png?size=40)
37 38 39 40 41 42 43 44 45 46
data[i * 3 + 1] = x; data[i * 3 + 2] = x; } this.perturbMap = new THREE.DataTexture(data, 64, 64, THREE.RGBFormat, THREE.FloatType); this.perturbMap.needsUpdate = true; this.params.tPerturb = this.perturbMap; }
GitHub: K3D-tools/K3D-jupyter
65 66 67 68 69 70 71 72 73 74
texture.wrapS = THREE.ClampToEdgeWrapping; texture.wrapT = THREE.ClampToEdgeWrapping; texture.wrapR = THREE.ClampToEdgeWrapping; texture.needsUpdate = true; jitterTexture = new THREE.DataTexture( new Uint8Array(_.range(64 * 64).map(() => randomMul * Math.random())), 64, 64, THREE.RedFormat,
29 30 31 32 33 34 35 36 37 38
data: opacityFunction, shape: [4], }; } const texture = new THREE.DataTexture( config.attribute.data, config.attribute.shape[1], config.attribute.shape[0], THREE.RedFormat,
GitHub: audunsh/evince
287 288 289 290 291 292 293 294 295
this.pos = this.model.get('tex'); this.size = this.model.get('size'); let data = new Uint8Array(this.tex.buffer); //, 3); //const texture = new THREE.DataTexture( data, this.size[0], this.size[1] ); //const size = width * height; //const data = new Uint8Array( 4 * size );
+ 5 other calls in file
GitHub: JordanMachado/fluctus
![JordanMachado profile picture](/JordanMachado.png?size=40)
75 76 77 78 79 80 81 82 83 84
}) this.analyser = createAnalyser(this.audio.node, this.audio.context, { stereo: false }) this.textureData = new THREE.DataTexture(this.data, size, size, THREE.RGBFormat, THREE.FloatType); this.textureData.minFilter = this.textureData.magFilter = THREE.NearestFilter; } addObjects(width,height) { this.sceneRt = new THREE.Scene();
73 74 75 76 77 78 79 80 81 82
data[currIndex + 2] = b * 255; data[currIndex + 3] = 255; currIndex += 4; } } const texture = new three_1.DataTexture(); texture.image.data = data; texture.image.width = size; texture.image.height = size * size; texture.type = three_1.UnsignedByteType;
251 252 253 254 255 256 257 258 259 260
const x = Math.random() * 2 - 1; const y = Math.random() * 2 - 1; const z = 0; data[i] = simplex.noise3d(x, y, z); } this.noiseTexture = new three_1.DataTexture(data, width, height, three_1.RedFormat, three_1.FloatType); this.noiseTexture.wrapS = three_1.RepeatWrapping; this.noiseTexture.wrapT = three_1.RepeatWrapping; this.noiseTexture.needsUpdate = true; }
+ 5 other calls in file
GitHub: VeinKowal/veins
217 218 219 220 221 222 223 224 225
_CommonMaterial["default"].setUniformProperty((0, _assertThisInitialized2["default"])(_this), 'applyOpacityClassication', applyOpacityClassication); // add classification texture to apply classification lut. var data = new Uint8Array(256 * 4); var texture = new THREE.DataTexture(data, 256, 1, THREE.RGBAFormat); texture.magFilter = THREE.NearestFilter; _CommonMaterial["default"].setUniformProperty((0, _assertThisInitialized2["default"])(_this), 'classificationLUT', texture); // Classification scheme
+ 19 other calls in file
7 8 9 10 11 12 13 14 15 16
this.denseData = new Uint8Array( [ 255, 255, 255, 255 , 255, 255, 255, 255 , 255, 255, 255, 255 , 255, 255, 255, 255]) this.texture = new THREE.DataTexture(this.denseData, 4, 4, THREE.LuminanceFormat, THREE.UnsignedByteType) this.texture.magFilter = THREE.NearestFilter; this.texture.needsUpdate = true; this.composer = new EffectComposer(renderer);
GitHub: takkasila/SmokeSim3D
48 49 50 51 52 53 54 55 56 57
var fluid = new FluidSolver(cellCount[0], cellCount[1], cellCount[2], 0); fluid.add_flow(0.40, 0.60, 0.46, 0.54, 0.95, 0.99, 0.5, 0, 0, -1) fluid.add_flow(0.40, 0.60, 0.01, 0.05, 0.46, 0.54, 1.0, 0, 4.0, 0) fluid.update(1/fps) var dataTex = new THREE.DataTexture(fluid.denseUI8, fluid.width, fluid.height*fluid.tall, THREE.LuminanceFormat, THREE.UnsignedByteType); dataTex.magFilter = THREE.LinearFilter; dataTex.needsUpdate = true; var myPlaneMaterial = new THREE.ShaderMaterial({
81 82 83 84 85 86 87 88 89
it ++; } } this.geometryRT = new THREE.DataTexture( this.data, this.sizeW, this.sizeH, THREE.RGBAFormat, THREE.FloatType); this.geometryRT.minFilter = THREE.NearestFilter; this.geometryRT.magFilter = THREE.NearestFilter; this.geometryRT.needsUpdate = true;
three.Vector3 is the most popular function in three (22341 examples)