From 40ec82f5e3d996d2a143ac25e257533ca9e69e23 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Mon, 19 Jun 2023 09:15:01 +0200 Subject: [PATCH 1/6] feat: removed `useCamera` logic from nodeOps --- docs/guide/migration-guide.md | 2 -- docs/guide/troubleshooting.md | 23 ++++++------------ docs/guide/your-first-scene.md | 2 +- playground/src/components/TheEvents.vue | 9 +++++-- src/components/TresScene.ts | 32 ++++++++++++++----------- src/core/nodeOps.ts | 8 ++----- 6 files changed, 35 insertions(+), 41 deletions(-) diff --git a/docs/guide/migration-guide.md b/docs/guide/migration-guide.md index abb3180ee..7271c3e50 100644 --- a/docs/guide/migration-guide.md +++ b/docs/guide/migration-guide.md @@ -163,8 +163,6 @@ watch(modelRef, model => { The `TresOrbitControls` component needs to be after the camera in the tree. This is because the controls need to know the camera to work. -Read more about it here: [Troubleshooting](/guide/troubleshooting.md) - Change this: ```vue {3,5} diff --git a/docs/guide/troubleshooting.md b/docs/guide/troubleshooting.md index fafe07e8a..7586bcfb9 100644 --- a/docs/guide/troubleshooting.md +++ b/docs/guide/troubleshooting.md @@ -12,26 +12,17 @@ You followed the [Getting started guide](/guide/getting-started.md) but you stil These are the most common reasons why you might not be able to see your scene: -### Make sure you have a camera 🎥 +~~### Make sure you have a camera 🎥~~ -The first thing you need to do is to make sure you have a camera in your scene. If you don't have a camera, you won't be able to see anything. +::: info -![No camera found](/no-camera-found.png) +UPDATE: This is not longer an issue since **TresJS v2.2**. The `TresCanvas` component will automatically create a `PerspectiveCamera` for you if not passed. Although, we recommend you to always add a camera to your scene. -```vue - - - - -``` +::: +~~The first thing you need to do is to make sure you have a camera in your scene. If you don't have a camera, you won't be able to see anything.~~ + +![No camera found](/no-camera-found.png) -```vue - - - - - -``` ### Check the height of your canvas 📏 diff --git a/docs/guide/your-first-scene.md b/docs/guide/your-first-scene.md index b3cbcc306..73e19cc51 100644 --- a/docs/guide/your-first-scene.md +++ b/docs/guide/your-first-scene.md @@ -103,7 +103,7 @@ Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q ``` ::: warning -A common issue is that the camera default position is the origin of the scene (0,0,0), if you still can see your scene try adding a position to the camera `` +A common issue is that the camera default position is the origin of the scene (0,0,0), TresJS will automatically set the position of your camera to `[3,3,3]` if position prop is not defined or add one `` if you don't pass any camera. ::: ## Adding a 🍩 diff --git a/playground/src/components/TheEvents.vue b/playground/src/components/TheEvents.vue index 44dc90708..49114812f 100644 --- a/playground/src/components/TheEvents.vue +++ b/playground/src/components/TheEvents.vue @@ -36,11 +36,15 @@ function onPointerMove(ev) { console.log(ev) } } + +const visible = ref(true)