Three.js限制和缩放鼠标控件以适应画布大小
Three.js限制和缩放鼠标控件以适应画布大小
提问于 2013-02-27 17:10:43
我已经使用three.js有一段时间了，我目前处理鼠标拖动的方式和Three.js的可拖动立方体示例一样，使用轨迹球控件来操作相机，但是这两个控件似乎都是基于我使用整个浏览器窗口来运行应用程序的假设。
有没有办法将这些鼠标控制缩放(和限制)到我的画布上？
编辑:这是一个显示拖动对象的鼠标事件的代码示例(它实际上与three.js的examples目录中提供的示例几乎相同，但我应用了乌胡拉的代码)
`//Called when cursor is moved, drags object if one is selected
function onDocumentMouseMove( event ) {
event.preventDefault();
//mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
//mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse.x = cursorPositionInCanvas( renderer.domElement, event )[0];
mouse.y = cursorPositionInCanvas( renderer.domElement, event )[1];
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
if ( SELECTED ) {
var intersects = raycaster.intersectObject( plane );
SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
return;
}
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
INTERSECTED = intersects[ 0 ].object;
plane.position.copy( INTERSECTED.position );
plane.lookAt( camera.position );
}
}
else {
INTERSECTED = null;
}
}
//Called when user clicks, selects object if mouse is over it and disables trackball controls
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
controls.enabled = false;
SELECTED = intersects[ 0 ].object;
var intersects = raycaster.intersectObject( plane );
offset.copy( intersects[ 0 ].point ).sub( plane.position );
}
}
//Called when user releases mouse button, deselects any selected objects and re-enables trackball controls
function onDocumentMouseUp( event ) {
event.preventDefault();
controls.enabled = true;
if ( INTERSECTED ) {
plane.position.copy( INTERSECTED.position );
SELECTED = null;
}
}
function cursorPositionInCanvas(canvas, event) {
var x, y;
canoffset = $(canvas).offset();
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;
return [x,y];
}`回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-27 17:51:26
使用jQuery：
function cursorPositionInCanvas(canvas, event) {
var x, y;
canoffset = $(canvas).offset();
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;
return [x,y];
}更新：
mouse.x = (cursorPositionInCanvas( renderer.domElement, event )[0]) / $(canvas).width()) * 2 - 1;
mouse.y = - (cursorPositionInCanvas( renderer.domElement, event )[1])/ $(canvas).height()) * 2 + 1;Stack Overflow用户
发布于 2019-04-18 08:47:34
你的问题的答案其实很简单。不过，我花了一段时间才弄明白这一点。通过向TrackballControls构造函数添加第二个参数，可以控制控件在其上处于活动状态的元素。
var controls = new THREE.TrackballControls(camera, renderer.domElement)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15108095
复制相关文章
相似问题