invisible hand

이번에는 three.js optimization 예제 코드를 Vue3에 적용하여 실행해 보는 예제 코드를 공유한다. 물론 Vue와 Three.js의 입문 또는 초급자를 위한 예제이다. 개발을 잘하기 위해서는 기존에 있는 예제 코드를 열심히 작성하고 실행해 보아야 한다는게 개인 생각이다. 따라서 Vue와 Three.js를 잘하기 위해서는 많은 예제 코드를 가지고 놀아야 한다고 생각한다. 그럼 three.js optimization 예제를 Vue에 적용시켜보기로 한다. 기존 예제는 지구본에 인구 통계 데이터를 표현하는 것이다. https://threejs.org/manual/#ko/optimize-lots-of-objects 사이트에 해당 코드를 잘 설명하고 있으니 참고하길 바란다. 지난번 shadow 예제..

Vue 전문가라면 three.js의 예제 코드를 사용함에 그렇게 문제는 되지 않을 것이다. 하지만 초급 Vue 개발자라면 three.js를 사용할 때 당황할 수도 있다. 이번에는 초급 Vue개발자가 three.js 예제 코드를 사용할 때 팁이 될 만한 정보를 공유하고자 한다. 초급 Vue 개발자가 three.js로 개발시 기존 예제 코드 활용 방법 https://threejs.org/ 에 방문하면 다양한 정보를 얻을 것이다. Three.js – JavaScript 3D Library threejs.org 위 사이트에서 예제도 함께 얻을 수 있는 방법이 있다. Vue파일로 전환할 예제는 아래 캡처, 탱탱볼 예제이다. 위 출처 사이트에 들어가면 소스와 설명을 다 얻을 수 있으니 참고하면 된다. Vue파일로 ..

이번 테스트는 ChatGPT로 Three.js 라이브러리를 사용하여 움직이는 박스를 만드는 것이다. ChatGPT를 계속 사용하면서 느끼는 것이지만, 가장 중요한 것은 '질문을 어떻게 하느냐?' 이에 따라 응답의 질이 결정되는 듯하다. 아직 초보인 나는 질문을 잘 못하는 것 같다. ChatGPT에 적당한 질문을 한다. 응답과 함께 다음과 같은 예제 코드를 제공하였다. 눈으로 보면 코드의 오류는 없어 보이는 듯 하다. 그대로 복붙을 하고 실행해 보니 다음과 같은 에러가 발생했다. properties of undefined (reading '$refs') 간단히 말하면 $refs를 setup()에서 사용했기 때문이다. 뭐 그럴 수 있지... 수정한 후 다행히 에러는 발생하지 않았지만, 아무것도 나타나지 않는..