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.
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) }
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
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.
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
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); }
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.
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 */
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;
GitHub: zeesaas/Three-MapGL
![zeesaas profile picture](/zeesaas.png?size=40)
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
GitHub: cgfarmer4/EnvelopWebVR
![cgfarmer4 profile picture](/cgfarmer4.png?size=40)
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; } }
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)); }
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
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
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
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
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);
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;
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;
three.Vector3 is the most popular function in three (22341 examples)