three.js OrbitControls.js 修改配置鼠标行为mouse和手势行为touch

这篇具有很好参考价值的文章主要介绍了three.js OrbitControls.js 修改配置鼠标行为mouse和手势行为touch。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 引入three.js和OrbitControls.js

import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

可以看一下OrbitControls.js源码,方便理解:https://threejs.org/examples/jsm/controls/OrbitControls.js

2. 重新配置鼠标和手势文章来源地址https://www.toymoban.com/news/detail-591214.html

this.controls = new OrbitControls(this.camera, this.renderer.domElement);
// 重置鼠标行为
this.controls.mouseButtons = {
	LEFT:THREE.MOUSE.PAN, // 左键 拖动(默认旋转:ROTATE)
	MIDDLE:THREE.MOUSE.DOLLY, // 滑轮 缩放
	RIGHT:THREE.MOUSE.ROTATE // 右键 旋转(默认拖动:PAN)
}
// 重置手势行为
this.controls.touches = { 
	ONE: THREE.TOUCH.PAN, // 单个手指 拖动(默认旋转:ROTATE)
	TWO: THREE.TOUCH.DOLLY_PAN // 两个手指 缩放
};
this.controls.update()

到了这里,关于three.js OrbitControls.js 修改配置鼠标行为mouse和手势行为touch的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

    正投影相机和透视相机的区别 如果都以高处俯视去看整个场景,正投影相机就类似于 2d 的可视化的效果,透视相机就类似于人眼观察效果 调整 left, right, top, bottom 范围大小 如果你想整体预览全部立方体,就需要调整相机的渲染范围,比如设置上下左右的范围。 使用场景:正

    2024年02月04日
    浏览(44)
  • three.js鼠标控制场景旋转

    鼠标控制旋转

    2024年02月17日
    浏览(39)
  • THREE.JS镜头随鼠标晃动效果

    为了让动画更灵活并且简单 借助 gsap 让其具有更多可能,在未来更容易扩充其他动效 gsap Dom跟随鼠标移动 gsap.quickTo() 首先要监听鼠标移动,并且将移动的值转换到 -1 和 1 之间 方便处理 上面将 位置 / 屏幕宽高 将值缩放在 0 和 1 之间 然后通过 乘2减1 将其限制在 -1 和 1 之间

    2024年02月13日
    浏览(42)
  • Three 之 three.js (webgl)鼠标/手指通过射线移动物体的简单整理封装

    目录 Three 之 three.js (webgl)鼠标/手指通过射线移动物体的简单整理封装 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、案例实现步骤 六、关键代码 Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。 本节介绍, three.js (webgl) 中,

    2024年02月16日
    浏览(62)
  • three.js实现鼠标点击控制物体移动(带动画效果,位置精确)

    通过查阅各种资料,最终确定解决方案,动画效果使用gsap组件库实现,也可不用,代码稍作修改即可。解决鼠标点击坐标偏移问题,复制可直接运行。 完整代码如下:

    2024年02月07日
    浏览(61)
  • threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

    绑定点击事件,通过 THREE.Raycaster 光线投射,用于确定鼠标点击位置上有哪些物体, raycaster.intersectObjects(scene.children) 返回点击位置上所有的物体的数组;我们用 var selected = intersects[0] 取第一个,也就是最前面的那个物体;在通过 selected.point 取点坐标

    2024年02月11日
    浏览(127)
  • Three.js初识:渲染立方体、3d字体、修改渲染背景颜色

    用场景对three.js进行渲染:场景、相机、渲染器 场景 透视摄影机 参数解析: fov: 视野角度(FOV)。视野角度就是无论在什么时候,你所能在显示器上看到的场景的范围,它的单位是角度(与弧度区分开)。 aspect: 长宽比(aspect ratio)。 也就是你用一个物体的宽除以它的高的值

    2024年02月07日
    浏览(45)
  • Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格

    1 traverse (模型循环遍历方法) 2. THREE.TextureLoader(用于加载和处理图片纹理) 3. THREE.MeshLambertMaterial(用于创建材质) 4. getObjectByProperty(通过材质的属性值获取材质信息) 在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上加入onSetSystemModelMap (设置模型材质方法

    2024年02月13日
    浏览(53)
  • Three.js中光线投射Raycaster的简单使用案例 与模型的交互,当鼠标移动到模型时出现信息框

    目录 说明   创建两个模型 基础代码  基础代码效果图如下: 重点!!!   创建光线投射Raycaster实例步骤 1.准备一个盒子,用来展示模型的长宽高信息,初始化时先隐藏该盒子 2.创建光线投射Raycaster实例         1.创建 Raycaster 实例            2.为窗口绑定事件 p

    2024年02月05日
    浏览(47)
  • 蓝牙鼠标链接Win10需要“输入MI MOUSE BT3.0的PIN”的解决方案

    鼠标:小米 XMWS001TM 系统:Win10 链接方式:蓝牙 所有的蓝牙鼠标和蓝牙耳机的默认配对码都是 0000 或 1234 。设置这个配对码,是为了验证识别配对的设备,防止误操作【引用自这里】。故直接输入 0000 或 1234 即可完成配对

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包