Threejs使用精灵Sprite作为标签，鼠标悬浮精灵上时鼠变小手

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：引用模型进行展示，使用精灵Sprite作为标签，鼠标悬浮精灵上时变小手。

效果图如下：

2，主要说明

使用精灵Sprite作为标签，SpriteMaterial作为材质，使用精灵作为标签，就需要把精灵对象插入到父对象中，作为子对会随着父对象的位置变化而跟着变化，代码如下：

// 创建精灵函数，传入父对象
function createLableSprite_jcy(group) {
	var spriteMaterial = new THREE.SpriteMaterial({
		map: new THREE.TextureLoader().load("jingling.png"), //设置精灵纹理贴图
		transparent: true, //开启透明(纹理图片png有透明信息)
	});
	// 创建精灵模型对象，不需要几何体geometry参数
	var sprite = new THREE.Sprite(spriteMaterial);
	sprite.scale.set(3, 3, 3); //精灵大小
	// 把精灵模型插入到模型对象的父对象下面
	group.add(sprite);
	// 父对象group位置变化,网格模型及其对象的标签同样发生变化
	group.position.set(group.position.x, group.position.y, group.position.z);
	// 表示标签信息的精灵模型对象相对父对象设置一定的偏移
	sprite.translateY(600);

	mesh.push(sprite);
	return group;
}

鼠标悬浮精灵上时，鼠标变小手，利用鼠标移动的位置对应的屏幕坐标转化得到的世界坐标和相机的世界坐标两个参数创建一个射线对象Raycaster，判断射线与场景中的对象是否相交，返回相交的场景对象。

document.addEventListener('mousemove', onDocumentMouseMove, false);

function onDocumentMouseMove(event) {
	// 点击屏幕创建一个向量
	var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
		.innerHeight) * 2 + 1, 0.5);
	vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标
	var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    // 计算射线和参数[meth]中的模型对象是否相交，参数数组中可以设置多个模型模型对象
	var intersects = raycaster.intersectObjects([meth], true);
	if (intersects.length > 0) {// 判断参数[boxMesh]中模型对象是否与射线相交
		intersects.forEach(function(e) {
			var obj = e.object;
            // 判断相交的是否是精灵对象并且是对应标签的名称，如果是鼠标变小手
			if (obj instanceof THREE.Sprite && obj.name.indexOf("shexiangtou") > -1) {
				document.body.style.cursor = "pointer";
			}
		})
	}
	else {
		document.body.style.cursor = "default";
	}
}

3，源码和模型

需要完整代码、模型或者其他源码，请进入博客首页查看其他文章或者留言

联系我微信：1171053128