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


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

zuoben
+关注
目录
打赏
0
0
0
0
13
分享
相关文章
Threejs实现标签,自定义样式显示标签
Threejs实现标签,自定义样式显示标签
1688 0
Threejs实现标签,自定义样式显示标签
ThreeJs通过canvas和Sprite添加标签
这篇文章介绍了在Three.js中利用Canvas和Sprite实现动态文本标签的方法,使得标签可以跟随模型并在3D空间中始终保持面向摄像机。
373 0
ThreeJs通过canvas和Sprite添加标签
Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
【8月更文挑战第7天】Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
878 4
Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
Threejs实现模拟管道液体流动
Threejs实现模拟管道液体流动
2846 0
Threejs实现模拟管道液体流动
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
2448 0
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
|
11月前
|
【threejs教程】终于搞明白了!原来threejs中的透视相机这么简单!
【8月更文挑战第5天】深入学习threejs中的透视相机!
617 2
【threejs教程】终于搞明白了!原来threejs中的透视相机这么简单!
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
1102 15
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档
Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档
1243 0
|
11月前
|
API
【threejs教程】场景视角切换的神器:轨道控制器
【8月更文挑战第5天】threejs教程:场景视角切换的神器,轨道控制器
660 1
【threejs教程】场景视角切换的神器:轨道控制器
Threejs实现镜头跟随物体移动效果,镜头拐弯并保持运动方向
Threejs实现镜头跟随物体移动效果,镜头拐弯并保持运动方向
1530 0
Threejs实现镜头跟随物体移动效果,镜头拐弯并保持运动方向
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问