Vue.js와 Three.js로 웹캠 앱을 만들었습니다.

2291 단어 Vue.jsthree.js

경위


  • 아르바이트처에서는 jquery로 바리바리 쓰고 있으므로, 보다 모던한 개발을 하고 싶어졌다.
  • 어차피라면 세련되게 webGL하고 싶다 → Three.js

    • 학습에 사용한 것


  • Vue.js & Nuxt.js 초입문
  • Three.js examples
  • Three.js 사용해도 아츠 아츠가되지 않을 정도의 PC

    • 결과


  • 이런 웹 앱 가 할 수 있었습니다.
  • 다음은 앱 설명입니다.

    • 흐릿한 내부 구조





    도움이 될지 모르는 기술 tips



    Vue에서 Three.js를 작성하려면 ...


  • Three.js의 코어 패키지
  • Three.js의 서브 패키지는 인스톨 할 수 있는 것도 있지만, 현재 github로부터 필요한 것만 가져와 파일내의 최상부로 코어 패키지를 import 하는 것이 좋을지도. (전체 설치가 가능하면 편한데 ...)
  • 사용하는 변수는 data()내에서 const 선언해 두는 것이 좋다.
  • 영상을 취급하는 관계상, 버그하면 PC가 프리즈＆투어트가 되어 죽기 때문에, 가능한 한 최소의 모듈 단위로 디버그한다(당연).
  • 셰이더 재기록할 필요가 있는 경우도 있으므로, veda 하지만 사용해 움직이는 코드로 고치면 좋지 않을까.

    • 요약


  • Vue는 좋다 (별로 혜택을 받지 않은 것 같지만)
  • Three.js도 좋다 (힘들지만)
  • 잡어 스마트폰으로 보면 굳어지기 때문에, Nuxt.js 사용해 SSR로 재작성하는 것도 좋을지도.
  • UI/UX 더 공부합니다. ( 누구를위한 디자인? 읽었습니다.)
    • three.js(r104)에서 셰이더 에러 로그가 나오지 않는다! !
    【재료】정육면체를 크리스탈처럼 세우려고 하면 실패한 건

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage