특정 기기(특정 모델)를 클릭하면 그걸 감지하도록 코드를 짰다. 내가 시도한 코드는 더보기와 같다. 더보기 맨 처음엔 three.interaction을 써서 간단히 구현할 수 있을 줄 알았다. // three.interaction 방식 // new a interaction, then you can add interaction-event with your free style const interaction = new Interaction(this.renderer, this.scene, this.camera) this.scene.resource.cursor = 'pointer' this.scene.resource.on('click', function (ev) { console.log(ev, interacti..
three.js 코드에 particle을 추가하는 작업을 하고 있다. 현재까지 구현한 사항은 다음과 같다. particle의 사이즈 랜덤화 particle의 위치 랜덤화 마우스 움직임(좌표값)에 따른 particle의 움직임 경과한 시간에 따른 particle의 움직임 particle의 텍스쳐 추가 현재 5번에서 골머리를 겪어 해결 기록을 남기고자 한다. 처음 짠 Texture 코드는 다음과 같다. // Textures const textureLoader = new THREE.TextureLoader() const particleTexture = textureLoader.load('../../assets/image/particle.png') material.map = particleTexture 그냥 검..
프로젝트 개요 프로젝트 명 에듀키트 디지털 트윈 모니터링 시스템 구축 구성원 멘토 @허재준 팀장 @김채은 팀원 @김희선 @진아영 @백동기 프로젝트 기간 프로젝트 총 기간 2022-03-16 ~ 2022-04-28 프로젝트 기획 기획 목적 기획 아이디어 산업 분야로 옮겨진 메타버스 및 디지털 트윈을 통해 기존의 자동화된 기기 관리를 웹 UI UX로 구현하고, 구현한 기기의 실시간 데이터 확인 및 불량품 판독을 가능하게 하여 기기 관리자로 하여금 기기제어 및 생산품 관리가 용이하도록 함. 프로젝트 방법 및 과정 기능 정의 불량품 확인 및 체크 edukit의 실시간 데이터를 three.js로 웹에서 확인 가능 웹에서 기기 클릭 후 방향키로 움직임을 조작 가능 비전인식으로 불량품 판별(주사위) 시 웹에서 체크 ..
프로젝트 개요 구성원 본인 포함 총 4명...이었다가 코로나로 인해 3명이 된다. 역할 분담 프론트 2명, 백엔드 2명(후에 1명) 내가 맡은 파트는 프론트에서 프론트 및 퍼블리싱 보조였다. 그리고 팀장도 맡았다. 프로젝트 기간 2022.02.21 - 2022.03.15(스프린트 총 3회) 스프린트는 콜라비로 진행하였다. 프로젝트 결과 노션으로 정리하였다. [Team 제주 넘는 차] 제주도 렌터카 사이트 구현 프로젝트 결과 broad-industry-94e.notion.site 프로젝트 회고 좋았던 점 코드를 좀 더 이해할 수 있게 됐다. 대체 각기 다른 코드를 어떻게 버무리는 건지 상상도 못하던 첫날과 구글링하여 코드를 넣고 맞게 수정하는 마지막 날을 비교해보니 많이 발전한 것 같다. 팀 소통이 활발하..
자바스크립트의 .map을 사용했다. 더 좋은 방법이 있을 것 같지만...일단 그냥 모두 적었다. 참고한 링크1 [javascript] 객체 배열에서 속성 값을 배열로 추출 - 리뷰나라 다음 구조의 JavaScript 객체 배열이 있습니다. objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ]; 각 객체에서 필드를 추출하고 값을 포함하는 배열을 가져 오려고합니다 (예 : field foo는 array) [ daplus.net 참고한 링크2 Array.prototype.map() - JavaScript | MDN The map() method creates a new array populated with the results of ca..
거의 3일 내내 쩔쩔 맨 오류 store/apiUtil.js 파일에서 뭔가 오류가 난 건 알겠는데 어느 부분이 문제인지 아예 감도 못잡았었다. // store/apiUtil.js import axios from 'axios' const api = axios.create() // request(요청)시 아래의 로직이 인터셉트 된다. api.interceptors.request.use( async request => { // header.token 전송 const token = window.localStorage.getItem('accessToken') request.data.accesstoken = token return request }, async error => { return Promise.reje..
요구사항 (팀원분이 만들어주신 화면에) 인풋 폼 공란/유효성 체크 기능 넣기 전화번호 파이프 자동 삽입 views/reservation/Reservation.vue 로직은 회원가입 때 로직과 동일하다고 보면 된다. 근데 내가 bootstrap vue를 이용해서 짰기 때문인지는 모르겠는데 toLocaleString()가 충돌이 나서 금액에 들어가있던 해당 명령어를 빼야했다. 처음으로 다른 사람이 짠 아예 새로운 코드를 수정해본 것 같은데 신기했다. // ... 예약자 이름 이름은 한글 2자리 이상 입력해야 합니다 운전자 이름 이름은 한글 2자리 이상 입력해야 합니다 운전자 생년월일 핸드폰 번호 무통장 입금 우리**** *** **** ** 국민**** *** **** ** 농협**** *** **** **..
로컬 스토리지에 토큰을 담는 것은 이미 수업 때 해봤던 부분이라 그렇게 어렵지 않았다. 로그아웃 또한 마찬가지였다. 토큰 삭제를 어디서 할 지 고민했는데 그냥 수업 때처럼 프론트에서 삭제하기로 했다. vues/auth/logout.vue 로그아웃 페이지를 따로 생성했다. store/models/auth.js 로그아웃 로직을 추가 했다. 백엔드로 받지 않고 프론트에서 로컬 스토리지에 있는 토큰을 삭제하도록 했다. // ... mutations: { // 동기적 setTokenUser(state, data) { state.TokenUser = data }, setTokenLoading(state, data) { state.TokenLoading = data state.Error = null }, setErr..
