Home

Index

How to use the SpriteMaterial function from three

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

three.SpriteMaterial is a material that allows for the rendering of flat, billboarded sprites that always face the camera in a Three.js scene.

entities.js

22
23
24
25
26
27
28
29
30
31
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

e.mesh.add(sprite)

170

render.js

GitHub: hobuinc/usgs-lidar

597
598
599
600
601
602
603
604
605
606
this.fromCamera = null;
this.size = [0, 0];

var o = this;
THREE.ImageUtils.loadTexture("/assets/circle.png", undefined, function(map) {
	o.mat = new THREE.SpriteMaterial({
				map: map,
				color: 0xffffff,
				fog: false,
			});

110

How does three.SpriteMaterial work?

three.SpriteMaterial is a class in the Three.js library that defines the material properties for a 2D image or texture that is rendered as a sprite in a Three.js scene, including options for color, opacity, blending, and map.

Geometries.js

GitHub: Holograf/Holograf

34
35
36
37
38
39
40
41
geometries.conditionalBranch = new THREE.CylinderGeometry(40, 40, 30, 2, 1, true, 0, PI);
geometries.conditionalBranch.close = new THREE.CylinderGeometry(40, 40, 30, 3, 1, true, 0, PI);
geometries.conditionalBranch.open = new THREE.CylinderGeometry(40, 40, 30, 3, 1, true, 0, PI);


geometries.dfltMaterial = new THREE.SpriteMaterial({});

module.exports = geometries;

Pin.js

GitHub: PandeoF1/px_botnet

95
96
97
98
99
100
101
102
103

/* the top */

topTexture = new THREE.Texture(createTopCanvas(opts.topColor));
topTexture.needsUpdate = true;
topMaterial = new THREE.SpriteMaterial({map: topTexture, depthTest: true, fog: true, opacity: 0});
this.topSprite = new THREE.Sprite(topMaterial);
this.topSprite.scale.set(20, 20);
this.topSprite.position.set(point.x * altitude, point.y * altitude, point.z * altitude);

Ai Example

1
2
3
4
5
6
7
8
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("path/to/texture.png");

const spriteMaterial = new THREE.SpriteMaterial({
  map: texture,
  color: 0xffffff,
  fog: true,
});

This code creates a new TextureLoader instance and uses it to load an image file at the specified path. The resulting texture is then used to create a SpriteMaterial instance with the specified options, including the texture as its map, a white color, and fog set to true.

TextureText.js

GitHub: zziyifan/Medical-AI-learning-1

112
113
114
115
116
117
118
119
120
121
122
123
    }, 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();


    texture.needsUpdate = true;

Logo.js

GitHub: zeesaas/Three-MapGL

24
25
26
27
28
29
30
31
32
33
}

static create3d(group, url, center) {
  let scale = 10
  let texture = new THREE.TextureLoader().load(url)
  let material = new THREE.SpriteMaterial({ map: texture, transparent: true, alphaTest: 0.5 })
  let logo = new THREE.Sprite(material)
  logo.name = 'logo'
  logo.scale.set(scale, scale, scale)
  logo.position.set(center.cx, 10, -center.cy)

+ 5 other calls in file

label.js

GitHub: cgfarmer4/EnvelopWebVR

42
43
44
45
46
47
48
49
50
51
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,
    opacity: .5
});

renderer.js

GitHub: alan-wu/ZincJS

432
433
434
435
436
437
438
439
440
441
}

const createHUDSprites = logoSprite => {
	return texture => {
		texture.needsUpdate = true;
		const material = new THREE.SpriteMaterial( { map: texture } );
		const imagewidth = material.map.image.width;
		const imageheight = material.map.image.height;
		logoSprite.material = material;
		logoSprite.scale.set( imagewidth, imageheight, 1 );

avatar.js

GitHub: demo3d/frame

331
332
333
334
335
336
337
338
339

// canvas contents will be used for a texture
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var spriteMaterial = new THREE.SpriteMaterial({ map: texture });
var sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(1.0, 0.25, 1.0);
sprite.position.set(0, 2.25, 0);

+ 2 other calls in file

sprite-panel.js

GitHub: fuyoneko/dio2town

34
35
36
37
38
39
40
41
42
43
    this.hide();
}
/** 画像の描画エリアを作成する */
imageArea(scene, base64Texture) {
    // 空の画像データを作成する
    const material = new THREE.SpriteMaterial();
    material.depthTest = false;
    // スプライト画像を作成する
    const imageSprite = new THREE.Sprite(material);
    scene.add(imageSprite);

+ 5 other calls in file

GISControlClass.js

GitHub: yuuki9/angular-typescript-study

123
124
125
126
127
128
129
130
131
132
 * @param text POI의 텍스트를 지정
 */
AddPOI(layerName, objName, clickable = false, imgPath = '/resources/POI/b1.png', position, size = 5, text = "", dataKey, dataValue, minViewDistance = 50, maxViewDistance = 500, returnObj) {
    //POI이미지 뿌리기
    const map = new THREE.TextureLoader().load(imgPath);
    const material = new THREE.SpriteMaterial({ map: map, sizeAttenuation: false });
    const POI = new THREE.Sprite(material);
    //POI설정
    POI.scale.set(size, size, size);
    POI.position.set(position.x, position.y, position.z);

+ 9 other calls in file

Marker.js

GitHub: jayb967/world-globe-timeclock

82
83
84
85
86
87
88
89
90
91

if(!scene._encom_markerTexture){
    scene._encom_markerTexture = createMarkerTexture(this.opts.markerColor);
}

markerMaterial = new THREE.SpriteMaterial({map: scene._encom_markerTexture, opacity: .7, depthTest: true, fog: true});
this.marker = new THREE.Sprite(markerMaterial);

this.marker.scale.set(0, 0);
this.marker.position.set(point.x * altitude, point.y * altitude, point.z * altitude);

SceneHelper.js

GitHub: ghost0913/LearnFun3D

132
133
134
135
136
137
138
139
140
141

let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

//使用Sprite显示文字
let material = new THREE.SpriteMaterial({map:texture});
let textObj = new THREE.Sprite(material);
//textObj.scale.set(0.5 * 100, 0.25 * 100, 0.75 * 100);
textObj.position.y = 1.4;
//console.log(textObj);

profile-decode.js

GitHub: wavesoft/jbb-profile-three

172
173
174
175
176
177
178
179
180
181
 * Factory & Initializer of THREE.SpriteMaterial
 */
var factory_THREE_SpriteMaterial = {
        props: 26,
        create: function() {
                return new THREE.SpriteMaterial();
        },
        init: function(inst, props, pagesize, offset) {
                inst.name = props[offset+pagesize*0];
                inst.side = props[offset+pagesize*1];

+ 7 other calls in file

profile-encode.js

GitHub: wavesoft/jbb-profile-three

123
124
125
126
127
128
129
130
131
132
                inst.vertexColors,
                inst.fog];
}

/**
 * Property getter THREE.SpriteMaterial
 */
function getter_THREE_SpriteMaterial(inst) {
        return [
                inst.name,

+ 5 other calls in file

tile_v1.js

GitHub: byWulf/gcs-frontend-browser-matchvisualization-3d

115
116
117
118
119
120
121
122
123
}

createSprite(image, position, scale) {

    let texture = this.textureLoader.load('/node_modules/gcs-frontend-browser-matchvisualization-3d/public/tile_v1/' + image);
    let material = new THREE.SpriteMaterial({transparent: true, map: texture, opacity: 0});
    let sprite = new THREE.Sprite(material);
    sprite.position.set(position.x, position.y, position.z);
    sprite.scale.set(scale.x, scale.y, scale.z);

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About