[Team 6] three.js 오브젝트 마우스 hover 효과

3호기 클릭을 인식하게 하기 위해 마우스 커서가 3호기(오브젝트) 위에 있으면 색이 변하는 효과를 구현 했다.

 

src/js/example.js

팀원분의 도움으로 클릭 이벤트를 참고하여 구현했다.

// 중략
  
  // hover 효과
  function hover(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
    raycaster.setFromCamera(mouse, cameraElement)
    const intersects = raycaster.intersectObjects(scene.resource.obj.children, true) //array
    // object define
    const allObject = scene.resource.obj.children
    if (intersects.length > 0) {
      // 3호기 호버 시
      const res = intersects.filter(function (res) {
        return res && res.object
      })[0]
      if (res && res.object) {
        selectedObject = res.object
        const allSelectObject =
          selectedObject.parent.name == 'StaticMesh1' ||
          selectedObject.parent.name == 'StaticMesh2' ||
          selectedObject.parent.name == 'StaticMesh3' ||
          selectedObject.parent.name == 'StaticMesh4'

        if (allSelectObject) {
          // console.log(allObject)
          // line.visible = true
          for (let i = 1; i < 5; i++) {
            allObject[i].children[0].material.forEach(element => {
              element.emissive.setHex(0x412057)
            })
          }
          // console.log('move')
        } else {
          // line.visible = false
          for (let i = 1; i < 5; i++) {
            allObject[i].children[0].material.forEach(element => {
              element.emissive.setHex(0x000000)
            })
          }
        }
      }
    }
  }
  document.addEventListener('mousemove', hover)
  
  // 중략

 

결과

마우스가 3호기 위에 있을 때

마우스가 3호기를 벗어났을 때