[Team 6] three.js 해당 모델 클릭 시 유튜브 스트리밍 embed 화면 표시 (store 이용)

vue 파일과 js파일에서 store를 이용해 연동 했다.

처음엔 js 파일에서 store를 어떻게 다룰 지 몰라 헤맸는데 강사님의 조언대로 commit을 이용하여 store를 다룰 수 있었다.

 

src/views/edukit/index.vue

유튜브 스트리밍 중인 링크를 임베드해 넣고 v-if로 조건을 달았다.

<template>
  <div id="edukit">
    <div id="btn_box">
      <button class="sart btn">시작</button>
      <button class="stop btn">정지</button>
      <button class="reset btn">리셋</button>
      <button class="emergency btn">비상</button>
      <div v-if="this.$store.getters.keyShowMode" class="embed-container">
        <iframe src="https://www.youtube.com/embed//p_mDR0fAk2g?autoplay=1" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <helloEdukit />
    <details>
      <summary>MQTT 부분 제어</summary>
      <div id="button_box">
        <div>
          <label>
            1호기
            <input type="checkbox" />
            <i></i>
          </label>
          <label>
            2호기
            <input type="checkbox" />
            <i></i>
          </label>
          <label>
            3호기
            <input type="checkbox" />
            <i></i>
          </label>
        </div>
        <div>
          <label>
            센서1
            <input type="checkbox" />
            <i></i>
          </label>
          <label>
            센서2
            <input type="checkbox" />
            <i></i>
          </label>
          <!-- {{ this.$store.getters.keyShowMode }} // 스토어 상태 확인용-->
        </div>
      </div>
    </details>
  </div>
</template>

<script>
import helloEdukit from './edukit.vue'

export default {
  name: 'Edukit',
  components: {
    helloEdukit
  },
  data() {
    return {
    }
  },
  computed: {
    show() {
      return this.$store.getters.keyShowMode
    }
  }
}
</script>

<style lang="scss">
// 중략
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

 

src/store/models/keyShow.js

store 파일의 commit 부분에 콘솔을 찍어보며 commit이 제대로 되는 지 확인하여 원활한 작업이 가능했다.

export default {
  state: {
    keyShowMode: false
  },
  getters: {
    keyShowMode: state => state.keyShowMode
    // 쇼잉모드 (true: 방향키 보임, false: 방향키 사라짐)
  },
  mutations: {
    setKeyShowMode(state, data) {
      state.keyShowMode = data
      console.log('바뀜')
    }
  },
  actions: {
    // 쇼잉모드
    actKeyShowMode(context, payload) {
      context.commit('setKeyShowMode', payload)
    }
  }
}

 

src/js/example.js

three.js 파일에서 클릭 이벤트 시 store의 mutation을 commit으로 호출하여 값을 변경한다.

핵심은 여기서 commit으로 상태값을 바꿔줘야 한다.

// 중략

import store from '../store'
import * as THREE from 'three'

// 중략

    // 3호기 클릭 해제 시
    if (!this.allSelectObject) {
      // console.log('선택해제')
      for (let i = 1; i < 5; i++) {
        allObject[i].children[0].material.forEach(element => {
          element.emissive.setHex(0x000000)
        })
      }
      let keyControlShow = store.commit('setKeyShowMode')
      // console.log('keyControlShow before', keyControlShow)
      keyControlShow = store.commit('setKeyShowMode', false)
    }

    if (intersects.length > 0) {
      // 3호기 클릭 시

// 중략

        if (allSelectObject) {
          for (let i = 1; i < 5; i++) {
            allObject[i].children[0].material.forEach(element => {
              element.emissive.setHex(0x9e4fd4)
            })
          }
          console.log('모델 찾았습니다')
          // console.log(KeyShow.actions.actKeyShowMode('setKeyShowMode', 'true'))
          let keyControlShow = store.commit('setKeyShowMode')
          keyControlShow = store.commit('setKeyShowMode', true)
          return
        }
      }
    }
  }

  // Rendering Start
  render.start()

// 중략

  return element
}

 

결과

해당 모델 클릭 시

유튜브 스트리밍 화면 확인 가능

해당 모델 클릭 해제 시

유튜브 스트리밍 화면 사라짐