How to create 3D scene with Vue+Tailwind+TroisJS+Three.js using ChatGPT

一樣起手式都是先把一份比較差的code拿去餵給ChatGPT。

首先它一定要是一個優秀的前端工程師。

除了程式碼，ChatGPT的回答還給了類似Readme的描述，方便我們使用該元件。

因為使用three.js，必須要在html元件mounted以後，才能針對canvas去渲染。或直接使用Vue的套件TroisJS中的Renderer元件。但一樣要在mounted中去掛載子元件。

這裡ChatGPT告訴我們使用$nextTick()完成。

mounted() {
    this.init();
    this.manager.onLoad = () => { this.displayMap(); };
    
    this.$nextTick(() => {
      this.addMiniMap();
    });
  },

如果有出現錯誤，請持續與ChatGPT對話，逐步取得修正的資訊。

甚至把程式碼直接貼給ChatGPT。

addMiniMap() {
      const miniMapComponent = defineComponent(MiniMap);
      const container = document.createElement('div');
      const instance = createApp({
        template: miniMapComponent.template,
        data: miniMapComponent.data,
        methods: miniMapComponent.methods,
        render() {
          return h(miniMapComponent);
        },
      }, {camera: this.camera, scene: this.scene, mapName: this.mapInfos.map_name });
      this.miniMap = instance.mount(container);
      this.$refs.miniMapContainer.appendChild(container);
    },

順利完成minimap的camera和scene的設定，從parentNode(Map)設定。

最後請它給一些code review的建議。

Done.