Sprite精灵

Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画（wiki）。在threejs中，这样说明Sprtite（doc） :

 A sprite is a plane that always faces towards the camera , generally with a partially transparent texture applied.Sprites do not cast shadows.

即Sprite是一个永远面向相机的平面，通常用来加载纹理，并且，sprite不接受阴影。要直观看体会Sprite,可以点击Sprite例子。

使用Sprite创建2D形状

Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画（wiki）。在threejs中，可以使用Sprite加载图像纹理，当然也包括用canvas创建的纹理，因此，canvas能创建什么图像，Sprite就能创建什么形状。下面的例子使用Sprite创建了一个圆：

function createSpriteShape(){/*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/let canvas = document.createElement("canvas");canvas.width = 120;canvas.height = 120;/*2、创建图形，这部分可以去看w3c canvas教程*/let ctx = canvas.getContext("2d");ctx.fillStyle = "#ff0000";ctx.arc(50,50,50,0,2*Math.PI);ctx.fill();/*3、将canvas作为纹理，创建Sprite*/let texture = new THREE.Texture(canvas);texture.needsUpdate = true; //注意这句不能少let material = new THREE.SpriteMaterial({map:texture});let mesh = new THREE.Sprite(material);/*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/mesh.scale.set(100,100,1);return mesh;
}

使用Sprite创建文字

function createSpriteText(){//先用画布将文字画出let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");ctx.fillStyle = "#ffff00";ctx.font = "Bold 100px Arial";ctx.lineWidth = 4;ctx.fillText("ABCDRE",4,104);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.set(0,0,98);return textObj;
}

设置材质透明

使用图片或canvas作为纹理的时候，图片或纹理的底图可能会遮住别的图形，如下：

此时，可以将材质设为透明，如下：

let material = new THREE.SpriteMaterial({map:texture,**transparent:true**});

设置后效果如下：

持续更新【Sprite精灵】

threejs精灵(Sprite)相关推荐

threejs 精灵Sprite旋转位置偏移问题
使用精灵贴图文本标签,这时候会遇到一个问题,你标签的位置会随着场景的旋转和平移,位置会视觉上看起来位置有偏移,那是因为Sprite的默认旋转中心是(0.5,0.5),官网是这样说的为了更直观的表达这 ...
THREEJS在场景图上动态标识一些文字方法二（文字精灵sprite）
threejs文字精灵sprite的实现 1.手动添加文字精灵 2.通过json动态获取文字精灵,并进行交互 3.point模型只表示位置 4.CircleGeometry实现 5.3.PlaneGe ...
Threejs使用精灵Sprite作为标签，鼠标悬浮精灵上时鼠变小手
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用模型进行展示,使用精灵Sprite作为标签,鼠标悬浮精灵上时变小手. 效果图如下: 2,主要说明使用精灵Sprite作为标 ...
html5 精灵动画,H5案例分享：CreateJs-EaselJS精灵Sprite类和简明动画
CreateJs-EaselJS精灵Sprite类和简明动画一.EaselJS中Sprite类 EaselJS精灵Sprite类是用spritesheet实例显示一个帧或帧序列(即动画).精灵片是一 ...
J2ME游戏API 游戏精灵Sprite
在J2ME手机游戏开发中,MIDP2.0以上版本提供了一个有助于游戏制作的类,该类称为游戏精灵Sprite,在J2ME中使用游戏精灵Sprite可以简单的管理角色动画使用的frame图像. 以下我将 ...
unity加载sprite_UGUI中将图片转换成精灵Sprite
上一篇中讲述了NGUI动态打图集的功能,提到UGUI将图片转换长Sprite格式,其实网上也有好多,那我在这简单的说一下,using UnityEngine; using System.Collect ...
Unity中精灵Sprite,精灵图集SpriteAtlas详解
前言 Unity3D中UGUI的Image组件.Unity2D的SpriteRender组件等都需要使用Sprite类型的图片. 用户在导入图片资源后,可以切换TextureType为Sprite(2 ...
XNA游戏：精灵Sprite的概念
概要精灵是取代3D空间而直接绘制在屏幕上的2D位图, 通常用来显示一些玩家信息, 如生命值.生命数或者得分.一些游戏,特别是早期的游戏,几乎全部由精灵组成. 精灵在屏幕上是按坐标定位的. 屏幕的宽和 ...
threejs精灵模型_THREEJS中的3D(动画)模型
关于web模型,这是个很难讲的主题,因为它跨了比较多的领域,之前也在文章中吐槽过: 然而,当时并没有很好的去解释3d模型的原理,原因主要是模型经手的并不多,并没有形成很好的方法论,只能大致说一下当时项 ...

threejs精灵(Sprite)

Sprite精灵

使用Sprite创建2D形状

使用Sprite创建文字

设置材质透明

threejs精灵(Sprite)相关推荐

最新文章

热门文章