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

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

【Html】鼠标移动上去变色移动上去变小手
"hover"意味着移动上去的变化,可以运用到菜单栏,甚至一些图片特效上. .menu_text { ...
java 鼠标变成手型_当鼠标放在按钮上时让指针变为手型
附:cursor属性收集光标类型 CSS 十字准心 cursor: crosshair; 手 cursor: pointer; cursor: hand; 写两个是为了照顾IE5,它只认hand ...
CSS 让鼠标呈现手型,鼠标悬浮变小手
CSS 让鼠标呈现手型,鼠标悬浮变小手添加样式 cursor:pointer 就行了
前端：a 鼠标悬浮变小手
作为一个java编程的小白,java还没学太明白,应工作要求,也要开始学习前端知识了,在此记录学到的知识点. 为<a>加样式,是鼠标悬浮变小手: cursor:pointer; 变小手 ...
CSS3——鼠标变小手
鼠标移上去变小手样式第一种方式:为该元素添加a标签 <a href="javascript:video(0);"> </a> 第二种方式: 为该元素添加c ...
用css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...
1-Vue中鼠标悬停变小手
1.页面 <el-col :span="16"><div class="information-title">这是文字,鼠标可以悬停的文 ...
Web前端鼠标变小手两种实现
CSS实现方式: cursor:pointer;//鼠标变小手 js实现方式: <button id="abc"class="botton_qr_download& ...
鼠标指向变小手css,用css 添加手状样式,鼠标移上去变小手,变小手
简介这篇文章主要介绍了用css 添加手状样式,鼠标移上去变小手,变小手以及相关的经验技巧,文章约1426字,浏览量431,点赞数1,值得参考! 用css 添加手状样式,鼠标移上去变小手,变小手 cur ...

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

1，介绍

2，主要说明

3，源码和模型

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

最新文章

热门文章