123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="utf-8" />
- <base href="../../../" />
- <script src="page.js"></script>
- <link type="text/css" rel="stylesheet" href="page.css" />
- </head>
- <body>
- [page:Controls] →
- <h1>弧球控制器([name])</h1>
- <p class="desc">
- ArcballControls 允许通过具有完全触摸支持和高级导航功能的虚拟轨迹球控制相机。<br>
- 光标/手指位置和移动被映射到由小控件表示的虚拟轨迹球表面上,并映射为直观且一致的相机移动。拖动光标/手指将使相机以保守的方式围绕轨迹球中心旋转(返回起始点将使相机返回到其起始方向)。<br><br>
- 除了支持平移、缩放和捏合手势之外, ArcballControls 还通过双击/点击提供 <i>聚焦</i> 功能,以便直观地将对象的兴趣点移动到虚拟轨迹球的中心。焦点可以在复杂的环境中更好地检查和导航。此外,
- ArcballControls 允许 FOV 操作(以眩晕方式)和 z 轴旋转。还支持通过剪贴板保存和恢复相机状态(使用 ctrl+c 和 ctrl+v 快捷键复制和粘贴状态)。<br><br>
- 不同于 [page:OrbitControls] 和 [page:TrackballControls],[name] 不需要在动画打开时在动画循环中从外部调用 [page:.update]。<br><br>
- 要使用此功能,与 /examples 目录中的所有文件一样,您必须将该文件单独包含在 HTML 中。
- </p>
- <h2>导入</h2>
- <p>
- [name] 是一个附加组件,必须显式导入。请参阅 [link:#manual/introduction/Installation Installation / Addons]。
- </p>
- <code>
- import { ArcballControls } from 'three/addons/controls/ArcballControls.js';
- </code>
- <h2>代码示例</h2>
- <code>
- const renderer = new THREE.WebGLRenderer();
- renderer.setSize( window.innerWidth, window.innerHeight );
- document.body.appendChild( renderer.domElement );
- const scene = new THREE.Scene();
- const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
- const controls = new ArcballControls( camera, renderer.domElement, scene );
- controls.addEventListener( 'change', function () {
- renderer.render( scene, camera );
- } );
- //controls.update() must be called after any manual changes to the camera's transform
- camera.position.set( 0, 20, 100 );
- controls.update();
- </code>
- <h2>例子</h2>
- <p>[example:misc_controls_arcball misc / controls / arcball ]</p>
- <h2>构造函数</h2>
- <h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement], [param:Scene scene] )</h3>
- <p>
- [page:Camera camera]:(必填)要控制的相机。相机不能是另一个对象的子对象,除非该对象是场景本身。<br><br>
- [page:HTMLDOMElement domElement]: 用于事件侦听器的 HTML 元素。(可选)<br><br>
- [page:Scene scene]: 相机渲染的场景。如果未给出,则小控件无法显示。(可选)
- </p>
- <h2>事件</h2>
- <h3>change</h3>
- <p>
- 当相机被小控件改变时触发。
- </p>
- <h3>start</h3>
- <p>
- 当交互开始时触发。
- </p>
- <h3>end</h3>
- <p>
- 当交互完成时触发。
- </p>
- <h2>属性</h2>
- <p>共有属性请参见其基类[page:Controls]。</p>
- <h3>[property:Boolean adjustNearFar]</h3>
- <p>
- 如果为 true,则每次执行缩放时都会调整相机的近端和远端值,尝试保持初始近端和远端值给出的相同可见部分(仅限 [page:PerspectiveCamera] )。默认为 false。
- </p>
- <h3>[property:Camera camera]</h3>
- <p>
- 被控制的摄像机。
- </p>
- <h3>[property:Boolean cursorZoom]</h3>
- <p>
- 设置为 true 以使缩放变为光标居中。
- </p>
- <h3>
- [property:Float dampingFactor]</h3>
- <p>
- 设置为 [page:.enableAnimations] 为true 时使用的阻尼惯性。
- </p>
- <h3>[property:Boolean enableAnimations]</h3>
- <p>
- 设置为 true 以启用旋转(阻尼)和聚焦操作的动画。默认为 true。
- </p>
- <h3>[property:Boolean enableGrid]</h3>
- <p>
- 设置为 true 时,执行平移操作时将出现网格(仅限桌面交互)。默认为 false。
- </p>
- <h3>[property:Boolean enablePan]</h3>
- <p>
- 启用或禁用相机平移。默认为 true。
- </p>
- <h3>[property:Boolean enableRotate]</h3>
- <p>
- 启用或禁用相机旋转。默认为 true。
- </p>
- <h3>[property:Boolean enableZoom]</h3>
- <p>
- 启用或禁用相机变焦。
- </p>
- <h3>[property:Float focusAnimationTime]</h3>
- <p>
- 焦点动画的持续时间。
- </p>
- <h3>[property:Float maxDistance]</h3>
- <p>
- 最大移动距离(仅限 [page:PerspectiveCamera])。默认为无穷大。
- </p>
- <h3>[property:Float maxZoom]</h3>
- <p>
- 最大缩放值(仅限 [page:OrthographicCamera] )。默认为无穷大。
- </p>
- <h3>[property:Float minDistance]</h3>
- <p>
- 最小移动距离(仅限 [page:PerspectiveCamera] )。默认值为 0。
- </p>
- <h3>[property:Float minZoom]</h3>
- <p>
- 最小缩放值(仅限 [page:OrthographicCamera] )。默认值为 0。
- </p>
- <h3>[property:Float radiusFactor]</h3>
- <p>
- 小控件相对于屏幕宽度和高度的大小。默认值为 0.67。
- </p>
- <h3>[property:Float rotateSpeed]</h3>
- <p>
- 旋转速度。默认值为 1。
- </p>
- <h3>[property:Float scaleFactor]</h3>
- <p>
- 执行缩放操作时使用的缩放因子。
- </p>
- <h3>[property:Scene scene]</h3>
- <p>
- 相机渲染的场景。
- </p>
- <h3>[property:Float wMax]</h3>
- <p>
- 旋转动画开始时允许的最大角速度。
- </p>
- <h2>方法</h2>
- <p>共有方法请参见其基类[page:Controls]。</p>
- <h3>[method:undefined activateGizmos] ( [param:Boolean isActive] )</h3>
- <p>
- 使小控件或多或少可见。
- </p>
- <h3>[method:undefined copyState] ()</h3>
- <p>
- 将当前状态复制到剪贴板(作为可读的 JSON 文本)。
- </p>
- <h3>[method:undefined pasteState] ()</h3>
- <p>
- 从剪贴板设置控件状态,假设剪贴板存储从 [page:.copyState] 保存的 JSON 文本。
- </p>
- <h3>[method:undefined reset] ()</h3>
- <p>
- 将控件重置为上次调用 [page:.saveState] 时的状态或初始状态。
- </p>
- <h3>[method:undefined saveState] ()</h3>
- <p>
- 保存控件的当前状态。稍后可以使用 [page:.reset] 恢复。
- </p>
- <h3>[method:undefined setCamera] ( [param:Camera camera] )</h3>
- <p>
- 设置要控制的摄像机。必须调用才能设置要控制的新摄像机。
- </p>
- <h3>[method:undefined setGizmosVisible] ( [param:Boolean value] )</h3>
- <p>
- 设置小控件的可见属性。
- </p>
- <h3>[method:undefined setTbRadius] ( [param:Float value] )</h3>
- <p>
- 更新 `radiusFactor` 值,重新绘制小控件并发送 `changeEvent` 让可视化更新。
- </p>
- <h3>[method:Boolean setMouseAction] ( [param:String operation], mouse, key )</h3>
- <p>
- 通过指定要执行的操作和鼠标/按键组合来设置新的鼠标操作。如果发生冲突,则替换现有的。<br><br>
- 操作可以指定为 'ROTATE'、'PAN'、'FOV' 或 'ZOOM'。<br>
- 鼠标输入可以指定为鼠标按钮 0、1、2 或 'WHEEL'。<br>
- 键盘修饰符可以指定为 'CTRL'、'SHIFT' 或 null(如果不再需要) 。
- </p>
- <h3>[method:Boolean unsetMouseAction] ( mouse, key )</h3>
- <p>
- 通过指定 鼠标/按键 组合来删除鼠标操作。<br><br>
- 鼠标输入可以指定为鼠标按钮 0、1、2 或 'WHEEL'。<br>
- 键盘修饰符可以指定为 'CTRL'、'SHIFT' 或 null(如果不再需要) 。
- </p>
- <h3>[method:Raycaster getRaycaster] ()</h3>
- <p>
- 返回用于用户交互的 [page:Raycaster] 对象。如果设置了 [name] 的 [page:Object3D.layers .layers] 属性,您还需要使用匹配的值设置 [page:Raycaster.layers
- .layers] 的 [page:Raycaster] 属性,否则 [name] 将无法按预期工作。
- </p>
- <h2>源代码</h2>
- <p>
- [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/ArcballControls.js examples/jsm/controls/ArcballControls.js]
- </p>
- </body>
- </html>
|