Home

Index

How to use the CanvasTexture function from three

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

TextTexture.js

7
8
9
10
11
12
13
14
15

    var self = this;

    var p = new Promise(function(resolve, reject) {
        var canvas = self.buildCanvas();
        return resolve(new THREE.CanvasTexture(canvas));
    });
    return p;
}

185

867

Fn.js

GitHub: K3D-tools/K3D-jupyter

202
203
204
205
206
207
208
209
210
211
let uvs;
let i;

const canvas = createCanvasGradient(colorMap, 1024);

const texture = new THREE.CanvasTexture(
    canvas,
    THREE.UVMapping,
    THREE.ClampToEdgeWrapping,
    THREE.ClampToEdgeWrapping,

117

808

+ 4 other calls in file

MeshVolume.js

GitHub: K3D-tools/K3D-jupyter

28
29
30
31
32
33
34
35
36
37
if (config.opacity_function && config.opacity_function.data && config.opacity_function.data.length > 0) {
    opacityFunction = config.opacity_function.data;
}

const canvas = colorMapHelper.createCanvasGradient(colorMap, 1024, opacityFunction);
const colormap = new THREE.CanvasTexture(
    canvas,
    THREE.UVMapping,
    THREE.ClampToEdgeWrapping,
    THREE.ClampToEdgeWrapping,

115

803

index.js

GitHub: nim65s/meshcat

66
67
68
69
70
71
72
73
74
75
    while (ctx.measureText(json.text).width > canvas.width) {
        font_size--;
        ctx.font = font_size + "px " + json.font_face;
    }
    ctx.fillText(json.text, canvas.width / 2, canvas.height / 2);
    let canvas_texture = new THREE.CanvasTexture(canvas);
    canvas_texture.uuid = json.uuid;
    return canvas_texture;
} else {
    return null;

builder.js

GitHub: TimMerino1710/Minecraft-Interactive-Evolution

152
153
154
155
156
157
158
159
160
161

//draw onto mini canvas
itx.drawImage(image, 0, 0, img_canvas.width, img_canvas.height);

//add to the scene
TEXTURE_PNG[id] = new THREE.CanvasTexture(img_canvas);
TEXT_MAT[id] = new THREE.MeshBasicMaterial({map: TEXTURE_PNG[id],transparent: true});
TEXT_LOAD[id] = true;

//finished loading textures, so continue

GLTFLoader.js

GitHub: VeinKowal/veins

1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
return new Promise(function (resolve, reject) {
  var onLoad = resolve;

  if (loader.isImageBitmapLoader === true) {
    onLoad = function (imageBitmap) {
      resolve(new _three.CanvasTexture(imageBitmap));
    };
  }

  loader.load(resolveURL(sourceURI, options.path), onLoad, undefined, reject);

sprite-panel.js

GitHub: fuyoneko/dio2town

85
86
87
88
89
90
91
92
93
94
    ctx.fillStyle = 'rgb(255, 255, 255)';
    ctx.fillText('Map data ©2019 Google', 10, ctx.canvas.height - 40.0 - 2.0);
}
// 背景データを表示する
const material = new THREE.SpriteMaterial({
    map: new THREE.CanvasTexture(canvasForText),
});
material.opacity = 1.0;
material.depthTest = false;
const sprite = new THREE.Sprite(material);

+ 2 other calls in file

field-place.js

GitHub: fuyoneko/dio2town

83
84
85
86
87
88
89
90
91
92
    foregroundColor: color_1.Color.white,
    backgroundColor: color_1.Color.darkGrey,
}, () => 'yoko');
// 背景データを表示する
const material = new THREE.SpriteMaterial({
    map: new THREE.CanvasTexture(texture),
});
material.opacity = 1.0;
material.depthTest = false;
// スプライトオブジェクトとして返却する

+ 2 other calls in file

GISControlClass.js

GitHub: yuuki9/angular-typescript-study

389
390
391
392
393
394
395
396
397
398
    texture.repeat.set(1, 1);
    texture.anisotropy = 16;
    texture.encoding = THREE.sRGBEncoding;
}
else {
    texture = new THREE.CanvasTexture(this.generateTexture(altitudes, segWidth - 1, segHeight - 1));
    texture.wrapS = THREE.ClampToEdgeWrapping;
    texture.wrapT = THREE.ClampToEdgeWrapping;
}
//오브젝트 생성

+ 9 other calls in file

mesh.js

GitHub: zDawnING/MyLearnWebGL

124
125
126
127
128
129
130
131
132
133
       // var pattern = context.createPattern(img, 'no-repeat')
//  context.fillStyle = pattern;
//  context.fillRect(0,0,64,64);

//  // 创建纹理对象
 let texture = new THREE.CanvasTexture(canvas)
 texture.needsUpdate = true
       mesh.material.map = texture
       mesh.material.map.wrapT = THREE.RepeatWrapping
       mesh.material.map.wrapS = THREE.RepeatWrapping

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About