From e9509bab177a7a23f802ad2716f42d1f36f7654b Mon Sep 17 00:00:00 2001 From: Alvaro Saburido Date: Mon, 19 Jun 2023 17:26:27 +0200 Subject: [PATCH] feat: removed `useCamera` logic from nodeOps (#308) * feat: removed `useCamera` logic from nodeOps * docs: update docs/guide/your-first-scene.md Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com> * docs: update src/components/TresScene.ts Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com> * feat: use `getObjectByProperty` to get the camera * docs: remove camera troubleshooting * chore: removed unused scene imports --------- Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com> --- docs/guide/migration-guide.md | 2 -- docs/guide/troubleshooting.md | 21 --------------- docs/guide/your-first-scene.md | 2 +- playground/src/components/TheEvents.vue | 9 +++++-- src/components/TresScene.ts | 35 ++++++++++++++----------- src/core/nodeOps.ts | 8 ++---- 6 files changed, 29 insertions(+), 48 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..9d189714e 100644 --- a/docs/guide/troubleshooting.md +++ b/docs/guide/troubleshooting.md @@ -12,27 +12,6 @@ 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 🎥 - -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 - - - - -``` - -```vue - - - - - -``` - ### Check the height of your canvas 📏 Another common issue is that the `TresCanvas` component is creating by default a `canvas` element takes the `width` and `height` of the parent element. If the parent element has no height, the canvas will have no height either. diff --git a/docs/guide/your-first-scene.md b/docs/guide/your-first-scene.md index b3cbcc306..6e555c606 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 the prop `position`. If no camera is defined in you scene, a perspective camera is added automatically.` ::: ## 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)