diff --git a/CHANGELOG.md b/CHANGELOG.md index 7eb0f1ed3..ae5f74e64 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,19 @@ +## [2.2.0](https://github.com/Tresjs/tres/compare/2.1.3...2.2.0) (2023-06-19) + + +### Features + +* removed `useCamera` logic from nodeOps ([#308](https://github.com/Tresjs/tres/issues/308)) ([e9509ba](https://github.com/Tresjs/tres/commit/e9509bab177a7a23f802ad2716f42d1f36f7654b)) + + +### Bug Fixes + +* banner image link ([b793c77](https://github.com/Tresjs/tres/commit/b793c77a2b456ddac0fdd4cf18ad4d94f19db439)) +* main button colors ([3aab827](https://github.com/Tresjs/tres/commit/3aab8273dace80ba6e5ee210b0e17f0b8bc61449)) +* raycaster does not work properly when scene is not in full screen ([#304](https://github.com/Tresjs/tres/issues/304)) ([20a5b9e](https://github.com/Tresjs/tres/commit/20a5b9eee94755ca58ff4936aef20a070f920a7e)) + ### [2.1.3](https://github.com/Tresjs/tres/compare/2.1.2...2.1.3) (2023-06-14) diff --git a/docs/api/events.md b/docs/api/events.md index 2dee1fc0c..6814697ae 100644 --- a/docs/api/events.md +++ b/docs/api/events.md @@ -1,6 +1,6 @@ # Events -**TresJS** Mesh objects emit pointer events when they are interacted with using `raycaster` and `pointer` objects under the hood. +**TresJS** components emit pointer events when they are interacted with. This is the case for the components that represent Three.js classes that derive from [THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) (like meshes, groups,...). @@ -8,24 +8,18 @@ ```html ``` -## Event Data +| Event | fires when ... | Event Handler Parameter Type(s) | +| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| click   | ... the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-move | ... the pointer is moving above the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-enter | ... the pointer is entering the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-leave | ... the pointer is leaves the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | -The event data is a `TresEvent` object that contains the following properties: - -```ts -;({ - object: Object3D, // The mesh object that emitted the event - distance: number, // The distance between the camera and the mesh - point: Vector3, // The intersection point between the ray and the mesh - uv: Vector2, // The uv coordinates of the intersection point - face: Face3, // The face of the mesh that was intersected - faceIndex: number, // The index of the face that was intersected -}) -``` +The returned [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) includes the [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) that triggered the event. You can access it via `intersection.object`. diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 58620349a..77bcd2b64 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -27,15 +27,15 @@ TresJS is written in Typescript and it's fully typed. If you are using Typescrip ::: code-group ```bash [npm] -npm install @three/types -D +npm install @types/three -D ``` ```bash [yarn] -yarn add @three/types -D +yarn add @types/three -D ``` ```bash [pnpm] -pnpm add @three/types -D +pnpm add @types/three -D ``` ::: diff --git a/docs/guide/index.md b/docs/guide/index.md index f5844f59d..dfe9cd2a2 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -29,15 +29,15 @@ TresJS is written in Typescript and it's fully typed. If you are using Typescrip ::: code-group ```bash [npm] -npm install @three/types -D +npm install @types/three -D ``` ```bash [yarn] -yarn add @three/types -D +yarn add @types/three -D ``` ```bash [pnpm] -pnpm add @three/types -D +pnpm add @types/three -D ``` ::: 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/docs/package.json b/docs/package.json index 4090afa8b..6db629b21 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,6 +11,6 @@ "devDependencies": { "unocss": "^0.53.0", "vite-svg-loader": "^4.0.0", - "vitepress": "1.0.0-beta.1" + "vitepress": "1.0.0-beta.2" } } diff --git a/package.json b/package.json index 00befaa8d..064270938 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@tresjs/core", "description": "Declarative ThreeJS using Vue Components", - "version": "2.1.3", + "version": "2.2.0", "type": "module", "packageManager": "pnpm@8.3.1", "author": "Alvaro Saburido (https://github.com/alvarosabu/)", diff --git a/playground/components.d.ts b/playground/components.d.ts index 1faa12e07..a25994168 100644 --- a/playground/components.d.ts +++ b/playground/components.d.ts @@ -10,6 +10,7 @@ declare module 'vue' { AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default'] Cameras: typeof import('./src/components/Cameras.vue')['default'] DanielTest: typeof import('./src/components/DanielTest.vue')['default'] + DeleteMe: typeof import('./src/components/DeleteMe.vue')['default'] FBXModels: typeof import('./src/components/FBXModels.vue')['default'] Gltf: typeof import('./src/components/gltf/index.vue')['default'] MeshWobbleMaterial: typeof import('./src/components/meshWobbleMaterial/index.vue')['default'] 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)