devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Three.js中光线投射Raycaster的简单使用案例 与模型的交互，当鼠标移动到模型时出现信息框_threejs点击模型出现对话框

作者：盐析白兔 | 2024-08-04 16:24:15

赞

踩

threejs点击模型出现对话框

目录

说明 

 创建两个模型

基础代码 

基础代码效果图如下：

重点！！！ 

 创建光线投射Raycaster实例步骤

1.准备一个盒子，用来展示模型的长宽高信息，初始化时先隐藏该盒子

2.创建光线投射Raycaster实例

        1.创建 Raycaster 实例 

          2.为窗口绑定事件 pointermove 想使用点击事件 click 的可以自行修改

        3.定义窗口触发 pointermove 事件所执行的回调函数 onPointerMove 

        4.通过摄像机和鼠标位置更新射线

完整代码如下：

效果图如下 ：

 结尾

说明 

说明：该案例是基于Vue2创建，如果未使用Ve2请自行修改代码，另外由于使用的是已经下载的Three.js，所以运行前请确保已安装Three.js以方便引入，未安装可以使用 npm install three 进行安装

 创建两个模型

先创建两个基本模型为 光线投射Raycaster 做铺垫

下面是一个名为 model 组件的编写，读者可以自行挂载在Vue示例上  

另外如果有 model 命名带来的错误，可以在文件 vue.config.js 中添加配置 lintOnSave: false

基础代码 

  1. <template>
  2.     <div ref="container">
  3.         
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import * as THREE from "three";
  9. import {OrbitControls} from "three/addons/controls/OrbitControls.js";
  10.  
  11. export default {
  12.     name: "model",
  13.     data() {
  14.         return {
  15.             //场景
  16.             scene: null,
  17.             //摄影机
  18.             camera: null,
  19.             //渲染器
  20.             renderer: null,
  21.             //相机控件
  22.             controls: null,
  23.         }
  24.     },
  25.     mounted() {
  26.         // 调用方法创建场景、相机、渲染器和相机控件
  27.         this.createScene();
  28.         this.createCamera();
  29.         this.createRenderer();
  30.         this.createControls();
  31.  
  32.         // 创建两个不同大小的立方体模型,材质使用不受光照影响的 MeshBasicMaterial 材质
  33.         const cube1 = new THREE.Mesh(
  34.             new THREE.BoxGeometry(3, 2, 1),
  35.             new THREE.MeshBasicMaterial({color: 0xff0000})
  36.         );
  37.         const cube2 = new THREE.Mesh(
  38.             new THREE.BoxGeometry(1, 2, 3),
  39.             new THREE.MeshBasicMaterial({color: 0x00ff00})
  40.         );
  41.         cube1.position.set(-2, 0, 0);
  42.         cube2.position.set(2, 0, 0);
  43.         this.scene.add(cube1, cube2);
  44.  
  45.         const render = () => {
  46.             //手动更改相机的变换后，必须调用controls.update（）
  47.             this.controls.update()
  48.             this.renderer.render(this.scene, this.camera);
  49.             requestAnimationFrame(render);
  50.         };
  51.         render();
  52.     },
  53.     methods: {
  54.         //创建场景
  55.         createScene() {
  56.             this.scene = new THREE.Scene();
  57.         },
  58.         //创建相机
  59.         createCamera() {
  60.             this.camera = new THREE.PerspectiveCamera(
  61.                 45,
  62.                 window.innerWidth / window.innerHeight,
  63.                 1,
  64.                 1000
  65.             );
  66.             this.camera.position.set(0, 0, 5);
  67.         },
  68.         //创建渲染器
  69.         createRenderer() {
  70.             this.renderer = new THREE.WebGLRenderer({antialias: true}); //antialias:是否执行抗锯齿,默认为false.
  71.             this.renderer.setSize(window.innerWidth, window.innerHeight);
  72.             this.$refs.container.appendChild(this.renderer.domElement);
  73.         },
  74.         //创建相机控件
  75.         createControls() {
  76.             this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  77.         }
  78.     }
  79. };
  80. </script>
  81.  
  82. <style scoped>
  83.  
  84. </style>

基础代码效果图如下：

重点！！！ 

 创建光线投射Raycaster实例步骤

1.准备一个盒子，用来展示模型的长宽高信息，初始化时先隐藏该盒子

  1. template>
  2.     <div ref="container">
  3.         <div id="infoBox"></div>
  4.     </div>
  5. </template>
  6.  
  7. //盒子样式如下： (要是觉得盒子丑大家可以自己修改，哈哈)
  8. #infoBox{
  9.     display: none;
  10.     position: absolute;
  11.     top: 0;
  12.     left: 0;
  13.     background-color: #fff;
  14.     border:1px solid #ccc;
  15.     padding: 5px;
  16. }

2.创建光线投射Raycaster实例

为了大家方便对照官方文档学习，所以我直接引用了官文文档的源码，大家可以对照官文修改代码进行实验加深理解 

官网地址：https://threejs.org/docs/index.html#api/zh/core/Raycaster

        1.创建 Raycaster 实例 

  1. const raycaster = new THREE.Raycaster();
  2.  //创建一个二维向量为后面 Raycaster 实例调用 .setFromCamera 方法做准备
  3. const pointer = new THREE.Vector2();

         2.为窗口绑定事件 pointermove 想使用点击事件 click 的可以自行修改

window.addEventListener('pointermove', onPointerMove);

        3.定义窗口触发 pointermove 事件所执行的回调函数 onPointerMove 

  1. const infoBox = document.querySelector('#infoBox') //获取Dom元素
  2. const onPointerMove = (event) => {  //如果不使用箭头函数需要注意this指向问题
  3.     // 修改 pointer 的值：将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  4.     pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  5.     pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
  6.     //计算物体和射线的焦点
  7.     // 方法 .intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Array
  8.     // 作用：检测所有在射线与这些物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个），
  9.     //      相交部分和.intersectObject所返回的格式是相同的。
  10.     const intersects = raycaster.intersectObjects(this.scene.children);//返回和射线相交的一组物体，值为数组
  11.     //没有相交物体时
  12.     if (intersects.length === 0) {
  13.         console.log('隐藏');
  14.         infoBox.style.display = "none";
  15.         return;
  16.     }
  17.     //有相交物体时
  18.     if (intersects.length > 0) { //其中数组第一个值的 object属性值就是鼠标放在屏幕上离我们最近的模型
  19.         console.log('显示');
  20.         //设置信息
  21.         infoBox.innerHTML = `长：${intersects[0].object.geometry.parameters.depth}
  22.         <br>宽：${intersects[0].object.geometry.parameters.width}<br>
  23.         高：${intersects[0].object.geometry.parameters.height}`;
  24.         infoBox.style.display = "block";
  25.         console.log(event.clientX);
  26.         infoBox.style.left = event.clientX + "px"; //记得一定要拼接 px 我就是开始忘记了，导致信息框不移动
  27.         infoBox.style.top = event.clientY + "px"
  28.     }
  29. }

        4.通过摄像机和鼠标位置更新射线

raycaster.setFromCamera(pointer, this.camera);

以上就是 光线投射Raycaster 的使用步骤

完整代码如下：

  1. <template>
  2.     <div ref="container">
  3.         <div id="infoBox"></div>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import * as THREE from "three";
  9. import {OrbitControls} from "three/addons/controls/OrbitControls.js";
  10.  
  11. export default {
  12.     name: "model",
  13.     data() {
  14.         return {
  15.             //场景
  16.             scene: null,
  17.             //摄影机
  18.             camera: null,
  19.             //渲染器
  20.             renderer: null,
  21.             //相机控件
  22.             controls: null,
  23.         }
  24.     },
  25.     mounted() {
  26.         // 调用方法创建场景、相机、渲染器和相机控件
  27.         this.createScene();
  28.         this.createCamera();
  29.         this.createRenderer();
  30.         this.createControls();
  31.  
  32.         // 创建两个不同大小的立方体模型,材质使用不受光照影响的 MeshBasicMaterial 材质
  33.         const cube1 = new THREE.Mesh(
  34.             new THREE.BoxGeometry(3, 2, 1),
  35.             new THREE.MeshBasicMaterial({color: 0xff0000})
  36.         );
  37.         const cube2 = new THREE.Mesh(
  38.             new THREE.BoxGeometry(1, 2, 3),
  39.             new THREE.MeshBasicMaterial({color: 0x00ff00})
  40.         );
  41.         cube1.position.set(-2, 0, 0);
  42.         cube2.position.set(2, 0, 0);
  43.         this.scene.add(cube1, cube2);
  44.  
  45.         //1.创建 Raycaster 实例
  46.         const raycaster = new THREE.Raycaster();
  47.         const pointer = new THREE.Vector2(); //创建一个二维向量为后面 Raycaster 实例调用 .setFromCamera 方法做准备
  48.         //3.定义窗口触发 pointermove 事件所执行的回调函数 onPointerMove
  49.         const infoBox = document.querySelector('#infoBox') //获取Dom元素
  50.         const onPointerMove = (event) => {  //如果不使用箭头函数需要注意this指向问题
  51.             // 修改 pointer 的值：将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  52.             pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  53.             pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
  54.             //计算物体和射线的焦点
  55.             // 方法 .intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Array
  56.             // 作用：检测所有在射线与这些物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个），
  57.             //      相交部分和.intersectObject所返回的格式是相同的。
  58.             const intersects = raycaster.intersectObjects(this.scene.children);//返回和射线相交的一组物体，值为数组
  59.             //没有相交物体时
  60.             if (intersects.length === 0) {
  61.                 console.log('隐藏');
  62.                 infoBox.style.display = "none";
  63.                 return;
  64.             }
  65.             //有相交物体时
  66.             if (intersects.length > 0) { //其中数组第一个值的 object属性值就是鼠标放在屏幕上离我们最近的模型
  67.                 console.log('显示');
  68.                 //设置信息
  69.                 infoBox.innerHTML = `长：${intersects[0].object.geometry.parameters.depth}
  70.         <br>宽：${intersects[0].object.geometry.parameters.width}<br>
  71.         高：${intersects[0].object.geometry.parameters.height}`;
  72.                 infoBox.style.display = "block";
  73.                 console.log(event.clientX);
  74.                 infoBox.style.left = event.clientX + "px"; //记得一定要拼接 px 我就是开始忘记了，导致信息框不移动
  75.                 infoBox.style.top = event.clientY + "px"
  76.             }
  77.         }
  78.         //2.为窗口绑定事件 pointermove 想使用点击事件 click 的可以自行修改
  79.         window.addEventListener('pointermove', onPointerMove);
  80.  
  81.         const render = () => {
  82.             // 4.通过摄像机和鼠标位置更新射线
  83.             raycaster.setFromCamera(pointer, this.camera);
  84.             //手动更改相机的变换后，必须调用controls.update（）
  85.             this.controls.update()
  86.             this.renderer.render(this.scene, this.camera);
  87.             requestAnimationFrame(render);
  88.         };
  89.         render();
  90.     },
  91.     methods: {
  92.         //创建场景
  93.         createScene() {
  94.             this.scene = new THREE.Scene();
  95.         },
  96.         //创建相机
  97.         createCamera() {
  98.             this.camera = new THREE.PerspectiveCamera(
  99.                 45,
  100.                 window.innerWidth / window.innerHeight,
  101.                 1,
  102.                 1000
  103.             );
  104.             this.camera.position.set(0, 0, 5);
  105.         },
  106.         //创建渲染器
  107.         createRenderer() {
  108.             this.renderer = new THREE.WebGLRenderer({antialias: true}); //antialias:是否执行抗锯齿,默认为false.
  109.             this.renderer.setSize(window.innerWidth, window.innerHeight);
  110.             this.$refs.container.appendChild(this.renderer.domElement);
  111.         },
  112.         //创建相机控件
  113.         createControls() {
  114.             this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  115.         }
  116.     }
  117. };
  118. </script>
  119.  
  120. <style scoped>
  121. #infoBox {
  122.     display: none;
  123.     position: absolute;
  124.     top: 0;
  125.     left: 0;
  126.     background-color: #fff;
  127.     border: 1px solid #ccc;
  128.     padding: 5px;
  129. }
  130. </style>

效果图如下 ：

 结尾

要是读者觉得帮到你们了，麻烦点个赞鼓励一下，以便鼓舞我这个新手小白，谢谢大家

另外大家要有什么疑问或者是指教都可以在评论区发出来，作者看到一定回复，谢谢大家

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/928630
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号