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

简介: 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,源码和模型


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

目录
相关文章
|
6月前
鼠标经过图片图片放大效果
鼠标经过图片图片放大效果
47 0
|
1月前
threeJs用精灵模型Sprite实现下雨效果
这篇文章介绍了使用Three.js中的Sprite(精灵)模型来实现下雨特效的方法和技术细节。
54 2
threeJs用精灵模型Sprite实现下雨效果
|
1月前
ThreeJs的场景实现鼠标拖动旋转控制
这篇文章介绍了如何在Three.js中实现通过鼠标拖动来旋转场景中的模型,并提供了实现这一功能的代码示例。
53 0
|
6月前
鼠标不同方位移入特效
鼠标不同方位移入特效
|
Web App开发 JavaScript 前端开发
Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
  Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能。放大的图像可以显示在镜头本身或它的外部容器中。Magnifier.js 使用Event.js 作为跨浏览器的事件处理器。
1659 0
Qt 使用一张图片实现转圈的动画效果
这个是显示的效果,以前用的时候就是网上照一张Gif动画,完了加载进去。我们可以在Qt中使用Movie来操纵Gif动画。 这个试下方式就是通过painter绘制一个图片,通过按照一定的规律旋转图片实现的。
835 0
Qt 使用一张图片实现转圈的动画效果
3d旋转焦点图
在线演示 本地下载
648 0
fbh
|
JavaScript 前端开发
鼠标移到图片上图片放大
一 在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。
fbh
1875 0
kanzi如何录制动画制作跳动的小球
实现效果如下   1)导入素材,建动画。 在library中,右键Animations > Animation Clips > Animation Clip,打开Animation Clip Editor。
1379 0