当前位置： 首页 > news >正文

ThreeJs限制模型拖动的范围

news 文章来源：https://blog.csdn.net/qq_26881073/article/details/136555224 2025/5/2 6:35:11

        之前有讲过ThreeJs中对模型的拖动功能，使用DragControl组件，将模型放到组件的集合中，就可以拖动点击的模型了，这节细化下怎么控制拖动，比如之拖动z轴，或者限制拖动x轴的范围在某个区间：

        首先还是新建一个Threejs场景，并添加好需要的相机，灯光，渲染器等，并在场景中添加一个正方体用来做接下的拖动测试，这部分代码可以参照之前拖动模型博客，实现的效果如下：

下面开始主要功能：首先新建几个变量：x轴位置 ，y轴位置，z轴最小范围，z轴最大范围。

    var modelX = 0;//x轴位置var modelY = 0;//y轴位置var modelMinZ = -100; //z轴可拖动最小范围var modelMaxZ = 100;//z轴可拖动最大范围

然后开启拖拽监控，拖拽功能有很多监控函数，包括拖拽前，拖拽中，拖拽后等，这里先用这三个，原理是在拖拽前记住此时的x和y轴位置，在拖拽中时刻修改x轴和y轴的位置为拖拽开始时获取到的位置，同时在拖拽中判断拖动到的位置是否在范围内，如果没有就设置为范围内，使得模型不会超过设定的范围。完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--引入three.js，这是使用three必须的js文件，此处引入的是外网提供的three文件，如果引入有问题可以到官网下载three文件后引入本地的theee.js文件--><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script><script src="three/ThreeJs/js/OrbitControls.js"></script><script src="three/ThreeJs/js/DragControls.js"></script>
</head><body>
<script>var modelX = 0;//x轴位置var modelY = 0;//y轴位置var modelMinZ = -100; //z轴可拖动最小范围var modelMaxZ = 100;//z轴可拖动最大范围/*** 创建场景对象Scene*/var scene = new THREE.Scene();const axesHelper = new THREE.AxesHelper( 100 );axesHelper.position.set(0,0,0)scene.add( axesHelper );/*** 相机设置*///窗口宽度var width = window.innerWidth;//窗口高度var height = window.innerHeight;//窗口宽高比var k = width / height;//三维场景显示范围控制系数，系数越大，显示的范围越大var s = 200;//创建相机对象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);//设置相机位置camera.position.set(200, 300, 200);//设置相机方向(指向的场景对象)camera.lookAt(scene.position);/*** 光源设置*///新建点光源(常用光源分为点光源和环境光，点光源的效果类似灯泡，环境光的效果类似白天的太阳光)var point = new THREE.PointLight(0xffffff);//设置点光源的位置point.position.set(400, 200, 300);//将点光源添加到场景中scene.add(point);/*** 创建网格模型，也就是3D模型*///创建一个立方体几何对象Geometryvar geometry = new THREE.BoxGeometry(100, 100, 100);//给几何体创建材质，这里是改为蓝色，材质对象Materialvar material = new THREE.MeshLambertMaterial({color: 0x0000ff});//网格模型对象Meshvar mesh = new THREE.Mesh(geometry, material);//网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染mesh.name = 'box'scene.add(mesh);/*** 创建渲染器对象*///创建渲染器对象(渲染要等所有东西都加进去再渲染场景，创建和3D模型和光源没有先后顺序)var renderer = new THREE.WebGLRenderer();//设置渲染区域尺寸(设置的是整个屏幕的长度和宽度renderer.setSize(width, height);//设置渲染的背景色renderer.setClearColor(0xb9d3ff, 1);//body元素中插入canvas对象，也可以在页面中添加div，并加上id，通过id指定在某个div中渲染document.body.appendChild(renderer.domElement);//循环渲染function render() {//执行渲染操作   指定场景、相机作为参数renderer.render(scene, camera);// 使用 requestAnimationFrame 函数安排下一次渲染requestAnimationFrame(render);//修改正方体网格的x轴旋转角度//mesh.rotation.x += 0.02}//执行渲染render()/**添加鼠标拖动事件*///需要创建一个数组，将需要拖动的对象放到数组中(mesh是上面创建的正方体)let objects = [];objects.push(mesh)var dragControls = new THREE.DragControls(objects, camera, renderer.domElement);//拖拽开始前记录此时模型位置dragControls.addEventListener( 'dragstart', function ( event ) {modelX = event.object.position.xmodelY = event.object.position.yconsole.log("拖动前"+modelX+","+modelY)});//拖拽时重置x和y轴位置，并判断z轴是否在范围内，如果不在则设置回范围内的位置dragControls.addEventListener( 'drag', function ( event ) {if(event.object.position.z > modelMaxZ){event.object.position.z = modelMaxZ}if(event.object.position.z < modelMinZ){event.object.position.z = modelMinZ}event.object.position.set(modelX,modelY,event.object.position.z)});dragControls.addEventListener( 'dragend', function ( event ) {console.log("拖动后"+modelX+","+modelY)});</script>
</body>
</html>

效果如下：

ThreeJs拖拽功能范围限制

相关文章：

ThreeJs限制模型拖动的范围

之前有讲过ThreeJs中对模型的拖动功能&#xff0c;使用DragControl组件&#xff0c;将模型放到组件的集合中&#xff0c;就可以拖动点击的模型了&#xff0c;这节细化下怎么控制拖动&#xff0c;比如之拖动z轴&#xff0c;或者限制拖动x轴的范围在某个区间&#xff1a; 首先还是…...

编程日记 2024/3/8 11:52:15

关于JVM的小总结（待补充）

JVM组成及他们之间的关系 装载类子系统字节码执行引擎运行时数据区 装载类子系统 类加载器字节码调节器类加载运行时数据区 字节码执行引擎 运行时数据区 线程私有 虚拟机栈本地方法栈程序计数器 线程共享 堆方法区&#xff08;元空间&#xff09;...

编程日记 2024/3/8 11:50:10

day37 贪心算法part6

738. 单调递增的数字 中等 提示 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 不知道怎么讲思路……以9287举例&#xff0c;…...

编程日记 2024/3/8 11:49:09

38女神节：剧情热梗小游戏新品！预售1折秒杀，手慢无

抖音热剧情热梗小游戏《逆袭大冒险》登录 Cocos Store 预售开启&#xff01;游戏包含 20剧情 40 关卡&#xff0c;先来看下视频吧&#xff01; 游戏内嵌多种小游戏玩法&#xff0c;是不是很有亲切感呢&#xff1f;抽针、流体、重力 3.8女神节特价预售 欢迎加入迷萌游戏《逆袭大…...

编程日记 2024/3/8 11:44:04

岩土工程监测仪器振弦采集仪的发展历程与国内外研究现状

岩土工程监测仪器振弦采集仪的发展历程与国内外研究现状 岩土工程监测仪器河北稳控科技振弦采集仪是用于测量土体或岩石地层的力学性质、地层结构、地下水位等参数的一种仪器设备。它通过振动在地下传播的声波信号的传播速度和特性&#xff0c;来推断地层的物理性质。以下是对…...

编程日记 2024/3/8 11:41:01

Git 掌握

目录 一、前言 二、centos安装Git 三、Git基本操作 (1) 创建Git本地仓库 (2) 配置Git (3) 认识工作区&#xff0c;暂存区&#xff0c;版本库 四、添加文件 五、查看.git文件 六、修改文件 七、版本回退 八、撤销修改 (1) 场景一 对于还没有add的代码 (2) 场景二 已…...

编程日记 2024/3/8 11:40:00

面试题之——事务失效的八大情况

事务失效的八大情况 一、非public修饰的方法 Transactional注解只能在在public修饰的方法下使用。 /*** 私有方法上的注解&#xff0c;不生效&#xff08;因私有方法Spring扫描不到该方法&#xff0c;所以无法生成代理&#xff09;*/ Transactional private boolean test() …...

编程日记 2024/3/8 11:38:59

一些硬件知识（六）

防反接设计&#xff1a; 同步电路和异步电路的区别: 同步电路:存储电路中所有触发器的时钟输入端都接同一个时钟脉冲源&#xff0c;因而所有触发器的状态的变化都与所加的时钟脉冲信号同步。 异步电路:电路没有统一的时钟&#xff0c;有些触发器的时钟输入端与时钟脉冲源相连…...

编程日记 2024/3/8 11:37:57

前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？

目录 哪些方法会触发 React 重新渲染&#xff1f;重新渲染 render 会做些什么&#xff1f;setState()案例需求总结 forceUpdate()案例需求总结 props改变案例需求总结 context改变案例需求总结 哪些方法会触发 React 重新渲染&#xff1f;重新渲染 render 会做些什么&#xff1…...

编程日记 2024/3/8 11:35:55

PHP伪协议是什么?

PHP伪协议是一种特殊的URL协议&#xff0c;它允许PHP直接从PHP内部生成数据或者访问PHP自身处理的数据流&#xff0c;而不需要外部资源。这些协议是由PHP解释器内部定义和处理的&#xff0c;不同于HTTP、FTP、HTTPS等标准网络协议。下面是PHP伪协议的说明&#xff1a; 1. file…...

编程日记 2024/3/8 11:34:54

npm使用

要查看当前 npm 使用的镜像源地址&#xff0c;你可以使用以下命令&#xff1a; npm get registry这个命令会输出当前 npm 配置的镜像源地址。如果你想查看所有可用的镜像源列表&#xff0c;可以使用 nrm 这个工具&#xff0c;它是一个 npm 源管理器&#xff0c;可以帮助你查看…...

编程日记 2024/3/8 11:29:46

美国国家安全局（NSA）和美国政府将Delphi/Object Pascal列为推荐政府机构和企业使用的内存安全编程语言

上周&#xff0c;美国政府发布了《回到构建块&#xff1a;通往安全和可衡量软件的道路》的报告。本报告是美国网络安全战略的一部分&#xff0c;重点关注多个领域&#xff0c;包括内存安全漏洞和质量指标。 许多在线杂志都对这份报告发表了评论&#xff0c;这些杂志强调了对 C…...

编程日记 2024/3/8 11:27:45

C++中的内部类

一、内部类的概念 如果一个类定义在另一个类的内部&#xff0c;那么这个类就叫做内部类。&#xff08;内部类其实和一个独立的类没有区别&#xff0c;只是它会受到外部类访问限定符以及类域的限制&#xff0c;且是外部类的友元&#xff09; 如果B类是A类的内部类&#xff0c;…...

编程日记 2024/3/8 11:26:43

华为“仓颉”不是中文编程：中文编程早有所属，势如破竹

“何时能见证中国自主研发的编程语言崛起&#xff1f;”这是我们这些对IT生态心怀关切的人常常深思的问题。 语言&#xff0c;作为文化的灵魂&#xff0c;总是与特定的环境和人群紧密相连。无论是中文还是英语&#xff0c;它们都不仅仅是交流的工具&#xff0c;更是各自文化背…...

编程日记 2024/3/8 11:17:33

Python的基本数据类型

上一篇博客&#xff0c;我们介绍了Python的基础语法&#xff08;Python基础语法&#xff1a;从入门到精通的必备指南&#xff09;&#xff0c;相信大家看过后&#xff0c;对python的整个语法逻辑有了一些了解&#xff0c;不了解也没有关系。接下来&#xff0c;我们将正式开始&a…...

编程日记 2024/3/8 11:15:31

24考研有感

我考11408&#xff0c;总分339&#xff0c;408考了112分 408考的不甚满意&#xff0c;但是客观来说也没有低多少&#xff0c;毕竟我的学习时间太极限了&#xff0c;平均5天一本书&#xff0c;题只做了数据结构和计组的一部分选择&#xff0c;最后草草研究了几年的大题就上阵了…...

编程日记 2024/3/8 11:14:29

k8s中的PV和PVC存储介绍

目录 一.PV介绍 1.含义 2.关键配置参数 二.PVC介绍 1.含义 2.关键参数配置 三.PV和PVC的生命周期问题 1.PV的生命周期会有4个阶段 2.用户申请空间PV的周期流程 3.PV和PVC的使用/释放/回收 四.案例演示 1.NFS配置 2.新建PV 3.新建PVC 4.新建Pod测试 5.模拟删除P…...

编程日记 2024/3/8 11:12:27

SpringMVC--03--前端传数组给后台

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 案例1乘客个人信息方法1&#xff1a;表单提交&#xff0c;以字段数组接收方法2&#xff1a;表单提交&#xff0c;以BeanListModel接收方法3&#xff1a;将Json对象序…...

编程日记 2024/3/8 11:09:22

【C++干货基地】六大默认成员函数： This指针 | 构造函数 | 析构函数

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…...

编程日记 2024/3/8 11:08:21

99.qt qml-单例程序实现

在之前讲过： 58.qt quick-qml系统托盘实现https://nuoqian.blog.csdn.net/article/details/121855993 由于，该示例只是简单讲解了系统托盘实现，并没有实现单例程序，所以多次打开后就会出现多个exe出现的可能，本章出一章QML单例程序实现， 多次打开始终只显示出第一个打开…...

编程日记 2024/3/8 11:07:19

【软件工程】可用性测试：提升软件、网站与产品用户体验的关键环节

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 关注点 界面设计&#xff1a; 导航测试&#xff1a; 交互测试&#xff1a; 易用性测试&#xff1a; 多平台兼容性&#xff1a; 我…...

编程日记 2024/3/8 11:05:17

EPLAN的国产平替软件？SuperWORKS自动化版尝鲜

在电气设计领域&#xff0c;EPLAN作为德国老牌软件&#xff0c;知名度较高&#xff0c;使用体验也非常好&#xff01;在中国市场&#xff0c;是否有一款国产软件与之媲美&#xff1f;答案当然是有的&#xff01; 接下来为大家分享一款宝藏级别的国产电气设计软件——SuperWORK…...

编程日记 2024/3/8 11:04:16

【MySQL 系列】MySQL 架构篇

在我们开始了解 MySQL 核心功能之前&#xff0c;首先我们需要站在一个全局的视角&#xff0c;来看 SQL 是如何运作执行的。通过这种方式&#xff0c;我们可以在头脑中构建出一幅 MySQL 各组件之间的协同工作方式&#xff0c;有助于我们加深对 MySQL 服务器的理解。 文章目录 1、…...

编程日记 2024/3/8 11:01:10

C++初阶：类与对象（初篇）

目录 1. 类与对象1.1 引子&#xff1a;结构体与类1.2 什么是类&#xff08;类的定义方式&#xff09;1.3 类和结构体的区别1.4 类的访问限定符与封装1.4.1 访问限定符1.4.2 类的作用域与类的实例化 1.5 类对象的模型1.5.1 类内部资源的存储方式1.5.3 类大小的计算方式 1.6 this…...

编程日记 2024/3/8 10:59:08

Docker 创建容器并指定时区

目录 1. 通过环境变量设置时区&#xff08;推荐&#xff09;2. 挂载宿主机的时区文件到容器中3. 总结 要在 Docker 容器中指定时区&#xff0c;可以通过两种方式来实现&#xff1a; 1. 通过环境变量设置时区&#xff08;推荐&#xff09; 在 Docker 运行时&#xff0c;可以通…...

编程日记 2024/3/8 10:58:06

springboot文件上传修改临时文件路径

1、配置&#xff1a;spring.servlet.multipart.location/data/tmp 2、代码 Configuration public class MultipartConfig {Value("${spring.servlet.multipart.location}")private String tmpLocation;Beanpublic MultipartConfigElement multipartConfigElement()…...

编程日记 2024/3/8 10:54:02

testvue-新增图表功能（教师那边-后续放到管理员那边）-src/main.js ，router/index.js

1.安装--然后在src/main.js中 导入 和 使用2修改&#xff1a;common/sidebar.vue ,page/ echarts.vue , router/index.js , src/main.js 3sidebar.vue <template><div class"sidebar"><el-menuclass"sidebar-el-menu":default-active&quo…...

编程日记 2024/3/8 10:53:01

[HackMyVM]Quick 2

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…...

编程日记 2024/3/8 10:52:00

Mybatis-Plus实现Service封装

文章目录 5.1 MP封装Service介绍5.1.1 说明5.1.2 实现流程5.1.3 核心API介绍 5.2 MP封装Service快速入门5.2.1 定义服务扩展接口5.2.2 定义服务实现5.2.3 测试测试 5.3 MP封装Service实现CRUD操作 5.1 MP封装Service介绍 5.1.1 说明 MybatisPlus为了开发更加快捷&#xff0c;…...

编程日记 2024/3/8 10:48:57

平台工程指南：从架构构建到职责分工

平台工程只是 DevOps 专业化的另一个术语&#xff0c;还是另有所指&#xff1f;事实可能介于两者之间。DevOps 及其相关的 DevXOps 有着浓厚的文化色彩&#xff0c;以各个团队为中心。不幸的是&#xff0c;在许多地方&#xff0c;DevOps 引发了新的问题&#xff0c;如工具激增和…...

编程日记 2024/3/8 10:45:52