How to create 3D scene with Vue+Tailwind+TroisJS+Three.js using ChatGPT
Published in
May 8, 2023
一樣起手式都是先把一份比較差的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.