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

最新推荐文章于 2024-05-22 10:24:32 发布
最新推荐文章于 2024-05-22 10:24:32 发布
阅读量1.1w 收藏 11
点赞数
分类专栏： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30621091/article/details/70807908
版权

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

$('body').on(
最低0.47元/天 解锁文章
pengpai123
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Threejs-02、坐标辅助器与轨道控制器使用
ChenJin_2的博客
06-07 170
坐标辅助器与轨道控制器使用
初识three.js，搭建three.js+vue.js项目
weixin_34296641的博客
09-22 8852
WebGL 简介：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Ca...
three-freeform-controls:Threejs对象的旋转和平移控件
05-17
三自由度控件 该库为对象提供旋转和平移控件。 当前支持以下功能： 具有3个自由度的翻译控件 具有3个自由度的旋转控制 围绕任意轴的平移和旋转控制 平面控件，用于限制在任意平面上的平移 眼平面内的旋转控制 自由选择控件以在眼平面内平移 固定模式控件（保持对象旋转的方向） 继承模式控件（使控件跟随对象旋转） 自定义对象作为控件句柄 仅启用部分控制 控件的多个实例锚定到单个对象 锚定到不同对象的控件的不同实例 对齐网格 沿单个轴的平移极限 去做： 测试 关于该项目 执照 three-freeform-controls随一起分发。 贡献 在为此存储库做贡献时，请首先通过上的问题讨论您希望进行的更改。
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
camera-controls:三.js 的相机控件，类似于 THREE.OrbitControls 但支持平滑过渡和更多功能
08-04
相机控制 一个用于three.js 的相机控件，类似于THREE.OrbitControls，但支持平滑过渡和更多功能。 例子 相机移动 默认用户输入（可配置） 轨道旋转 鼠标左键拖动/触摸：单指移动 多莉 鼠标中键拖动，或鼠标滚轮/触摸：两指捏合或向外 卡车（平底锅） 鼠标右键拖动/触摸：两指移动或三指移动 第一个人 第三人称（使用meshwalk ） 相机抖动效果 随着持续时间和缓动旋转（使用tween.js ） 路径动画（使用tween.js ） 拖到 iframe 之外 用法 import * as THREE from 'three' ; import CameraControls from 'camera-controls' ; CameraControls . install ( { THREE : THREE } ) ; // snip ( init thre
threejs动态调整相机位置
c_qianxia5040的博客
04-26 3047
本文实现的效果是，模型渲染出来后，根据用户点击模型的某部分，将相机定位到鼠标点击的位置，并放大。不过此文的相机调整比较快、生硬，没有那种渐进式的感觉，哪位博主有更好的方法了请在下面留言哦。
Three.js - OrbitControls 轨道控件的围绕目标 target 参数
ithanmang
09-17 9623
1、简介 THREE.OrbitControls是最常用的用来控制相机的控件，并且也是官方文档中唯一有介绍的控件。 轨道控制允许摄像机围绕一个目标轨道运行 这个目标默认为THREE.Vector3()，也就是(0, 0, 0)世界坐标的原点。 可以通过THREE.OrbotControls的实例对象来修改.target = new THREE.Vector3(...) 设置控件...
three.js 轨道控制器（OrbitControls）相关原理及坐标转换
weixin_43336525的博客
09-12 1610
three.js 轨道控制器（OrbitControls）相关原理及坐标转换
OrbitControls旋转缩放限制
u014291990的博客
12-13 1340
threejs qq交流群：814702116课程中经常会用到相机控件的不同功能,本节课就会大家补充新的知识点，比如控制缩放的最大最小范围，比如限制旋转的角度范围，比如禁止平移。
Three.js大场景camera相机控制/OrbitControls升级修改/threejs以鼠标为中心的场景相机
hlfkyo的专栏
09-05 2407
Three.js大场景camera相机控制/OrbitControls升级修改/threejs以鼠标为中心的场景相机
threejs配合tween实现相机视角2D、3D的切换动画
Zwain_M的博客
05-17 3320
threejs+tween实现2D平面的展示和3D控制的切换，切换controls控制
ThreeJs的旋转缩放平移控件和性能监控控件
11-29
首先，OrbitControls是Three.js提供的一个内置控制器，它允许用户通过鼠标或触摸事件对场景进行交互式操作，包括旋转、缩放和平移。这个控件对于创建3D可视化应用至关重要，因为它提供了直观的用户界面，使用户能够...
Three.js利用orbit controls插件（轨道控制）控制模型交互动作详解
10-19
主要给大家介绍了关于Three.js利用orbit controls插件，也就是轨道控制来控制模型交互动作的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
THREEJS的鼠标事件实现（中心旋转，放大缩小等）
热门推荐
qq_29026209的博客
07-06 1万+
最近使用threejs自带的TrackballControls.js或者OrbitControls.js发现一个问题：在场景中在一个平行光，当移动物体时，背面始终是黑的，因为没有光照，（本质就是因为使用自带的滚动求，移动的是相机，而不是移动物体）因为效果需要，自己写鼠标事件，控制物体（这样的好处是：当物体移到光照射到的地方，都能实现光亮的效果） 加一束平行光 var directional
2024-5-22 Three.js 按鼠标位置缩放
最新发布
weixin_54033736的博客
05-22 344
可wheel事件实现。three.js的 OrbitControls 控件也已经有了这个功能
threejs 实现场景围绕鼠标缩放，而不是默认的场景缩放中心
rui913的博客
09-09 1468
threejs 实现场景围绕鼠标缩放，而不是默认的场景缩放中心
three.js 在使用OrbitControls的时候视野移动
宏斌的博客
02-04 1483
OrbitControls–轨道控制器。相机交由其控制 编程控制 camera 旋转无效 但是 position有效 可以结合 controls.target 和 cmera.position 视线移动 旋转动画 /** * @description: 视野切换动画 * @param {number[]} targetCamera 目标位置的相机位置 * @param {number[]} targetAxis 目标位置的坐标轴位置 * @param {number} speed 速度 * @r
（四）Threejs基础-对象的缩放、移动、旋转和动画
轮回的秋
11-24 1362
Threejs基础-对象的缩放、移动、旋转和动画
threejs 随鼠标旋转
05-20
要实现随鼠标旋转的效果，你可以使用Three.js中的OrbitControls控制器。这个控制器可以让你通过鼠标拖拽来旋转、缩放和平移场景。 首先，你需要在HTML页面中引入Three.js和OrbitControls.js文件： ```html <script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/controls/OrbitControls.js"></script> ``` 然后，创建一个场景、相机和一个立方体模型： ```javascript // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建立方体模型 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); ``` 接下来，创建OrbitControls控制器，并将它绑定到相机上： ```javascript // 创建OrbitControls控制器 const controls = new THREE.OrbitControls(camera, renderer.domElement); // 设置控制器的属性 controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minDistance = 1; controls.maxDistance = 100; // 更新控制器 controls.update(); ``` 最后，在渲染循环中更新控制器： ```javascript function animate() { requestAnimationFrame(animate); // 使立方体模型旋转 cube.rotation.x += 0.01; cube.rotation.y += 0.01; // 更新控制器 controls.update(); // 渲染场景 renderer.render(scene, camera); } animate(); ``` 现在你可以通过鼠标拖拽来旋转场景了。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值