在三个js中使用鼠标悬停更改网格的颜色

2024-03-19

我已经编写了一个 WebGL 脚本,该脚本使用 jsonloader 和 Three.js 显示多个网格,现在我想添加 MouseOver 和 onClick 事件。第一个是当鼠标悬停在网格上时简单地更改网格的颜色:

function render() {
  requestAnimationFrame(render);    
  mesh.rotation.z += 0.090;    
  raycaster.setFromCamera(mouse, camera);    
  var intersects = raycaster.intersectObjects(scene.children);  

  for (var i = 0; i < intersects.length; i++) {    
    intersects[i].object.material.color.set(0xff0000);    
  }    
  renderer.render(scene, camera);

}

上面的渲染函数允许我通过将鼠标悬停在任何网格上将其颜色更改为红色。我尝试了几种 if/else 变体来尝试让这种效果仅在鼠标位于网格上时才起作用,但我无法让它起作用 - 它只是保持红色。谁能建议我如何修改我的脚本?

Thanks.


您必须在鼠标移开时将颜色设置回原始颜色,这不会自动发生......

Check 这个例子 http://stemkoski.github.io/Three.js/Mouse-Over.html on http://stemkoski.github.io http://stemkoski.github.io具体更新方法:

这是一个演示的小提琴 https://jsfiddle.net/wilt/52ejur45/更新到最新的 Three.js master:

// create a Ray with origin at the mouse position
//   and direction into the scene (camera direction)
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

// create an array containing all objects in the scene with which the ray intersects
var intersects = ray.intersectObjects( scene.children );

// INTERSECTED = the object in the scene currently closest to the camera 
//      and intersected by the Ray projected from the mouse position    

// if there is one (or more) intersections
if ( intersects.length > 0 )
{
    // if the closest object intersected is not the currently stored intersection object
    if ( intersects[ 0 ].object != INTERSECTED )
    {
        // restore previous intersection object (if it exists) to its original color
        if ( INTERSECTED )
            INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
        // store reference to closest object as current intersection object
        INTERSECTED = intersects[ 0 ].object;
        // store color of closest object (for later restoration)
        INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
        // set a new color for closest object
        INTERSECTED.material.color.setHex( 0xffff00 );
    }
}
else // there are no intersections
{
    // restore previous intersection object (if it exists) to its original color
    if ( INTERSECTED )
        INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
    // remove previous intersection object reference
    //     by setting current intersection object to "nothing"
    INTERSECTED = null;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在三个js中使用鼠标悬停更改网格的颜色 的相关文章

随机推荐

  • 在 location.onPopState() 回调中更改组件属性

    我试图在组件中设置一个标志 以了解用户单击浏览器的 上一页 按钮是否加载视图 当在组件中定义时 fromBackButton 属性设置为 false 在构造函数中我有这样的代码 this location subscribe popStat
  • MongoDB 上限集合和单调递增索引

    在 MongoDB 上限集合中 我是否可以保证 id字段随着插入顺序单调增加 如果没有 我如何查询给定文档之后插入的所有文档 不需要任何索引 因为我应该能够利用它们的自然顺序 ObjectId 的一部分是时间戳 因此 如果 ObjectId
  • System.InvalidOperationException:IDX20803:无法从 .NET 5 的“System.String”获取配置

    我一直在实现 IdentityServer4 来为我的 React 应用程序提供授权 我在本地开发环境中工作 但在部署到 Windows Server 2016 中的 IIS 后遇到问题 我能够通过 connect token 端点生成访问
  • Python 相当于 PHP 的内爆?

    Python 中是否有与 PHP 内爆相当的东西 我已经读入并分割了一组分隔单词 现在我想按随机顺序对它们进行排序 并打印出单词之间有空格 implode 将数组元素与字符串连接起来 http php net manual en funct
  • 在 Windows XP、SP3 上使用 RawCap 嗅探本地主机

    我正在尝试使用 RawCap 来嗅探 Windows 本地主机 然而 与它所宣称的能力相反 它并没有发挥作用 我按如下方式启动它 rawcap 127 0 0 1 回声 pcap 然后我运行我编写的一个 echo TCP 客户端 服务器测试
  • 如何以不同的配置启动 emacs

    我经常遇到以下流行的 emacs 版本 graphene https github com rdallasgray graphene prelude https github com bbatsov prelude emacs live h
  • 返回模拟方法的参数作为结果

    最简单的例子 我有以下方法 public String testMethod String arg 我想模拟这个方法以返回传递的参数作为结果 例如 testMethod aString returns aString testMethod
  • cURL 错误:SSL 对等证书或 SSH 远程密钥不正常 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions Using
  • 将 php 变量从一个文件传递到另一个文件?

    我在主文件 main php 中设置了一个变量 并且需要第二个文件 uploads php 来引用第一个文件中设置的变量 它现在返回未定义 第二个文件使用 load 加载到第一个文件中 下面的代码示例 Main php 内容 div div
  • 用于检查 MySQL TABLE LOCK 状态的 Php 脚本

    我使用 mysqldump 进行 MySQL 备份 mysqldump lock tables DB大约2GB 因此mysqldump需要很长时间 如果有人在备份期间尝试访问数据库 我会显示一条消息 数据库正在备份 请在10分钟后返回 我的
  • Android中View和ViewGroup的区别

    和有什么区别View and a ViewGroup在Android编程中 View View对象是 Android 中用户界面 UI 元素的基本构建块 View是一个简单的矩形框 它响应用户的操作 例子是EditText Button C
  • 关于 [base + index*scale + disp] 和 AT&T disp(base,index,scale) 的几个问题

    Intel 和 AT T 语法中内存寻址的一般形式如下 base index scale disp Intel including GAS intel syntax noprefix disp base index scale AT T 我
  • AngularJS 的面向对象方法

    Angular 似乎没有提供内置的解决方案来定义具有属性和方法的类实例 并且需要开发人员来构建它 您认为这样做的最佳做法是什么 如何将其与后端链接 我收集的一些技巧使用工厂服务和命名函数 资料来源 Tuto 1 https medium c
  • 使用 Spring boot 和 JWT 保护 REST Api

    我正在尝试使用以下方法来保护我的 REST 服务器JWT我已经实现了自己的 这意味着 JWT 中没有 spring 的东西可以自行处理 其他一切都是Spring当然 我有这门课 JWTToken implements Authenticat
  • Windows 应用程序认证工具包验证期间出现“检测到高操作系统版本验证”错误

    运行时出现以下测试失败Windows App Certification Kit 10 0 Platform version launch Error Found The high OS version validation detecte
  • 尝试使用空的捕获[重复]

    这个问题在这里已经有答案了 假设我有一个 try 语句和空 catch 是不好的做法吗 例如 假设我有两次单独的尝试 其中一次可能失败 但另一次成功 或者两者都成功 或者任何可能的组合 处理这样的代码是不好的做法吗 Example if m
  • 定义全局 android.widget var/val 时的“lateinit”或“by懒惰”

    定义全局时android widget变量 例如TextView 是否最好使用lateinit or by lazy 我最初想使用by lazy会被首选 因为它是不可变的 但我不完全确定 by lazy例子 class MainActivi
  • React-router - 如何在 React 中的页面之间传递数据?

    我正在开发一个项目 必须将数据从一个页面传递到另一个页面 例如 我有data在第一页上 let data id 1 name Ford color Red id 2 name Hyundai color Blue 这是第一个组件页面 我在其
  • javascript:如何调试键盘事件

    想象一个使用自定义键盘事件处理程序的 Web 应用程序 该处理程序可能会执行事件冒泡或事件捕获 有没有办法 例如 Firefox Firebug 插件 调试每个击键 键盘事件 就像是 显示事件类型和所有属性 跟踪哪个 javascript
  • 在三个js中使用鼠标悬停更改网格的颜色

    我已经编写了一个 WebGL 脚本 该脚本使用 jsonloader 和 Three js 显示多个网格 现在我想添加 MouseOver 和 onClick 事件 第一个是当鼠标悬停在网格上时简单地更改网格的颜色 function ren