diff --git a/package.json b/package.json
index dffe6e7fb..507ece8fd 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
- "playground": "cd playground && nr dev",
+ "playground": "cd playground && npm run dev",
"test": "vitest",
"test:ci": "vitest run",
"test:ui": "vitest --ui",
diff --git a/playground/src/components/TheEvents.vue b/playground/src/components/TheEvents.vue
index c238976ca..22aa7951d 100644
--- a/playground/src/components/TheEvents.vue
+++ b/playground/src/components/TheEvents.vue
@@ -2,6 +2,7 @@
import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
import { reactive } from 'vue'
import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '/@/'
const state = reactive({
clearColor: '#201919',
@@ -19,7 +20,6 @@ function onClick(ev) {
}
function onPointerEnter(ev) {
- console.log(ev)
if (ev) {
ev.object.material.color.set('#DFFF45')
}
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index 44a8bb1e4..563a8bf1a 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -1,7 +1,5 @@
-
+
- Shapes
-
-
\ No newline at end of file
+
+
+
diff --git a/playground/src/pages/shapes.vue b/playground/src/pages/shapes.vue
index 253ed899b..1b509ed6b 100644
--- a/playground/src/pages/shapes.vue
+++ b/playground/src/pages/shapes.vue
@@ -83,7 +83,7 @@ const tubePath = new CubicBezierCurve3(
-
+
diff --git a/src/components/TresCanvas.ts b/src/components/TresCanvas.ts
index 6ab3caf8a..11b3e5028 100644
--- a/src/components/TresCanvas.ts
+++ b/src/components/TresCanvas.ts
@@ -1,4 +1,4 @@
-import { App, defineComponent, h, onUnmounted, ref, watch } from 'vue'
+import { App, defineComponent, h, onUnmounted, ref, watch, watchEffect } from 'vue'
import * as THREE from 'three'
import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
import { createTres } from '/@/core/renderer'
@@ -50,17 +50,19 @@ export const TresCanvas = defineComponent({
if (props.physicallyCorrectLights === true) {
logWarning('physicallyCorrectLights is deprecated, useLegacyLights is now false by default')
}
+
const container = ref()
const canvas = ref()
const scene = new THREE.Scene()
const { setState } = useTres()
setState('scene', scene)
+ setState('canvas', canvas)
onUnmounted(() => {
setState('renderer', null)
})
-
+
function initRenderer() {
const { renderer } = useRenderer(canvas, container, props)
@@ -70,14 +72,13 @@ export const TresCanvas = defineComponent({
const { raycaster, pointer } = useRaycaster()
- onLoop(() => {
- if (!activeCamera.value) return
-
- raycaster.value.setFromCamera(pointer.value, activeCamera.value)
- renderer.value?.render(scene, activeCamera.value)
+ watchEffect(() => {
+ if (activeCamera.value) raycaster.value.setFromCamera(pointer.value, activeCamera.value)
})
-
+ onLoop(() => {
+ if (activeCamera.value) renderer.value?.render(scene, activeCamera.value)
+ })
}
watch(canvas, initRenderer)
@@ -103,7 +104,7 @@ export const TresCanvas = defineComponent({
}
if (import.meta.hot) {
- import.meta.hot.on('vite:afterUpdate',dispose)
+ import.meta.hot.on('vite:afterUpdate', dispose)
}
return () => {
@@ -113,7 +114,7 @@ export const TresCanvas = defineComponent({
{
ref: container,
'data-scene': scene.uuid,
- key: scene.uuid,
+ key: scene.uuid,
style: {
position: 'relative',
width: '100%',
diff --git a/src/composables/useRaycaster/index.ts b/src/composables/useRaycaster/index.ts
index 05a146832..5ea833a8d 100644
--- a/src/composables/useRaycaster/index.ts
+++ b/src/composables/useRaycaster/index.ts
@@ -1,6 +1,7 @@
-import { Raycaster, Vector2 } from 'three'
-import { Ref, ref, ShallowRef, shallowRef } from 'vue'
import { useTres } from '/@/composables'
+import { MaybeElementRef, unrefElement } from '@vueuse/core'
+import { Raycaster, Vector2 } from 'three'
+import { onUnmounted, Ref, ref, ShallowRef, shallowRef, watchEffect } from 'vue'
const raycaster = shallowRef(new Raycaster())
const pointer = ref(new Vector2())
@@ -47,9 +48,9 @@ export function useRaycaster(): UseRaycasterReturn {
pointer.value.y = -(event.clientY / window.innerHeight) * 2 + 1
}
- window.addEventListener('pointermove', onPointerMove)
+ window.addEventListener('pointermove', onPointerMove) //TODO listener should be on canvas
- /* onUnmounted(() => {
+ /* onUnmounted(() => { TODO
window.removeEventListener('pointermove', onPointerMove)
}) */
return {