three.js Raycaster(鼠标点击选中模型)
效果:
代码:
<template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red"></div><div class="box-right" style="text-align: left; padding: 10px"><div style="text-align: left">标准设备坐标系:</div><div>three.js Canvas画布具有一个标准设备坐标系,该坐标系的坐标原点是在canvas画布的中间位置,x轴水平向右,y轴竖直向上,标准设备坐标系的坐标值不是绝对值,是相对值,范围是[-1,1],也就是说canvas画布上任何一个位置的坐标,如果用标准设备坐标取衡量,那么坐标的所有值都在-1和 1之间;</div><div style="text-align: left; margin-top: 10px">屏幕坐标转为 标准设备坐标:</div><div style="text-align: left"><pre>// 坐标转化公式addEventListener('click',function(event){const px = event.offsetX;const py = event.offsetY;//屏幕坐标px、py转标准设备坐标x、y//width、height表示canvas画布宽高度const x = (px / width) * 2 - 1;const y = -(py / height) * 2 + 1;})</pre></div></div></div></el-main></el-container></div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";export default {data() {return {name: "",scene: null,camera: null,renderer: null,effectComposer: null,mesh: null,geometry: null,group: null,material: null,texture: null,position: null,outlinePass: null,canvasWidth: 1000,canvasHeight: 800,color: [],meshArr: [],};},created() {},mounted() {this.name = this.$route.query.name;const numbers = Array.from({ length: 255 }, (_, i) => i);// const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');this.color = [...numbers];this.init();},methods: {goBack() {this.$router.go(-1);},addEventListenerFn() {// canvas画布添加监听事件document.getElementById("threejs").addEventListener("click", (event) => {// 1,坐标转换const point_x = event.offsetX; // 获取x方向当前点击点距离原点的距离;向右为正(原点是当前元素的左上角点)const point_y = event.offsetY; // 获取y方向当前点击点距离原点的距离;向下为正(原点是当前元素的左上角点)const x = (point_x / this.canvasWidth) * 2 - 1;const y = -(point_y / this.canvasHeight) * 2 + 1;// 2,创建射线投射器对象,const raycaster = new this.$three.Raycaster();// 3,射线计算,(参数是鼠标点击位置,相机参数)raycaster.setFromCamera(new this.$three.Vector2(x, y), this.camera);// 4,射线交叉计算// const mesh_arr = []// if(!this.scene)return;// this.scene.traverse(m => {// console.log('m',m);// if(m.isMesh != undefined && m.isMesh) {// mesh_arr.push(m);// }// })const intersects = raycaster.intersectObjects(this.meshArr);if (intersects.length > 0) {if (this.effectComposer) {// intersects[0].object.material.color.set(0xff0000);this.outlinePass.selectedObjects = [intersects[0].object];this.renderFun();}}});},// 随机颜色randomColor() {// 要生成min-max之间的随机数,公式为:Math.random()*(max-min+1)+minlet i = Math.floor(Math.random() * (this.color.length - 0 + 1) + 0);let j = Math.floor(Math.random() * (this.color.length - 0 + 1) + 0);let k = Math.floor(Math.random() * (this.color.length - 0 + 1) + 0);this.position = new this.$three.Vector3(i, j, k);return new this.$three.Color("rgb(" +this.color[i] +", " +this.color[j] +", " +this.color[k] +")");},init() {// 创建场景对象this.scene = new this.$three.Scene();// 创建立方缓存几何体对象for (let i = 0; i < 3; i++) {this.boxGeometry();}// 创建辅助坐标轴对象const axesHelper = new this.$three.AxesHelper(200);this.scene.add(axesHelper);// 创建正交投影相机对象// this.camera = new this.$three.PerspectiveCamera(60,1,0.01,1000);// this.camera.position.set(600,600,600);// this.camera.lookAt(0,0,0);// 创建透视投影相机对象this.camera = new this.$three.OrthographicCamera(-500,500,400,-400,0,1000);this.camera.position.set(200, 200, 200);this.camera.lookAt(0, 0, 0);// const helper = new this.$three.CameraHelper( this.camera );// this.scene.add( helper );// 创建渲染器对象this.renderer = new this.$three.WebGLRenderer();this.renderer.setSize(this.canvasWidth, this.canvasHeight);this.renderer.render(this.scene, this.camera);window.document.getElementById("threejs").appendChild(this.renderer.domElement);// 创建相机空间轨道控制器const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {// this.renderer.render(this.scene, this.camera);this.effectComposer.render();});// 调用后处理方法this.effectComposerFn();// 调用 监听 点击事件的方法this.addEventListenerFn();},// 创建盒模型的方法boxGeometry() {// 创建网格基础材质对象const material = new this.$three.MeshBasicMaterial({color: this.randomColor(),});// 创建立方几何体对象const geometry = new this.$three.BoxGeometry(this.position.x,this.position.y,this.position.z);// 创建网格模型对象const mesh = new this.$three.Mesh(geometry, material);if (this.position) {// 网格模型设置位置mesh.position.set(this.position.x, this.position.y, this.position.z);}this.meshArr.push(mesh);this.scene.add(mesh);},// 后处理方法effectComposerFn() {// 创建后处理对象this.effectComposer = new EffectComposer(this.renderer);// 创建后处理渲染器通道对象const renderPass = new RenderPass(this.scene, this.camera);// 后处理对象 添加渲染器通道this.effectComposer.addPass(renderPass);// 创建发光描边对象this.outlinePass = new OutlinePass(new this.$three.Vector2(this.canvasWidth, this.canvasHeight),this.scene,this.camera);// 设置发光描边颜色this.outlinePass.visibleEdgeColor.set(0xE0F409);// 设置发光描边厚度this.outlinePass.edgeThickness = 5;// 描边亮度this.outlinePass.edgeStrength = 20;// 设置发光描边频率this.outlinePass.pulsePeriod = 2;this.effectComposer.addPass(this.outlinePass);},renderFun() {// 调用后处理对象的render方法进行渲染,this.effectComposer.render();window.requestAnimationFrame(this.renderFun);},},
};
</script>
//
<style lang="less" scoped>
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;width: 100%;.box-right {}
}
</style>
相关文章:
three.js Raycaster(鼠标点击选中模型)
效果: 代码: <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div class"box-right"…...
Springboot整合RocketMQ 基本消息处理
目录 1. 同步消息 2. 异步消息 3. 单向消息 4. 延迟消息 5. 批量消息 6. 顺序消息 7. Tag过滤 导入依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId></dependency> …...
红外传感器深入解析
引言 宇宙间的任何物体只要其温度超过零度就能产生红外辐射,事实上同可见光一样,其辐射能够进行折射和反射,这样便产生了红外技术,利用红外光探测器因其独有的优越性而得到广泛的重视,并在军事和民用领域得到了广泛…...
18、Kubernetes核心技术 - InitContainer(初始化容器)
目录 一、概述 二、使用InitContainer 一、概述 InitContainer即初始化容器,是 K8S官方为我们提供的一个可以用来判断环境是否已经满足运行 Pod 应用前所需要的条件。 比如我们有一个应用,需要部署到Tomcat环境,那么在部署这个应用Pod之前…...
electron进程通信之预加载脚本和渲染进程对主进程通信
主进程和预加载脚本通信 主进程 mian,js 和预加载脚本preload.js,在主进程中创建预加载脚本, const createWindow () > {// Create the browser window.const mainWindow new BrowserWindow({width: 300,height: 300,// 指定预加载脚本webPreferences: {preload: path.j…...
如何有效使用 .gitignore 文件
在任何使用 Git 的软件项目中,.gitignore 文件都是一个必不可少的工具。它帮助开发者定义哪些文件和目录应该被 Git 忽略,从而保持代码库的整洁和管理的简便性。 什么是 .gitignore? .gitignore 文件是一个文本文件,您可以在其中指…...
大数据毕设分享 flink大数据淘宝用户行为数据实时分析与可视化
文章目录 0 前言1、环境准备1.1 flink 下载相关 jar 包1.2 生成 kafka 数据1.3 开发前的三个小 tip 2、flink-sql 客户端编写运行 sql2.1 创建 kafka 数据源表2.2 指标统计:每小时成交量2.2.1 创建 es 结果表, 存放每小时的成交量2.2.2 执行 sql &#x…...
大语言模型训练数据集
大语言模型的数据集有很多,以下是一些常用的: - 中文维基百科:这是一个包含大量中文文本的数据集,可用于训练中文语言模型。 - 英文维基百科:这是一个包含大量英文文本的数据集,可用于训练英文语言模型。 …...
python的课后练习总结4(while循环)
for循环用于针对序列中的每个元素的一个代码块。 while循环是不断的运行,直到指定的条件不满足为止。 while 条件: 条件成立重复执行的代码1 条件成立重复执行的代码2 …….. i 1while i < 5:print(i)i i 11、使用wh…...
Flink Connector 开发
Flink Streaming Connector Flink是新一代流批统一的计算引擎,它需要从不同的第三方存储引擎中把数据读过来,进行处理,然后再写出到另外的存储引擎中。Connector的作用就相当于一个连接器,连接Flink计算引擎跟外界存储系统。Flin…...
Golang leetcode707 设计链表 (链表大成)
文章目录 设计链表 Leetcode707不使用头节点使用头节点 推荐** 设计链表 Leetcode707 题目要求我们通过实现几个方法来完成对链表的各个操作 由于在go语言中都为值传递,(注意这里与值类型、引用类型的而区别),所以即使我们直接在…...
Django和Vue项目运行过程中遇到的问题及解决办法
这是我从CSDN上边买来的一个系统的资源,准备在此基础上改成自己的系统,但是在运行项目这一步上都把自己难为了好几天,经过不断的摸索,终于完成了第一步!!! 如果大家也遇到同样的问题࿰…...
Single-Image Crowd Counting via Multi-Column Convolutional Neural Network
Single-Image Crowd Counting via Multi-Column Convolutional Neural Network 论文背景人群密度方法过去的发展历史早期方法基于轨迹聚类的方法基于特征回归的方法基于图像的方法 Multi-column CNN用于人群计数基于密度图的人群计数通过几何自适应核生成密度图密度图估计的多列…...
el-cascader隐藏某一级的勾选框及vue报错Error in callback for watcher “options“的解决办法
今天用到饿了么的级联选择器时出现了这个报错Error in callback for watcher “options“: “TypeError: Cannot read propertie ‘level‘ of null,因为需求是在不同类型 el-cascader多选的时候默认是可以勾选所有级的选项的,如下图: 包含级联cascader的options、select的…...
2024美赛数学建模思路A题B题C题D题E题F题思路汇总 选题分析
文章目录 1 赛题思路2 美赛比赛日期和时间3 赛题类型4 美赛常见数模问题5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 美赛比赛日期和时间 比赛开始时间:北京时间2024年2月2日(周五ÿ…...
C++ 常用设计模式
一、工厂模式 from:C开发常用的设计模式及其实现详解 - 知乎 摘抄: 简单工厂、工厂、抽象工厂: 简单工厂需要工厂内部判断,而工厂模式不需要修改工厂类: 抽象工厂: 接上图: 未完待续.........
高性价比的高速吹风机/高速风筒解决方案,基于普冉单片机开发
高速吹风机是近些年非常火的一款产品,快速崛起并颠覆了传统吹风机,高速吹风机也成为了传统吹风机替代的一个大趋势。高速吹风机是利用高转速产生的大风量来快速吹干头发,由于其精巧的外观设计、超低的噪声、出色的干发效果,高速吹…...
toRefs的用法
文章目录 toRefs是什么toRefs的作用以及为什么要用它? toRefs是什么 toRefs 是 Vue 3 Composition API 中的一个函数,它用于将响应式对象转换为普通对象,其中对象的每个属性都是 ref 对象。这是因为在 Vue 3 中,reactive 创建的对…...
MySQL基础篇(三)约束
一、概述 概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。 目的:保证数据库中数据的正确、有效性和完整性。 分类: 注意:约束是作用于表中字段上的,可以在创建表/修改表的时候添加约束。 二…...
Java进阶 1-2 枚举
目录 常量特定方法 职责链模式的枚举实现 状态机模式的枚举实现 多路分发 1、使用枚举类型实现分发 2、使用常量特定方法实现分发 3、使用EnumMap实现分发 4、使用二维数组实现分发 本笔记参考自: 《On Java 中文版》 常量特定方法 在Java中,我们…...
一个人最大的内驱力是什么?
1、不因为孤独或外界压力而降低「生活标准“」的能力。 ”因为寂寞去约炮“、“因为家里催婚匆忙结婚“、”因为没谈过恋爱随便找个人交往。 “你的每一次选择都是在为自己想要的世界而投的票,往后余生是幸福还是悲剧,就是在这一次次 的将就与坚持死磕中…...
解决方法:公众号的API上传素材报错40005
公众号的API上传素材报错40005 Error uploading file : {"errcode":40005,"errmsg":"invalid file type hint: [YOkxGA0122w487] rid: 223442-323247e7bd5-5d75322d88"}上传错误原因分析: 之前成功的示例,文件名为"…...
音量控制软件sound control mac功能亮点
sound control mac可以帮助用户控制某个独立应用程序的音量,通过每应用音量,均衡器,平衡和音频路由独立控制每个应用的音频,还有整个系统的音量。 sound control mac功能亮点 每个应用程序的音量控制 独立控制应用的数量。 键盘音…...
Spring Boot 生产就绪中文文档-下
本文为官方文档直译版本。原文链接 由于篇幅较长,遂分两篇。上半部分中文文档 Spring Boot 生产就绪中文文档-下 度量标准入门受支持的监控系统AppOpticsAtlasDatadogDynatracev2 API自动配置手动配置 v1 API (旧版)与版本无关的设置 ElasticGangliaGraphiteHumioIn…...
DS|树结构及应用
题目一:DS树 -- 树的先根遍历(双亲转先序) 题目描述: 给出一棵树的双亲表示法结果,用一个二维数组表示,位置下标从0开始,如果双亲位置为-1则表示该结点为根结点 编写程序,输出该树…...
Java 读取超大excel文件
注意:此参考解决方案只是针对xlsx格式的excel文件! Maven <dependency><groupId>com.monitorjbl</groupId><artifactId>xlsx-streamer</artifactId><version>2.2.0</version> </dependency>读取方式1…...
K8S中的job和CronJob
Job 介绍 Kubernetes jobs主要是针对短时和批量的工作负载。它是为了结束而运行的,而不是像deployment、replicasets、replication controllers和DaemonSets等其他对象那样持续运行。 示例 apiVersion: batch/v1 kind: Job metadata:name: pispec:template:spec:r…...
中国文化文物和旅游统计年鉴,数据含pdf、excel等格式,文本形式呈现,可预览数据
基本信息. 数据名称: 中国旅游统计年鉴 数据格式: pdf、xls不定 数据时间: 2012-2020年 数据几何类型: 文本 数据坐标系: —— 数据来源:文化和旅游部、网络公开数据 原名为《中国旅游统计年鉴》2020年后更名为《中国文化文物和旅游统计年鉴》ÿ…...
Java版企业电子招标采购系统源码——鸿鹄电子招投标系统的技术特点
在数字化时代,采购管理也正经历着前所未有的变革。全过程数字化采购管理成为了企业追求高效、透明和规范的关键。该系统通过Spring Cloud、Spring Boot2、Mybatis等先进技术,打造了从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通过…...
go语言语法基础
文章目录 前言一、输入和输出常用的字符串格式化符号 二、注释三、Go常用基本语言数据类型数字类型布尔类型字符类型变量与常量数组和切片数组切片 map类型创建map增删改查特别提醒 指针 四、运算符五、条件判断语句if系列switch六、循环语句for循环标准写法死循环while循环do …...
wordpress首页缓存/seo排名优化代理
在前面关于加密的文章中,讲到使用open62541自带的python脚本create_self-signed.py去生成证书和私匙,该脚本运行需要安装库netifaces pip3 install netifaces在Linux下可以正确安装和使用。但是在Windows上却没那么顺利,该库依赖cl.exe&…...
网站加视频播放设计怎么做的/seo百度关键词优化
1、首先去(http://www.apachelounge.com/download/)下载一个合适的mod_fcgid 文件。 2、将解压后的文件改为mod_fcgid.dll 并复制到apache的module目录下面。3、打开httpd.conf文件,添加如下内容:1 LoadModule fcgid_module modules/mod_fcgid.so 2 &l…...
加强政府门户网站建设管理/企业营销推广怎么做
突发奇想,想写点东西。先说一下我的目标:我希望能够统一自己脑海中的知识,形成一个系统的框架,知道哪里是自己的薄弱,哪些是自己的长处和积累。然后懂得扬长避短,发挥自己的优势和价值。来应对复杂多变的社…...
邓亚萍近况 做网站败光20亿/宁德市疫情最新消息
Edit笔记内容:Python3 OS 文件/目录方法 笔记日期:2017-11-12Python3 OS 文件/目录方法os 模块提供了非常丰富的方法用来处理文件和目录。常用的方法如下表所示:声明:转自以下网址: http://www.runoob.com/python3/pyt…...
辽宁企业网站建设公司/成都seo优化排名公司
在登录Linux时要执行文件的过程如下:在刚登录Linux时,首先启动 /etc/profile 文件,然后再启动用户目录下的 ~/.bash_profile、 ~/.bash_login或 ~/.profile文件中的其中一个,执行的顺序为:~/.bash_profile、 ~/.bash_l…...
重庆九龙坡区哪里有做网站的/公司网络推广该怎么做
方法一: 我们可以使用提供的ccmclean工具删除SMS 高级客户端。(ccmclean下载地址http://technet.microsoft.com/zh-cn/sms/bb676787%28en-us%29.aspx)现在为大家介绍一下使用方法。首先看一下perth这台机器上已经是SMS 高级客户端了。接下来…...