114. 精灵模型标注场景(贴图)

前面课程5.5小节讲解过一个例子，就是通过矩形平面Mesh + 贴图标注三维场景。

不过有些时候，你也可以通过Sprite+贴图标注三维场景。

你可以对比案例源码中矩形平面Mesh和Sprite标注三维场景差异。

大家根据需要选择Sprite或矩形Mesh标注场景，如果希望矩形始终平行于canvas画布，就选择Sprite，如果希望矩形标注姿态角度能跟着场景旋转，就使用矩形Mesh标注场景。

精灵模型设置颜色贴图`.map`

精灵材质对象SpriteMaterial和普通的网格材质一样具有颜色贴图.map、开启透明.transparent、透明度.opacity等属性。

javascript 复制代码

const texture = new THREE.TextureLoader().load("./光点.png");
const spriteMaterial = new THREE.SpriteMaterial({
  map: texture, //设置精灵纹理贴图
});

`.transparent`属性

网格材质.transparent属性默认是false，如果贴图是背景透明的png贴图，需要把.transparent设置为true，对于SpriteMaterial而言，.transparent默认是true。

javascript 复制代码

const spriteMaterial = new THREE.SpriteMaterial({
  transparent:true,//SpriteMaterial默认是true
});

`.color`与`.map`混合

如果.map是纯白色贴图，你可以通过设置.color,把精灵模型设置为其他任意颜色。一般来说美术把颜色贴图设置为合适的颜色，你就不用再设置.color。

javascript 复制代码

const spriteMaterial = new THREE.SpriteMaterial({
  color:0x00ffff,//设置颜色
  map: texture, //设置精灵纹理贴图
});

`Sprite`标注三维场景

需要在长方体网格模型的顶部中间添加一个Sprite标注。

javascript 复制代码

const geometry = new THREE.BoxGeometry(25, 100, 50);
geometry.translate(0, 50, 0);
// mesh顶部中心添加标注，顶部中心坐标是(0,100,0)
const mesh = new THREE.Mesh(geometry, material);

标注大小，根据场景渲染范围尺寸或者说要标注的物体的尺寸数量级，设置sprite的大小。不用具体，先设置一个大概值，只要和要标注的物体尺寸数量级相差不大即可，再根据需要缩放尺寸。

javascript 复制代码

sprite.scale.set(10, 10, 1);

根据标注位置，设置精灵模型在三维空间中的位置坐标，注意考虑模型对象的大小

javascript 复制代码

sprite.position.set(0, 100 + 10/2, 0);//设置位置，要考虑sprite尺寸影响

114. 精灵模型标注场景(贴图)

精灵模型设置颜色贴图.map

.transparent属性

.color与.map混合

Sprite标注三维场景

精灵模型设置颜色贴图`.map`

`.transparent`属性

`.color`与`.map`混合

`Sprite`标注三维场景