Threejs根据鼠标动态改变controls的target（缩放中心点）

最新推荐文章于 2024-12-10 00:00:00 发布
原创 最新推荐文章于 2024-12-10 00:00:00 发布 · 1.1w 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Threejs中根据鼠标位置动态改变controls的target，以实现更灵活的缩放交互效果。通过对比普通缩放和优化后的缩放操作，展示了这种交互方式的差异，并提供了相关代码参考。

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

好久没更新博客了，记下一笔
最近看到很多公司的产品的鼠标交互部分，controls的缩放中心不是固定的，比如这个，这个鼠标的交互方式跟我们平常用到的OrbitControls或者TrackballControls都不一样，特别是缩放时，它的target不是固定的，最近研究了一下：
废话不多说，先上图：
普通的缩放操作 普通的缩放操作
这里写图片描述 优化后的缩放操作
代码如下：

$('body').on('mousewheel', function ( ev ){

        var factor = 3;
最低0.47元/天 解锁文章

200万优质内容无限畅学
Three.js引擎开发：Three.js控制器开发_（3）.Three.js中 OrbitControls 的使用
chenlz2007的博客
06-06 699
提供了一些事件，可以用来监听用户的操作。change：每当控制器状态改变时触发。start：用户开始操作时触发。end：用户结束操作时触发。可以通过设置的和zoomSpeed来调整旋转和缩放的速度。默认情况下，的目标点是(0, 0, 0)，可以通过设置来改变目标点。是 Three.js 中一个非常强大的控制器，可以帮助开发者实现复杂的相机控制效果。通过合理配置和使用，可以在虚拟现实游戏中提供更好的用户体验。本节详细介绍了的原理、基本使用、高级用法、性能优化和常见问题的解决方案，希望对您的开发工作有所帮助。
threejs: layers实现图层的显示隐藏切换
九段刀客的博客
08-15 1689
threejs layers控制图层的显示隐藏
threejs 实现场景围绕鼠标缩放，而不是默认的场景缩放中心
rui913的博客
09-09 1793
threejs 实现场景围绕鼠标缩放，而不是默认的场景缩放中心
Three.js大场景camera相机控制/OrbitControls升级修改/threejs以鼠标为中心的场景相机
hlfkyo的专栏
09-05 2749
Three.js大场景camera相机控制/OrbitControls升级修改/threejs以鼠标为中心的场景相机
2024-5-22 Three.js 按鼠标位置缩放
weixin_54033736的博客
05-22 1108
可wheel事件实现。three.js的 OrbitControls 控件也已经有了这个功能
Three.js - OrbitControls 轨道控件的围绕目标 target 参数
ithanmang
09-17 1万+
1、简介 THREE.OrbitControls是最常用的用来控制相机的控件，并且也是官方文档中唯一有介绍的控件。 轨道控制允许摄像机围绕一个目标轨道运行 这个目标默认为THREE.Vector3()，也就是(0, 0, 0)世界坐标的原点。 可以通过THREE.OrbotControls的实例对象来修改.target = new THREE.Vector3(...) 设置控件...
three.js OrbitControls鼠标按键修改（左平移，右旋转）
qq_41960265的博客
10-23 6351
createControls() { controls = new OrbitControls(camera, renderer.domElement) //限制最大仰视角和俯视角 controls.minPolarAngle = 0 controls.maxPolarAngle = 1.5 //禁止缩放 //controls.enableZoom=false //缩放限制 con
three.js-controls(控制器)
公众号 @ 桃小瑞
12-05 3003
three.js 控制器的简单使用，添加阻尼和抗锯齿效果，使模型更加完美
threejs-oribal-animations:three.js中的轨道控制动画
05-15
1. **旋转（Rotation）**：当用户按住鼠标左键并移动时，相机将围绕预设的中心点（目标点）进行旋转。这使得用户可以自由地查看3D场景的各个角度。旋转的速度和灵敏度可以通过设置`OrbitControls`的属性来调整，如`...
ThreeJS入门（187）：THREE.TrackballControls 知识详解，示例代码
大剑师兰特的GIS世界
12-10 968
`THREE.TrackballControls` 是 Three.js 中的一个交互控件，它允许用户通过鼠标或触摸设备来控制相机的旋转、缩放和平移，从而在三维场景中进行浏览。`TrackballControls` 的操作方式类似于传统的三维建模软件中的轨道球（trackball）交互方式，用户可以通过拖动鼠标来旋转相机，通过滚动鼠标滚轮来缩放，以及通过按住并拖动鼠标来平移。
在Three.js中给导入的3D模型重新设置中心点
qq_35750405的博客
07-31 1万+
最近尝试做一个基于Three.js的3D模型的网页在线查看器，支持以下功能 1. 能够控制相机，旋转，拖拉缩放   （OrbitControls) 2. 能够移动导入的3D模型                  (TransformControls) 3. 相应的灯光和背景                           4. 导入obj+mtl模型，并将中心点设置在模
threeJS-object-controls:ThreeJS模块，可让您独立于场景的其余部分旋转对象（网格），并放大移动相机
05-27
ThreeJS对象控件 ThreeJS模块，可让您独立于场景的其余部分旋转对象（网格），并放大/缩小移动相机。 安装 npm install --save threejs-object-controls 用法 import * as THREE from 'three'; import {ObjectControls} from 'threeJS-object-controls'; 创建一个新的Controls实例，使用passig 3个参数： 相机 渲染器元素 移动的网格 var controls = new ObjectControls(camera, renderer.domElement, myMesh); （查看index.html文件以查看用法示例，或检查以查看Angular的npm用法示例） 您也可以更改要旋转的网格！ :party_popper: ，然后单击右侧面板上的“ useMe
threejs 加载两个场景_在three.js中使用相同的渲染器在两个场景之间切换
weixin_39878688的博客
12-20 1557
我一直在试图找到一种方法来在three.js中的两个场景之间切换。我知道可以使用sceneLoader/exportScene组合来加载场景。从josdirksen/learning-threejs - loading a scene在three.js中使用相同的渲染器在两个场景之间切换var controls = new function() {this.exportScene = functi...
three.js在同一个div下切换不同模型挂载的问题
Beam
05-15 3697
需求 同一个div下，通过查询不同的设备展示不同的模型。 实现 关键代码如下： <div id="equip-model"></div> // 加载three.js needReloadThreeJs (devtype) { div3D = document.getElementById('equip-model') this.initScene() // 场景 ...
Threejs实现鼠标点击人物行走/镜头跟随人物移动/鼠标点击动画/游戏第三人称/行走动作
左本Web3D
01-01 7886
Threejs获取鼠标点击位置、实现鼠标点击人物行走、人物头顶显示名称标签、镜头跟随人物移动并且镜头围绕人物旋转，类似游戏中第三人称、鼠标点击位置有动画效果，如下效果图。
threeJs通过GUI实现动态对模型的控制
Baker的博客
08-09 664
threeJs提供gui组件实现动态的控制模型属性，(需要外引相关js)，实际上gui是提供了一些小的窗口，通过js手动将物体的相关属性绑定到gui的子组件上，在gui界面调整子组件的值，动态条状物体属性的值，实际上也可以自己动手做一个类似的组，不过gui是提供了一种动态控制的思路和实现方法，这里就用gui来演示如何动态控...
Threejs实现相机视角切换，平滑过渡，点击模型切换到查看模型视角
热门推荐
左本Web3D
03-13 1万+
1，介绍 该示例使用的是 r95版本Three.js库。 主要实现功能：实现相机视角切换,平滑过渡。效果图如下： ​ 2，主要说明 相机视角切换主要使用tween.js库实现，这个库可以很容易实现两个值之间进行过度，中间值都会自动计算出来，例如下方函数创建了TWEEN.Tween对象，这个对象会在1000毫秒内从当前坐标变换到目标坐标，变化方式可以是线性，指数性或者其他方式，可参考Tween.js / graphs 可以通过easing()方法配置变化效果。 // current1..
THREEJS的鼠标事件实现（中心旋转，放大缩小等）
qq_29026209的博客
07-06 1万+
最近使用threejs自带的TrackballControls.js或者OrbitControls.js发现一个问题：在场景中在一个平行光，当移动物体时，背面始终是黑的，因为没有光照，（本质就是因为使用自带的滚动求，移动的是相机，而不是移动物体）因为效果需要，自己写鼠标事件，控制物体（这样的好处是：当物体移到光照射到的地方，都能实现光亮的效果） 加一束平行光 var directional
three.js 相机平滑切换视角
lizujun123的博客
07-06 5837
在整个动画的开始和结束的阶段需要做一些平滑的处理。 我这里使用的是tween.js。 场景我使用的orbitControls控制的，所以在相机动画主要控制两个点： 1是相机的位置，2是orbitControls的target属性(这个属性相当于相机控制的中心点) // current1 相机当前的位置 // target1 相机的目标位置 // current2 当前的controls的targe...
vue3 threejs OrbitControls以鼠标所在位置为中心进行放大缩小
最新发布
05-15
<think>好的，我现在需要帮助用户在Vue3中使用Three.js的OrbitControls实现以鼠标位置为中心的缩放功能。首先，我需要回顾一下OrbitControls的基本原理。根据引用[2]，OrbitControls通过控制摄像机与模型的距离来实现旋转、缩放等功能。通常，默认的缩放可能以画布中心为中心，但用户希望以鼠标位置为中心缩放，这需要调整摄像机的位置和观察点。 接下来，我应该考虑如何修改OrbitControls的默认缩放行为。OrbitControls本身可能没有直接提供以鼠标为中心缩放的选项，因此需要手动干预缩放过程。根据引用[1]中的例子，鼠标位置可以通过事件监听获取，比如event.pageX和event.pageY。但需要注意，Three.js中的坐标系统与屏幕坐标可能不同，需要进行转换。 然后，我需要确定缩放时如何调整摄像机的位置。以鼠标位置为中心缩放意味着在缩放时，摄像机需要朝着鼠标所在的三维点移动，而不仅仅是向场景中心移动。这涉及到将鼠标的屏幕坐标转换为场景中的三维坐标，可能需要使用射线投射（Raycaster）来获取鼠标指向的三维点。 另外，引用[3]提到了在animate函数中设置camera.lookAt，这可能对保持观察方向有帮助。在缩放过程中，可能需要动态调整摄像机的位置，同时保持看向某个点，以确保视角正确。 可能的步骤包括： 1. 监听鼠标滚轮事件，获取鼠标在屏幕上的位置。 2. 将鼠标位置转换为Three.js的三维坐标，找到鼠标指向的场景中的点。 3. 根据缩放方向（放大或缩小），计算摄像机需要移动的距离。 4. 调整摄像机的位置，使其朝向鼠标点移动，同时保持观察目标。 5. 更新OrbitControls的目标点，可能需要禁用自动旋转或其他默认行为。 需要注意的是，直接修改OrbitControls的内部方法可能会比较困难，因此可能需要覆盖或扩展其缩放处理逻辑。此外，在Vue3中集成时，要确保正确管理事件监听器和Three.js对象的生命周期，避免内存泄漏。 最后，测试实现的效果，确保缩放平滑且以鼠标位置为中心，同时处理可能的边缘情况，比如鼠标在画布边缘时的坐标转换问题。</think>在Vue3中实现Three.js的OrbitControls以鼠标位置为中心的缩放功能，需要重写缩放逻辑并处理坐标转换。具体步骤如下： --- ### 1. 禁用默认缩放行为 首先禁用OrbitControls的默认缩放响应： ```javascript import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' const controls = new OrbitControls(camera, renderer.domElement) controls.enableZoom = true // 保持缩放功能启用 controls.mouseButtons.LEFT = null // 禁用左键旋转 ``` --- ### 2. 监听鼠标滚轮事件 通过自定义滚轮事件实现精准控制： ```javascript let targetZoom = 1 // 当前缩放系数 const ZOOM_SPEED = 0.1 renderer.domElement.addEventListener('wheel', (event) => { event.preventDefault() // 获取标准化鼠标位置(范围[-1,1]) const mouse = new THREE.Vector2() mouse.x = (event.offsetX / window.innerWidth) * 2 - 1 mouse.y = -(event.offsetY / window.innerHeight) * 2 + 1 // 计算缩放方向 const delta = event.deltaY > 0 ? 1 : -1 targetZoom *= Math.pow(0.95, delta * ZOOM_SPEED) // 执行自定义缩放 handleZoom(mouse, delta) }) ``` --- ### 3. 实现坐标转换与缩放 核心算法通过射线投射获取三维空间坐标点： ```javascript const raycaster = new THREE.Raycaster() const targetPoint = new THREE.Vector3() function handleZoom(mouse, delta) { // 获取鼠标指向的三维坐标 raycaster.setFromCamera(mouse, camera) const intersects = raycaster.intersectObjects(scene.children) if (intersects.length > 0) { targetPoint.copy(intersects[0].point) } else { // 当未选中物体时，使用默认场景中心点 targetPoint.set(0, 0, 0) } // 计算摄像机位移方向 const direction = new THREE.Vector3() direction.subVectors(camera.position, targetPoint).normalize() // 计算新摄像机位置 const newPosition = new THREE.Vector3() const moveDistance = direction.multiplyScalar(delta * ZOOM_SPEED) newPosition.copy(camera.position).add(moveDistance) // 更新摄像机 camera.position.copy(newPosition) controls.target.copy(targetPoint) // 关键：更新控制器的目标点[^2] controls.update() } ``` --- ### 4. 在Vue组件中的集成 在Vue3组件中管理Three.js生命周期： ```vue <script setup> import { onMounted, onUnmounted } from 'vue' let controls, renderer, camera onMounted(() => { // 初始化Three.js场景 initScene() // 初始化轨道控制器 controls = new OrbitControls(camera, renderer.domElement) controls.minDistance = 2 controls.maxDistance = 50 }) onUnmounted(() => { // 清理事件监听器 renderer.domElement.removeEventListener('wheel', handleWheel) }) </script> ``` --- ### 实现原理 1. **坐标转换**：通过`Raycaster`将2D屏幕坐标转换为3D场景坐标[^1] 2. **摄像机移动**：根据鼠标指向点计算摄像机位移方向，保持观察焦点始终在目标点[^2] 3. **控制器同步**：每次缩放后强制更新`controls.target`确保控制器状态同步[^3] ---
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值