当前位置：首页 > article >正文

学习threejs，使用Sprite精灵、SpriteMaterial精灵材质

article 2026/2/19 9:00:24

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.Sprite
- - 1.1.1 ☘️代码示例
  - 1.1.2 ☘️构造函数
  - 1.1.3 ☘️属性
  - 1.1.4 ☘️方法
- 1.2 ☘️THREE.Sprite
- - 1.2.1 ☘️代码示例
  - 1.2.2 ☘️构造函数
  - 1.2.3 ☘️属性
  - 1.2.4 ☘️方法
二、🍀使用Sprite精灵、SpriteMaterial精灵材质
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用Sprite精灵、SpriteMaterial精灵材质，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.Sprite

THREE.Sprite精灵是一个总是面朝着摄像机的平面，通常含有使用一个半透明的纹理。
精灵不会投射任何阴影，即使设置了

castShadow = true

也将不会有任何效果。

1.1.1 ☘️代码示例

代码示例

const map = new THREE.TextureLoader().load( "sprite.png" );
const material = new THREE.SpriteMaterial( { map: map } );const sprite = new THREE.Sprite( material );
scene.add( sprite );

1.1.2 ☘️构造函数

Sprite( material : Material )
material - （可选值）是SpriteMaterial的一个实例。默认值是一个白色的SpriteMaterial。

创建一个新的Sprite。

1.1.3 ☘️属性

共有属性请参见其基类Object3D。

.isSprite : Boolean
只读标志，用于检查给定对象是否为 Sprite 类型。

.material : SpriteMaterial
SpriteMaterial的一个实例，定义了这个对象的外观。默认值是一个白色的SpriteMaterial。

.center : Vector2
这个精灵的锚点，也就是精灵旋转时，围绕着旋转的点。当值为(0.5,0.5)时，对应着这个精灵的中心点；当值为(0,0)时，对应着这个精灵左下角的点。其默认值是(0.5,0.5)。

1.1.4 ☘️方法

共有方法请参见其基类Object3D。

.clone () : Sprite
返回当前Sprite对象的一个克隆及其任何后代。

.copy ( sprite : Sprite ) : this
将前一个Sprite对象的属性复制给当前的这个对象。

.raycast ( raycaster : Raycaster, intersects : Array ) : undefined
在投射的光线和精灵之前产生交互。Raycaster.intersectObject将会调用这个方法。在对sprite进行射线投射之前，射线投射必须通过调用Raycaster.setFromCamera()来初始化。

1.2 ☘️THREE.Sprite

一种使用Sprite的材质。

1.2.1 ☘️代码示例

代码示例

const map = new THREE.TextureLoader().load( 'textures/sprite.png' );
const material = new THREE.SpriteMaterial( { map: map, color: 0xffffff } );const sprite = new THREE.Sprite( material );
sprite.scale.set(200, 200, 1)
scene.add( sprite );

1.2.2 ☘️构造函数

SpriteMaterial( parameters : Object )
parameters - (可选)用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入(包括从Material 和 ShaderMaterial继承的任何属性)。

属性color例外，其可以作为十六进制字符串传递，默认情况下为 0xffffff（白色），内部调用Color.set(color)。 SpriteMaterials不会被Material.clippingPlanes裁剪。

1.2.3 ☘️属性

共有属性请参见其基类Material。

.alphaMap : Texture
alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道，因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。 Luminance-only以及luminance/alpha纹理也仍然有效。

.color : Color
材质的颜色(Color)，默认值为白色 (0xffffff)。 .map会和 color 相乘。

.fog : Boolean
材质是否受雾影响。默认为true。

.isSpriteMaterial : Boolean
只读标志，用于检查给定对象是否属于 SpriteMaterial 类型。

.map : Texture
颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

.rotation : Radians
sprite的转动，以弧度为单位。默认值为0。

.sizeAttenuation : Boolean
精灵的大小是否会被相机深度衰减。（仅限透视摄像头。）默认为true。

.transparent : Boolean
定义此材质是否透明。默认值为 true。

1.2.4 ☘️方法

共有方法请参见其基类Material。

二、🍀使用Sprite精灵、SpriteMaterial精灵材质

1. ☘️实现思路

1、初始化renderer渲染器。
2、初始化Scene三维场景scene。
3、初始化camera相机，定义相机位置 camera.position.set。
4、加载几何模型：定义createSprites方法，创建10行10列THREE.Sprite精灵对象（使用THREE.SpriteMaterial材质）sprite，场景scene添加sprite。调用createSprites方法。具体代码参考下面代码样例。
5、加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html>
<head><title>学习threejs，使用Sprite精灵、SpriteMaterial精灵材质</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {margin: 0;overflow: hidden;background-color: #000000;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Js代码块 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景scenevar scene = new THREE.Scene();// 创建相机cameravar camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器canvasRenderer，设置canvasRenderer颜色和大小var canvasRenderer = new THREE.WebGLRenderer();canvasRenderer.setClearColor(new THREE.Color(0x000000, 1.0));canvasRenderer.setSize(window.innerWidth, window.innerHeight);// 设置相机的位置camera.position.x = 0;camera.position.y = 0;camera.position.z = 150;// 渲染器canvasRenderer绑定html要素document.getElementById("WebGL-output").appendChild(canvasRenderer.domElement);createSprites();render();function createSprites() {var material = new THREE.SpriteMaterial();for (var x = -5; x < 5; x++) {for (var y = -5; y < 5; y++) {var sprite = new THREE.Sprite(material);sprite.position.set(x * 10, y * 10, 0);scene.add(sprite);}}}function render() {stats.update();requestAnimationFrame(render);canvasRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下：
在这里插入图片描述