[Team 6] three.js 오브젝트에 마우스 호버 시 마우스 포인터 변경

클릭 가능한 오브젝트에 마우스 호버 시 마우스 포인터가 클릭 가능한 걸 인지하도록 변경하는 기능을 추가했다.

 

src/js/example.js

container에 test 아이디를 불러와서 hover 함수의 조건문에 style을 추가했다.

addEventListener 또한 doucument가 아닌 container에 추가하는 것으로 수정했다.

  /* raycaster 형식 클릭 이벤트 */

  let container

  init()

  function init() {
    container = document.getElementById('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) {
          for (let i = 1; i < 5; i++) {
            allObject[i].children[0].material.forEach(element => {
              element.emissive.setHex(0x412057)
            })
          }
          container.style.cursor = 'pointer'
          // console.log('move')
        } else {
          for (let i = 1; i < 5; i++) {
            allObject[i].children[0].material.forEach(element => {
              element.emissive.setHex(0x000000)
            })
          }
          container.style.cursor = 'default'
        }
      }
    }
  }
  // container(renderer.domElement)
  container.addEventListener('mousemove', hover)
  container.addEventListener('click', onclick, true)

 

src/views/edukit/edukit.vue

id를 추가했다.

<template>
  <div id="hover" ref="webgl"></div>
</template>

<script>
import Three from '../../js/example'

export default {
  mounted() {
    Three(this.$refs.webgl)
  }
}
</script>
<style lang="scss" scoped></style>