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)
-
-
+
+
+
+
@@ -62,4 +66,5 @@ function onPointerMove(ev) {
+
diff --git a/src/components/TresScene.ts b/src/components/TresScene.ts
index 46a08f0ab..6fd63548a 100644
--- a/src/components/TresScene.ts
+++ b/src/components/TresScene.ts
@@ -1,7 +1,6 @@
-import { App, defineComponent, h, onMounted, onUnmounted, ref, watch, VNode } from 'vue'
+import { App, defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'
import * as THREE from 'three'
import { ColorSpace, ShadowMapType, ToneMapping } from 'three'
-import { isString } from '@alvarosabu/utils'
import { createTres } from '../core/renderer'
import { TresCamera } from '../types/'
import {
@@ -80,18 +79,6 @@ export const TresScene = defineComponent({
setState('container', container)
setState('pointerEventHandler', pointerEventHandler)
- const isCameraAvailable = ref()
-
- const internal = slots && slots.default && slots.default()
-
- if (internal && internal?.length > 0) {
- isCameraAvailable.value =
- internal.some((node: VNode) => isString(node.type) && node.type.includes('Camera')) || props.camera
- if (!isCameraAvailable.value) {
- logWarning('No camera found in the scene, please add one!')
- }
- }
-
const { onLoop, resume } = useRenderLoop()
onMounted(() => {
@@ -104,6 +91,22 @@ export const TresScene = defineComponent({
const { activeCamera, pushCamera, clearCameras } = useCamera()
+ function setCamera() {
+ const camera = scene.getObjectByProperty('isCamera', true)
+
+ if (!camera) {
+ // eslint-disable-next-line max-len
+ logWarning('No camera found. Creating a default perspective camera. To have full control over a camera, please add one to the scene.')
+ const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
+ camera.position.set(3,3,3)
+ camera.lookAt(0,0,0)
+ pushCamera(camera)
+ } else {
+
+ pushCamera(camera as TresCamera)
+ }
+ }
+
function initRenderer() {
const { renderer } = useRenderer(props)
@@ -125,6 +128,7 @@ export const TresScene = defineComponent({
app.provide(TRES_CONTEXT_KEY, tres)
app.provide('extend', extend)
app.mount(scene as unknown)
+ setCamera()
}
mountApp()
@@ -138,8 +142,7 @@ export const TresScene = defineComponent({
app = createTres(slots)
app.provide('extend', extend)
app.mount(scene as unknown)
- const camera = scene.children.find((child: any) => child.isCamera)
- pushCamera(camera as TresCamera)
+ setCamera()
resume()
}
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
index ddf77bfde..aa6cde233 100644
--- a/src/core/nodeOps.ts
+++ b/src/core/nodeOps.ts
@@ -1,7 +1,7 @@
import { RendererOptions } from 'vue'
import { BufferAttribute, Scene } from 'three'
-import { useCamera, useLogger } from '../composables'
import { isFunction } from '@alvarosabu/utils'
+import { useLogger } from '../composables'
import { catalogue } from './catalogue'
import { TresObject } from '../types'
import { isHTMLTag, kebabToCamel } from '../utils'
@@ -20,7 +20,6 @@ let scene: Scene | null = null
const { logError } = useLogger()
-let firstCamera = true
export const nodeOps: RendererOptions = {
createElement(tag, _isSVG, _anchor, props) {
if (!props) props = {}
@@ -46,16 +45,13 @@ export const nodeOps: RendererOptions = {
instance = new target(...props.args)
}
- if (instance.isCamera && firstCamera) {
+ if (instance.isCamera) {
if (!props?.position) {
instance.position.set(3, 3, 3)
}
if (!props?.lookAt) {
instance.lookAt(0, 0, 0)
}
- const { setFirstCamera } = useCamera()
- setFirstCamera(instance)
- firstCamera = false
}
if (props?.attach === undefined) {