👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
文章目录
一、🍀前言
本文详细介绍如何基于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();
// 创建三维场景scene
var scene = new THREE.Scene();
// 创建相机camera
var 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>
效果如下：
