Home

Index

How to use the Texture function from three

Find comprehensive JavaScript three.Texture code examples handpicked from public code repositorys.

three.Texture is a class in the Three.js library that represents an image or video texture that can be applied to a 3D object.

MeshStandard.js

21
22
23
24
25
26
27
28
29
30
config.flat_shading = typeof (config.flat_shading) !== 'undefined' ? config.flat_shading : true;
config.opacity = typeof (config.opacity) !== 'undefined' ? config.opacity : 1.0;

const modelMatrix = new THREE.Matrix4();
const MaterialConstructor = config.wireframe ? THREE.MeshBasicMaterial : THREE.MeshPhongMaterial;
const texture = new THREE.Texture();
const textureImage = config.texture;
const textureFileFormat = config.texture_file_format;
const colors = (config.colors && config.colors.data) || null;
const colorRange = config.color_range;

119

812

geo-three.cjs

GitHub: tentone/geo-three

82
83
84
85
86
87
88
89
90
91
static createFillTexture(color = '#000000', width = 1, height = 1) {
    const canvas = CanvasUtils.createOffscreenCanvas(width, height);
    const context = canvas.getContext('2d');
    context.fillStyle = color;
    context.fillRect(0, 0, width, height);
    const texture = new three.Texture(canvas);
    texture.format = three.RGBAFormat;
    texture.magFilter = three.LinearFilter;
    texture.minFilter = three.LinearFilter;
    texture.generateMipmaps = false;

468

+ 9 other calls in file

How does three.Texture work?

three.Texture is a class in the Three.js library that represents an image or video that can be mapped onto the surface of a 3D object in a Three.js scene. The three.Texture object contains properties and methods that allow for the manipulation and use of the texture in a 3D scene, such as the image source, size, and filtering properties.

entities.js

GitHub: PrismarineJS/prismarine-viewer

20
21
22
23
24
25
26
27
28
29
ctx.textBaseline = 'top'

const txt = entity.username
ctx.fillText(txt, 100, 0)

const tex = new THREE.Texture(canvas)
tex.needsUpdate = true
const spriteMat = new THREE.SpriteMaterial({ map: tex })
const sprite = new THREE.Sprite(spriteMat)
sprite.position.y += entity.height + 0.6

170

ssaopass.js

GitHub: fazeaction/threejs-boilerplate

95
96
97
98
99
100
101
102
103
104


this.blendPass = new BlendPass();

this.blurPass = new FullBoxBlurPass(2);
this.params.tDepth = new THREE.Texture()
this.params.isPacked = false
this.params.onlyOcclusion = false

this.params.blurAmount = 1;

135

Ai Example

1
2
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("textures/wood.jpg");

In this example, a new TextureLoader instance is created, and the load() method is called with the URL of the image file to be used as the texture. The resulting Texture object can then be assigned to the map property of a material or used in other ways in the Three.js scene.

bis_3dvolume.js

GitHub: bioimagesuiteweb/bisweb

177
178
179
180
181
182
183
184
185
    internal.canvasdata.data[i*4+2]=i;
    internal.canvasdata.data[i*4+3]=i;
}
internal.canvasdata.data[3]=0.0; //background transparent
internal.canvas.getContext("2d").putImageData(internal.canvasdata,0,0);
internal.cmtexture = new THREE.Texture(internal.canvas);
internal.cmtexture.flipY=false;
internal.cmtexture.needsUpdate = true;
internal.cmtexture.minFilter = internal.cmtexture.magFilter = THREE.LinearFilter;

main.js

GitHub: mattdesl/filmic-gl

55
56
57
58
59
60
61
62
63
64
    ];

var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;

var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() );
refractionCube.format = THREE.RGBFormat;

var r = 10;
var sphereGeo = new THREE.SphereGeometry(r, 50, 50);

Pin.js

GitHub: PandeoF1/px_botnet

76
77
78
79
80
81
82
83
84
85
this.line = new THREE.Line(this.lineGeometry, lineMaterial);

/* the label */

labelCanvas = utils.createLabel(text, 18, opts.labelColor, opts.font);
labelTexture = new THREE.Texture(labelCanvas);
labelTexture.needsUpdate = true;

labelMaterial = new THREE.SpriteMaterial({
   map : labelTexture,

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

557
558
559
560
561
562
563
564
565
566
// special imposter image contains:
// 1 - colorizable sphere image in red channel
// 2 - specular highlight in green channel
// 3 - depth offset in blue channel (currently unused)
const image = document.createElement("img");
const sphereImg = new THREE.Texture(image);
image.onload = function onload() {
  sphereImg.needsUpdate = true;
};
image.src = this.nodeParticleTexture;

+ 3 other calls in file

label.js

GitHub: cgfarmer4/EnvelopWebVR

40
41
42
43
44
45
46
47
48
49
// text color
context.fillStyle = "rgba(255, 255, 255, 1.0)";
context.fillText(text, borderThickness, fontSize + borderThickness);

// canvas contents will be used for a texture
let texture = new THREE.Texture(canvas)
texture.needsUpdate = true;
let spriteMaterial = new THREE.SpriteMaterial({
    map: texture,
    transparent: true,

TextureText.js

GitHub: zziyifan/Medical-AI-learning-1

111
112
113
114
115
116
117
118
119
120
121
        return Math.max(longest, height, metric.width);
    }, 0);
}


function getSprite(canvas, object, index, size, config) {
    const texture = new THREE.Texture(canvas);
    const material = new THREE.SpriteMaterial({map: texture});
    const sprite = new THREE.Sprite(material);
    const modelMatrix = new THREE.Matrix4();

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

2815
2816
2817
2818
2819
2820
2821
2822
2823
2824

if ( loader.isImageBitmapLoader === true ) {

    onLoad = function ( imageBitmap ) {

        const texture = new THREE.Texture( imageBitmap );
        texture.needsUpdate = true;
        resolve( texture );

    };

+ 3 other calls in file

index.js

GitHub: OpenSlicer/OpenSlicer

508
509
510
511
512
513
514
515
516


camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000)
controls = new OrbitControls(camera, canvas)

scene.background = new THREE.Texture

resetCamera(30)
updateLights()

+ 2 other calls in file

World.js

GitHub: KleoPetroff/storyboarder

32
33
34
35
36
37
38
39
40
41
const groundTexture = useRef(null)

const load = () => imageLoader.load(
  'data/shot-generator/grid_floor.png',
  image => {
    groundTexture.current = new THREE.Texture()
    groundTexture.current.image = image
    groundTexture.current.needsUpdate = true
    setLoaded(true)
  }

263

+ 3 other calls in file

init.js

GitHub: shaungt1/sketch-threejs

157
158
159
160
161
162
163
164
165
166
  grad.addColorStop(1.0, 'rgba(255, 255, 255, 0)');
  ctx.fillStyle = grad;
  ctx.arc(100, 100, 100, 0, Math.PI / 180, true);
  ctx.fill();

  texture = new THREE.Texture(canvas);
  texture.minFilter = THREE.NearestFilter;
  texture.needsUpdate = true;
  return texture;
};

260

+ 3 other calls in file

streetview.js

GitHub: Jam3/threejs-cubemap-compositor

18
19
20
21
22
23
24
25
26
27
  fov: 45,
  near: 0.0001,
  position: new THREE.Vector3(0, 0, -0.1)
})

var texture = new THREE.Texture()
texture.minFilter = THREE.LinearFilter
texture.generateMipmap = false

// transparent canvas to start (white)

index.cjs

GitHub: Brakebein/node-three-gltf

242
243
244
245
246
247
248
249
250
251
class TextureLoader extends three.Loader {
    constructor(manager) {
        super(manager);
    }
    load(url, onLoad, onProgress, onError) {
        const texture = new three.Texture();
        const loader = new ImageLoader(this.manager);
        loader.setCrossOrigin(this.crossOrigin);
        loader.setPath(this.path);
        loader.load(url, function (image) {

WebGPUTextures.js

GitHub: BaurTokenov/three-js-editor-2

22
23
24
25
26
27
28
29
30
31
    }
    return this.defaultSampler;
}
getDefaultTexture() {
    if (this.defaultTexture === null) {
        const texture = new three_1.Texture();
        texture.minFilter = three_1.NearestFilter;
        texture.magFilter = three_1.NearestFilter;
        this._uploadTexture(texture);
        this.defaultTexture = this.getTextureGPU(texture);

+ 5 other calls in file

envMaps.js

GitHub: zya/swirl

10
11
12
13
14
15
16
17
18
19

var textureCube = THREE.ImageUtils.loadTextureCube(urls, THREE.CubeRefractionMapping);
var reflectionCube = THREE.ImageUtils.loadTextureCube(urls);
reflectionCube.format = THREE.RGBFormat;

var refractionCube = new THREE.Texture(reflectionCube.image, THREE.CubeRefractionMapping);
reflectionCube.format = THREE.RGBFormat;

return {
  none: null,

voxel_edit_tool.js

GitHub: shark39/metamaterials

37
38
39
40
41
42
43
44
45

VoxelEditTool.prototype.updateCursor = function () {

  if (this.activeBrush.type === 'mechanicalCell') {
    this.cursor.shaderMode();
    this.cursor.mesh.material.uniforms.image.value = new THREE.Texture(this.activeBrush.textureIcon);
    this.cursor.mesh.material.uniforms.image.value.needsUpdate = true;
    return;
  }

+ 41 other calls in file

LegacyGLTFLoader.js

GitHub: VeinKowal/veins

348
349
350
351
352
353
354
355
356
357
  35675: THREE.Matrix3,
  35676: THREE.Matrix4,
  35664: THREE.Vector2,
  35665: THREE.Vector3,
  35666: THREE.Vector4,
  35678: THREE.Texture
};
var WEBGL_COMPONENT_TYPES = {
  5120: Int8Array,
  5121: Uint8Array,

+ 9 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About