Home

Index

How to use the Sprite function from three

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

three.Sprite is a type of object in the Three.js library that represents a 2D image or billboard that always faces the camera.

entities.js

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

SpaceObject.js

GitHub: typpo/spacekit

319
320
321
322
323
324
325
326
327
328
    throw new Error('Cannot create sprite without a textureUrl');
}
var fullTextureUrl = (0, util_1.getFullTextureUrl)(this._options.textureUrl, this._context.options.basePath);
var texture = new THREE.TextureLoader().load(fullTextureUrl);
texture.encoding = THREE.LinearEncoding;
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({
    map: texture,
    blending: THREE.AdditiveBlending,
    depthWrite: false,
    color: this._options.theme ? this._options.theme.color : 0xffffff

398

How does three.Sprite work?

three.Sprite is a class in the Three.js library that represents a 2D image sprite, which is a flat rectangular object that always faces the camera and can be used for visual effects such as particle systems or HUD elements. When creating a Sprite, the user can specify a Material object that defines the appearance of the sprite, such as its texture, opacity, and blending mode. The position and scale of the sprite can also be set, and it can be added to a Scene object for rendering in a Three.js scene.

README.md?plain=1

GitHub: haosong/3D-Online-FPS

160
161
162
163
164
165
166
167
168
169
```

### 2.9 Bullet
战场有了以后，我们开始设计发射子弹的样式。我们运用Three.js中的SpriteMaterial材质，然后将一张金属玻璃弹珠的照片map到这个材质上，于是子弹的样式就有了。
```javascript
particle = new THREE.Sprite(new THREE.SpriteMaterial({map: textureLoader.load("textures/sprite.png"), color: 0xffffff, fog: true}));
```
关于子弹的飞行动画在后文中介绍

### 2.10 Player

render.js

GitHub: hobuinc/usgs-lidar

699
700
701
702
703
704
705
706
707

for (var i = 0, il = this.points.length ; i < il ; i ++) {
	var p = this.points[i];

	if (!p.sprite) {
		p.sprite = new THREE.Sprite(this.mat);
		p.sprite.scale.set(16, 16, 1);
		this.orthoScene.add(p.sprite);
	}

110

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Create a texture
const texture = new THREE.TextureLoader().load("path/to/texture.jpg");

// Create a material
const material = new THREE.SpriteMaterial({ map: texture });

// Create a sprite and set its material
const sprite = new THREE.Sprite(material);

// Set the position of the sprite
sprite.position.set(x, y, z);

// Add the sprite to the scene
scene.add(sprite);

In this example, we first create a Texture by loading an image file using THREE.TextureLoader. Then, we create a SpriteMaterial by passing the texture to its constructor. Next, we create a Sprite by passing the material to its constructor. We set the position of the sprite using the position property, and finally, we add the sprite to the scene using the add method of the scene object.

Pin.js

GitHub: PandeoF1/px_botnet

87
88
89
90
91
92
93
94
95
96
    opacity:0,
    depthTest: true,
    fog: true
 });

this.labelSprite = new THREE.Sprite(labelMaterial);
this.labelSprite.position = {x: point.x*altitude*1.1, y: point.y*altitude + (point.y < 0 ? -15 : 30), z: point.z*altitude*1.1};
this.labelSprite.scale.set(labelCanvas.width, labelCanvas.height);

/* the top */

TextureText.js

GitHub: zziyifan/Medical-AI-learning-1

113
114
115
116
117
118
119
120
121
122
123
124
}


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

25
26
27
28
29
30
31
32
33
34

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)
  logo.url = url

+ 5 other calls in file

label.js

GitHub: cgfarmer4/EnvelopWebVR

48
49
50
51
52
53
54
55
56
57
            map: texture,
            transparent: true,
            opacity: .5
        });
        
        let sprite = new THREE.Sprite(spriteMaterial);
        sprite.scale.set(100, 50, 1.0);
        return sprite;
    }
}

renderer.js

GitHub: alan-wu/ZincJS

445
446
447
448
449
450
451
452
453
		this.addToOrthoScene(logoSprite);
	};
};

this.addLogo = () => {
	logoSprite = new THREE.Sprite();
	const logo = THREE.ImageUtils.loadTexture(
			"images/abi_big_logo_transparent_small.png", undefined, createHUDSprites(logoSprite));
}

avatar.js

GitHub: demo3d/frame

332
333
334
335
336
337
338
339
340
341
// 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);

this.add(sprite);

+ 2 other calls in file

sprite-panel.js

GitHub: fuyoneko/dio2town

37
38
39
40
41
42
43
44
45
46
imageArea(scene, base64Texture) {
    // 空の画像データを作成する
    const material = new THREE.SpriteMaterial();
    material.depthTest = false;
    // スプライト画像を作成する
    const imageSprite = new THREE.Sprite(material);
    scene.add(imageSprite);
    imageSprite.scale.set(0.05, 0.05, 0.32);
    // 36ピクセルの遅延読み込み中表示を設定する
    const image = new Image();

+ 5 other calls in file

field-place.js

GitHub: fuyoneko/dio2town

63
64
65
66
67
68
69
70
71
72
}
/** スプライトオブジェクトとしてテキストラベルを作成する */
createSpliteLabel(data) {
    // ラベルが不要なら作成しない
    if (data.label.length == 0) {
        const empty = new THREE.Sprite();
        empty.scale.set(0, 0, 0);
        return empty;
    }
    // ラベルのサイズ情報を取得する

+ 5 other calls in file

GISControlClass.js

GitHub: yuuki9/angular-typescript-study

124
125
126
127
128
129
130
131
132
133
 */
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);
    POI.name = objName; //생성된 오브젝트 네임을 정의

+ 9 other calls in file

Marker.js

GitHub: jayb967/world-globe-timeclock

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

133
134
135
136
137
138
139
140
141
142
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);
return textObj;

tile_v1.js

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

116
117
118
119
120
121
122
123
124
125

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);

    return sprite;

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About