想要在網頁上顯示的.obj文件上有點擊事件

我在使用三個js的網頁上有一個.obj文件。我的目標是，當我向左/向右拖動鼠標時，OBJ模型應該旋轉，我可以使用USING THREE.TrackballControls（）。接下來的事情是，我想了解該OBJ模型上的具體點，並且如果鼠標在這些點上發生某些事情會發生（如將在網頁上顯示的計數器增加）。我已經看到了三個js的DOM事件，但它看起來像它允許我們點擊整個對象而不是對象上的特定點。我該如何做到這一點？想要在網頁上顯示的.obj文件上有點擊事件

來源

2015-01-15 stuli

您必須創建一個raycaster。（r69）

mouse_vector = new THREE.Vector3(), 
mouse = { x: 0, y: 0, z: 1 }; 
var vector = new THREE.Vector3(); 
var raycaster = new THREE.Raycaster(); 
var dir = new THREE.Vector3(); 

function onMouseDown(event_info) 
{ 
    event_info.preventDefault(); 
    mouse.x = (event_info.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = - (event_info.clientY/window.innerHeight) * 2 + 1; 
    mouse_vector.set(mouse.x, mouse.y, mouse.z); 
    mouse_vector.unproject(camera); 
    var direction = mouse_vector.sub(camera.position).normalize(); 
    ray = new THREE.Raycaster(camera.position, direction); 
    ray.set(camera.position, direction); 
    intersects = ray.intersectObjects(scene.children, true); 

    if(intersects.length) 
    { 
     intersects.forEach(function(clicked) 
     { 
      // Your stuff like 
      if (clicked.object.typ == 'yourObject') 
      { 

       //Event on click.. 
      } 
     }); 
    } 
}

來源

2015-01-16 01:17:23 mcode

thanks @mcode。這些信息有所幫助，但我認爲如果我旋轉相機，那麼光線和物體之間的交叉點會改變嗎？由於光線的原點附着在相機上。我需要的是即使旋轉相機，對象上的一個點也應該給我相同的座標，而不管相機的旋轉。 – stuli

我想使用的是，如果.obj文件（一個面向相機，另一個不面向相機）上有兩個點，我想單擊面向相機的一個。我不應該點擊不面向相機的點。我們可以通過raycaster實現嗎？ – stuli

你可以在Paint中繪製草圖嗎？很難解釋3D可視化並且很難理解它。 – mcode

想要在網頁上顯示的.obj文件上有點擊事件

回答

相關問題