Как получить положение мыши с помощью three.js?

Привет, я использую IcosahedronGeometry. В этом я добавляю CircleGeometry к каждой из своих вершин. Итак, теперь мое требование - когда мышь перемещается к кругу, кружок должен ощущать муссууду, и он должен двигаться к мыши. Поэтому для этого я создал RingGeometry вокруг круга. Поэтому, если мышь движется к кольцу, кружок должен воспринимать положение мыши.Как получить положение мыши с помощью three.js?

Но я не могу получить положение мыши. Я использую raycaster, есть ли другая альтернатива, чтобы найти положение мыши?

источник

2015-06-16 disciple

Вы ищете что-то вроде этого?

var cursorX; 
var cursorY; 
document.onmousemove = function(e){ 
    cursorX = e.pageX; 
    cursorY = e.pageY; 
} 
setInterval("checkCursor()", 1000); 
function checkCursor(){ 
    alert("Cursor at: " + cursorX + ", " + cursorY); 
}

источник

2015-06-16 07:52:41

Я сделал следующее (некоторые части опущены для краткости):

// Use of the Raycaster inspired by webgl_interactive_cubes.html, in the THREE.js project examples directory 
raycaster = new THREE.Raycaster(); 
mouse = new THREE.Vector2() 
document.addEventListener('mousemove', onDocumentMouseMove, false); 
window.addEventListener('resize', onWindowResize, false); 
document.addEventListener('mousedown', onMouseDown, false); 


function onDocumentMouseMove(event) { 
    event.preventDefault(); 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = -(event.clientY/window.innerHeight) * 2 + 1; 
} 

function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

function manageRaycasterIntersections(scene, camera) { 
    camera.updateMatrixWorld(); 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(scene.children); 

    if (intersects.length > 0) { 

    } 
    else { 

    } 
} 

function onMouseDown(event){ 
    customLog("mouse position: (" + mouse.x + ", "+ mouse.y + ")"); 
}

Взгляните на this для полного кода

источник

2015-06-16 07:57:24

Привет .. спасибо за ур ответ. Но как насчет оси z? Я хочу также расположение оси z. – disciple

Привет. Положение мыши внутренне 2-мерное и относительно экрана. Чтобы получить точку 3D, основанную на указателе мыши, вы можете использовать функцию raycaster и ее функцию intersectObjects (см. Раздел manageRaycasterIntersections в моем примере и посмотрите исходный код этого примера] (http://threejs.org /examples/webgl_interactive_cubes.html) для получения дополнительной информации) –

Привет .. Thanx .. Он работал с небольшими изменениями. – disciple

Raycaster является стандартным способом для этого:

mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
raycaster.setFromCamera(mouse.clone(), camera); 

var objects = raycaster.intersectObjects(scene.children);

http://jsfiddle.net/nhvff8ra/6/

источник

2015-06-16 14:48:47

спасибо .. Ур пример немного связан с моим требованием ... это помогает мне – disciple

Как получить положение мыши с помощью three.js?

ответ

Смежные вопросы