Merge pull request #158 from Tresjs/bugfix/154-v2-hmr-with-custom-renderer

fix: v2 hmr with custom renderer

src/App.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import Shapes from './demos/Shapes.vue'
+/* import Shapes from './demos/Shapes.vue'
+ */ import TheBasic from './demos/TheBasic.vue'
 // import TheEvents from '/@/components/TheEvents.vue'
 </script>
 
 <template>
-  <Shapes />
+  <TheBasic />
 </template>
 
 <style>

src/components/TresCanvas.ts

@@ -54,8 +54,9 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     const canvas = ref<HTMLCanvasElement>()
     const scene = new THREE.Scene()
 
-    watch(canvas, () => {
+    function initRenderer() {
       const { renderer } = useRenderer(canvas, container, props)
+
       const { activeCamera } = useCamera()
 
       const { onLoop } = useRenderLoop()
@@ -68,16 +69,31 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
         raycaster.value.setFromCamera(pointer.value, activeCamera.value)
         renderer.value?.render(scene, activeCamera.value)
       })
-    })
+    }
+
+    watch(canvas, initRenderer)
+
+    let app
 
-    const app = createTres(slots)
-    app.provide('useTres', useTres())
-    app.provide('extend', extend)
-    app.mount(scene as unknown as TresObject)
+    function mountApp() {
+      app = createTres(slots)
+      app.provide('useTres', useTres())
+      app.provide('extend', extend)
+      app.mount(scene as unknown as TresObject)
+    }
+
+    mountApp()
     expose({
       scene,
     })
 
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:afterUpdate', () => {
+        scene.children = []
+        app.unmount()
+        mountApp()
+      })
+    }
     return () => {
       return h(
         h(

src/composables/useRenderer/index.ts

@@ -195,7 +195,7 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
   const init = () => {
     const _canvas = unrefElement(canvas)
 
-    if (renderer.value || !_canvas) {
+    if (!_canvas) {
       return
     }
 

src/demos/TheBasic.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
 import { reactive, ref } from 'vue'
-
-import { OrbitControls, TransformControls } from '@tresjs/cientos'
-import { useRenderLoop } from '..'
+import { TresCanvas } from '/@/components/TresCanvas'
+import { OrbitControls } from '@tresjs/cientos'
+import { useRenderLoop } from '../composables/useRenderLoop'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
 const state = reactive({
@@ -21,28 +21,26 @@ const sphereRef = ref()
 const { onLoop } = useRenderLoop()
 
 onLoop(({ elapsed }) => {
-  sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1
+  if (!sphereRef.value) return
+  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
 })
 </script>
 <template>
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <OrbitControls make-default />
-    <TresScene>
-      <TresAmbientLight :intensity="0.5" />
-      <TransformControls mode="scale" :object="sphereRef" />
+    <TresAmbientLight :intensity="0.5" />
 
-      <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-        <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
+    <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
+      <TresSphereGeometry />
+      <TresMeshToonMaterial color="cyan" />
+      <!-- <TresMeshToonMaterial color="#FBB03B" /> -->
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial />
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
   </TresCanvas>
 </template>