Три Js Raycaster CSS / HTML Элемент Помехи - PullRequest
Новая
       7

Три Js Raycaster CSS / HTML Элемент Помехи

0 голосов
/ 26 апреля 2020

В настоящее время у меня возникают проблемы с использованием rayCaster, я почти уверен, что моя проблема вызвана CSS / HTML Взаимодействием элементов.

Позвольте мне поделиться всем, что я считаю уместным в моей среде, и, надеюсь, кто-нибудь с большим опытом сможет мне помочь. Моя текущая структура DOM: 

<html>
  <head></head>
  <body>
    <div id="appContainer">
      <div id="canvasContainer">
      </div>
    </div>
  </body>
</html

Я инстанцирую три: 

const renderer = new THREE.WebGLRenderer({ antialias: true }), [])

Затем я присоединяю рендер к DOM через (пожалуйста, игнорируйте аннотации потокового типа) : 

const canvasContainer = ((document.getElementById('canvasContainer'): any) :HTMLElement)
canvasContainer.appendChild(renderer.domElement)

CSS, которые я применил к элементам: 

html, body, div, canvas {
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
}

Ниже вы видите скриншот приложения: enter image description here Я получил функцию ниже, подключенную к событию onClick canvasContainer :

Функция OnClick (Примечание: у меня уже есть rayCaster, созданный вне функции) 

const canvasContainer = ((document.getElementById('canvasContainer'): any) : HTMLElement)

console.log(`container offset left: ${canvasContainer.offsetLeft}`)
console.log('container offset right: ${canvasCOntainer.offsetRight}`)

const mouseX = (event.clientX / renderer.domElement.width) * 2 -1
const mouseY = - (event.clientY / renderer.domElement.height) * 2 + 1

console.log(`mouseX ${mouseX}`)
console.log(`mouseY ${mouseY}`)

rayCaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera)
const intersect = rayCaster.intersectObjects(scene.children)

console.log(intersects)

Так что это в основном моя установка, теперь результаты ... Если я щелкну прямо на плитке с надписью '0,0' (которая фактически является координатой 0,0) . Примечание: я нажимаю прямо в начале (что очень близко к 0,0) Вот что я получаю на своей консоли: enter image description here Так что, как вы можете видеть, даже учитывая тот факт, что холст находится внутри элемента html, смещение по-прежнему равно 0, поэтому оно не должно влиять на него, верно? Теперь, если я изменю способ пересечения объектов с: 

const intersects = rayCaster.intersectObjects( scene.children )

to: 

const intersects = rayCaster.intersectObjects( scene.children, true )

Тогда вот что я получаю, когда нажимаю: enter image description here Эти результаты в основном включают плитку, легенду, но на удивление также несколько строк из карданного подвеса, хотя я на 100% уверен, что нажимаю запятую между геометрией 0,0 текста. Что-то вроде того, что мне кажется, что происходит что-то действительно странное в отношении чего-то, что я не выбираю. Теперь, используя Chrome инспектор элементов, я обнаружил, что div canvasContainer имеет 809x942 пикселей, в то время как canvas имеет 809x938px, что тоже что-то подсказывает, проблема в том, что я не уверен, что делать, чтобы двигаться вперед. Я пытался изменить положение холста на stati c и fixed, но тоже не сработало. Может ли кто-нибудь указать мне правильное направление? Заранее спасибо.

...