6. ChatGPT 로 Vue 3 + Three.js 움직이는 박스 예제 코드 만들기

 

이번 테스트는 ChatGPT로 Three.js 라이브러리를 사용하여 움직이는 박스를 만드는 것이다. 

 

ChatGPT를 계속 사용하면서 느끼는 것이지만, 가장 중요한 것은 '질문을 어떻게 하느냐?' 

이에 따라 응답의 질이 결정되는 듯하다. 

 

아직 초보인 나는 질문을 잘 못하는 것 같다. 

ChatGPT에 적당한 질문을 한다. 

 

 응답과 함께 다음과 같은 예제 코드를 제공하였다.

 

<template>
  <div id="app">
    <div ref="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  setup() {
    const container = this.$refs.container;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      container.clientWidth / container.clientHeight,
      0.1,
      1000
    );
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);
    const box = new THREE.BoxGeometry(10, 10, 10);
    const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
    const mesh = new THREE.Mesh(box, material);
    scene.add(mesh);
    camera.position.z = 30;

    const animate = () => {
      requestAnimationFrame(animate);
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();
  }
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}
</style>

눈으로 보면 코드의 오류는 없어 보이는 듯 하다. 

 

그대로 복붙을 하고 실행해 보니 다음과 같은 에러가 발생했다. 

properties of undefined (reading '$refs')

 

간단히 말하면 $refs를 setup()에서 사용했기 때문이다. 뭐 그럴 수 있지...

수정한 후 다행히 에러는 발생하지 않았지만, 아무것도 나타나지 않는다. 

 

이유는  아래 부분에서 발생했다. 

    const camera = new THREE.PerspectiveCamera(
      75,
      container.clientWidth / container.clientHeight,
      0.1,
      1000
    );

container.clientWidth / container.clientHeight의 값 때문에... 로그를 찍어 보니

new THREE.PerspectiveCamera(fov, aspect_ratio, frustum_near, frustum_far)

container.clientWidth / container.clientHeight 권장하는 값으로 넣어줬지만, 

container.clientHeight 값이 0인 관계로 오류가 발생했다. 

 

자잘한 오류를 수정하여 실행한 결과

 

움직이는 박스 예제 코드를 완성할 수 있었다. 

 

이번 테스트에서 느낀 점은 기본 코드 생성에는 큰 문제는 없어 보인다. 

ChatGPT가 생성하는 코드를 사용하려면 기본적인 지식이 있어야 오류를 잡을 수 있고, 

응용도 할 수 있을 것으로 판단된다. 

만약 기본 지식이 있다면 ChatGPT 생성하는 코드의 버그를 잡으면서 학습하는 효과가 있을 것 같다.