threejs学习04-InstancedMesh和Raycaster用户交互（获取鼠标位置、设置射线、射线与mesh的交互）

Henrik698

于 2022-10-24 15:55:18 发布

阅读量619

点赞数

CC 4.0 BY-SA版权

分类专栏： three js学习文章标签： javascript

本文链接：https://blog.csdn.net/m0_37755995/article/details/127491578

本文介绍如何在ThreeJS中使用InstancedMesh和Raycaster进行用户交互，包括获取鼠标位置、设置射线以及实现射线与网格对象的交互。通过示例代码展示了一个计数功能的实现，详细解释了在vite项目中创建和配置所需文件的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

threejs学习04-InstancedMesh和Raycaster用户交互（获取鼠标位置、设置射线、射线与mesh的交互）

我们来实现这个threejs的示例效果：
https://threejs.org/examples/?q=rayc#webgl_instancing_raycast

依然是先新建一个js在vite项目中：
在这里插入图片描述
这里index.html需要调整：
增加一个div用于计数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div class="status">hello</div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

main.js进行调整：

import './style.css'

// import './01-basic-three.js'
// import './02-spot-light-shadow.js'
// import './03-helper-gui.js'
import './04-raycast.js'

style.css进行修改：

body{
   
   
  margin: 0;
}

div.status{
   
   
  position: absolute;
  color: white;
  padding: 10px;
}

04-raycast.js：

import *

最低0.47元/天解锁文章

200万优质内容无限畅学