Merge branch 'main' into playground-demos-lost-in-translation

apps/playground/package.json

@@ -30,8 +30,8 @@
     "@iconify-json/carbon": "^1.1.13",
     "@iconify-json/logos": "^1.1.22",
     "@kidonng/daisyui": "^2.31.0",
-    "@tresjs/cientos": "workspace:^1.4.0",
-    "@tresjs/core": "workspace:^1.5.0",
+    "@tresjs/cientos": "workspace:^1.6.0",
+    "@tresjs/core": "workspace:^1.6.0",
     "three": "^0.148.0",
     "unocss": "^0.48.0",
     "unocss-preset-daisy": "^1.2.0",

docs/.vitepress/config.ts

@@ -90,7 +90,21 @@ export default defineConfig({
           },
           {
             text: 'Shapes',
-            items: [{ text: 'Plane', link: '/cientos/shapes/plane' }],
+            items: [
+              { text: 'Box', link: '/cientos/shapes/box' },
+              { text: 'Circle', link: '/cientos/shapes/circle' },
+              { text: 'Cone', link: '/cientos/shapes/cone' },
+              { text: 'Dodecahedron', link: '/cientos/shapes/dodecahedron' },
+              { text: 'Icosahedron', link: '/cientos/shapes/icosahedron' },
+              { text: 'Octahedron', link: '/cientos/shapes/octahedron' },
+              { text: 'Plane', link: '/cientos/shapes/plane' },
+              { text: 'Ring', link: '/cientos/shapes/ring' },
+              { text: 'Sphere', link: '/cientos/shapes/sphere' },
+              { text: 'Tetrahedron', link: '/cientos/shapes/tetrahedron' },
+              { text: 'Torus', link: '/cientos/shapes/torus' },
+              { text: 'TorusKnot', link: '/cientos/shapes/torus-knot' },
+              { text: 'Tube', link: '/cientos/shapes/tube' },
+            ],
           },
           {
             text: 'Misc',

docs/api/events.md

@@ -2,6 +2,10 @@
 
 **TresJS** Mesh objects emit pointer events when they are interacted with using `raycaster` and `pointer` objects under the hood.
 
+<StackBlitzEmbed project-id="tresjs-events" />
+
+## Pointer Events
+
 ```html
 <TresMesh
   @click="(ev) => console.log('click', ev)"

docs/cientos/shapes/box.md

@@ -0,0 +1,29 @@
+# Box <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/box.png)
+
+The `cientos` package provides a `<Box />` component that serves as a short-cut for a `BoxGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  width: number,
+  height: number,
+  depth: number,
+  widthSegments: number,
+  heightSegments: number,
+  depthSegments: number
+]
+```
+
+Reference: [BoxGeometry](https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry)
+
+## Usage
+
+```html
+<Box :args="[1, 1, 1]" color="orange" />
+
+// Box with a custom material transformations
+<Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Box>
+```

docs/cientos/shapes/circle.md

@@ -0,0 +1,22 @@
+# Circle <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/circle.png)
+
+The `cientos` package provides a `<Circle />` component that serves as a short-cut for a `CircleGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, segments: number, thetaStart: number, thetaLength: number]
+```
+
+Reference: [CircleGeometry](https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry)
+
+## Usage
+
+```html
+<Circle :args="[1, 32]" color="lightsalmon" />
+
+// Circle with a custom material transformations
+<Circle ref="circleRef" :args="[1, 32]" :position="[0, 0, 0]">
+  <TresMeshToonMaterial color="lightsalmon" />
+</Circle>
+```

docs/cientos/shapes/cone.md

@@ -0,0 +1,30 @@
+# Cone <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/cone.png)
+
+The `cientos` package provides a `<Cone />` component that serves as a short-cut for a `ConeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  height: number,
+  radialSegments: number,
+  heightSegments: number,
+  openEnded: boolean,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [ConeGeometry](https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry)
+
+## Usage
+
+```html
+<Cone :args="[1, 1, 8]" color="orange" />
+
+// Cone with a custom material transformations
+<Cone ref="coneRef" :args="[1, 1, 8]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Cone>
+```

docs/cientos/shapes/dodecahedron.md

@@ -0,0 +1,22 @@
+# Dodecahedron <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/dodecahedron.png)
+
+The `cientos` package provides a `<Dodecahedron />` component that serves as a short-cut for a `DodecahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [DodecahedronGeometry](https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry)
+
+## Usage
+
+```html
+<Dodecahedron :args="[1, 0]" color="deeppink" />
+
+// Dodecahedron with a custom material transformations
+<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="deeppink" />
+</Dodecahedron>
+```

docs/cientos/shapes/icosahedron.md

@@ -0,0 +1,22 @@
+# Icosahedron <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/icosahedron.png)
+
+The `cientos` package provides a `<Icosahedron />` component that serves as a short-cut for a `IcosahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [IcosahedronGeometry](https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry)
+
+## Usage
+
+```html
+<Icosahedron :args="[1, 0]" color="red" />
+
+// Icosahedron with a custom material transformations
+<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="red" />
+</Icosahedron>
+```

docs/cientos/shapes/octahedron.md

@@ -0,0 +1,22 @@
+# Octahedron <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/octahedron.png)
+
+The `cientos` package provides a `<Octahedron />` component that serves as a short-cut for a `OctahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [OctahedronGeometry](https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry)
+
+## Usage
+
+```html
+<Octahedron :args="[1, 0]" color="red" />
+
+// Octahedron with a custom material transformations
+<Octahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="red" />
+</Octahedron>
+```

docs/cientos/shapes/plane.md

@@ -4,6 +4,12 @@
 
 The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
 
+```typescript
+args: [width: number, height: number, widthSegments: number, heightSegments: number]
+```
+
+Reference: [PlaneGeometry](https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry)
+
 ::: info
 A convenient default rotation is applied to the _x-axis_ of the plane (`-Math.PI / 2`), so that it is facing up (along the Y axis).
 :::

docs/cientos/shapes/ring.md

@@ -0,0 +1,29 @@
+# Ring <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/ring.png)
+
+The `cientos` package provides a `<Ring />` component that serves as a short-cut for a `RingGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  innerRadius: number,
+  outerRadius: number,
+  thetaSegments: number,
+  phiSegments: number,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [RingGeometry](https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry)
+
+## Usage
+
+```html
+<Ring :args="[0.5, 1, 32]" color="purple" />
+
+// Ring with a custom material transformations
+<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="purple" />
+</Ring>
+```

docs/cientos/shapes/sphere.md

@@ -0,0 +1,30 @@
+# Sphere <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/sphere.png)
+
+The `cientos` package provides a `<Sphere />` component that serves as a short-cut for a `SphereGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  widthSegments: number,
+  heightSegments: number,
+  phiStart: number,
+  phiLength: number,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [SphereGeometry](https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry)
+
+## Usage
+
+```html
+<Sphere :args="[1, 1, 1]" color="pink" />
+
+// Sphere with a custom material transformations
+<Sphere ref="planeRef" :args="[1, 1, 1]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="pink" />
+</Sphere>
+```

docs/cientos/shapes/tetrahedron.md

@@ -0,0 +1,22 @@
+# Tetrahedron <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/tetrahedron.png)
+
+The `cientos` package provides a `<Tetrahedron />` component that serves as a short-cut for a `TetrahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [TetrahedronGeometry](https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry)
+
+## Usage
+
+```html
+<Tetrahedron :args="[1, 0]" color="yellow" />
+
+// Tetrahedron with a custom material transformations
+<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="yellow" />
+</Tetrahedron>
+```

docs/cientos/shapes/torus-knot.md

@@ -0,0 +1,29 @@
+# TorusKnot <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/torus-knot.png)
+
+The `cientos` package provides a `<TorusKnot />` component that serves as a short-cut for a `TorusKnotGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  tube: number,
+  tubularSegments: number,
+  radialSegments: number,
+  p: number,
+  q: number
+]
+```
+
+Reference: [TorusKnotGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry)
+
+## Usage
+
+```html
+<TorusKnot :args="[0.6, 0.2, 64, 8]" color="lime" />
+
+// TorusKnot with a custom material transformations
+<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]">
+  <TresMeshToonMaterial color="lime" />
+</TorusKnot>
+```

docs/cientos/shapes/torus.md

@@ -0,0 +1,28 @@
+# Torus <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/torus.png)
+
+The `cientos` package provides a `<Torus />` component that serves as a short-cut for a `TorusGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  tube: number,
+  radialSegments: number,
+  tubularSegments: number,
+  arc: number
+]
+```
+
+Reference: [TorusGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry)
+
+## Usage
+
+```html
+<Torus :args="[2, 0.4, 42, 100]" color="cyan" />
+
+// Torus with a custom material transformations
+<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]">
+  <TresMeshToonMaterial color="cyan" />
+</Torus>
+```

docs/cientos/shapes/tube.md

@@ -0,0 +1,50 @@
+# Tube <Badge type="warning" text="^1.6.0" />
+
+![](/cientos/tube.png)
+
+The `cientos` package provides a `<Tube />` component that serves as a short-cut for a `TubeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+<script>
+export default {
+  setup() {
+    const tubePath = ref(new CubicBezierCurve3(
+          new Vector3(-1, 0, 0),
+          new Vector3(-0.5, -1, 0),
+          new Vector3(0.5, 1, 0),
+          new Vector3(1, 0, 0),
+          ));
+
+    return {
+      tubePath
+    }
+  },
+}
+</script>
+```
+
+```typescript
+type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
+
+args: [
+  path: CurveType,
+  tubularSegments: number,
+  radius: number,
+  radialSegments: number,
+  closed: boolean
+]
+```
+
+Reference: [TubeGeometry](https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry)
+
+## Usage
+
+```html
+// TubeGeometry needs a curve path to be construct
+<Tube :args="[tubePath, 20, 0.2, 8, false]" color="lightblue" />
+
+// Tube with a custom material transformations
+<Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="lightblue" />
+</Tube>
+```

package.json

@@ -4,8 +4,7 @@
   "version": "1.0.0",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "engines": {
-    "npm": ">=8.0.0 <9.0.0",
-    "node": ">=16.0.0 <17.0.0"
+    "node": ">=16.0.0"
   },
   "workspaces": [
     "apps/**",
@@ -51,8 +50,8 @@
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
     "@stackblitz/sdk": "^1.8.1",
-    "@tresjs/cientos": "workspace:^1.5.0",
-    "@tresjs/core": "workspace:^1.5.1",
+    "@tresjs/cientos": "workspace:^1.6.0",
+    "@tresjs/core": "workspace:^1.6.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-cli": "^2.2.2",

packages/cientos/CHANGELOG.md

@@ -1,3 +1,14 @@
+# 1.6.0 (2023-02-03)
+
+### Features
+
+- **cientos:** box abstraction ([dc9c638](https://github.com/Tresjs/tres/commit/dc9c638804f877dcc1567b38285ce0d8b4c4a087))
+- **cientos:** circle abstraction ([978eb2d](https://github.com/Tresjs/tres/commit/978eb2da600b0f2055a12a460fd2f5406ceaa028))
+- **cientos:** cone abstraction ([9d04c54](https://github.com/Tresjs/tres/commit/9d04c5456e498542b0373499bbc496bfb9f56c54))
+- **cientos:** sphere abstraction ([e2a6fff](https://github.com/Tresjs/tres/commit/e2a6fff86407a397a0c73c7d0a03c63762bfd833))
+- **cientos:** torus abstraction ([d85eb40](https://github.com/Tresjs/tres/commit/d85eb4091e2ae9c7f9a14406bab8191ea2824375))
+- **cientos:** torus knot abstraction ([8c4fd46](https://github.com/Tresjs/tres/commit/8c4fd4692d06eccced94c35d39fa7280f6fba3c9))
+
 # 1.5.0 (2023-01-19)
 
 ### Features

packages/cientos/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -55,7 +55,7 @@
     "vite-plugin-dts": "^1.7.1"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^1.5.1",
+    "@tresjs/core": "workspace:^1.6.0",
     "three-stdlib": "^2.21.5"
   }
 }

packages/cientos/src/core/Box.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 1, 1],
+    color: '0xffffff',
+  },
+)
+
+const boxRef = shallowRef()
+
+defineExpose({
+  value: boxRef,
+})
+</script>
+<template>
+  <TresMesh ref="boxRef" v-bind="$attrs">
+    <TresBoxGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Circle.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 32],
+    color: '0xffffff',
+  },
+)
+
+const circleRef = shallowRef()
+
+defineExpose({
+  value: circleRef,
+})
+</script>
+<template>
+  <TresMesh ref="circleRef" v-bind="$attrs">
+    <TresCircleGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Cone.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 1, 12],
+    color: '0xffffff',
+  },
+)
+
+const coneRef = shallowRef()
+
+defineExpose({
+  value: coneRef,
+})
+</script>
+<template>
+  <TresMesh ref="coneRef" v-bind="$attrs">
+    <TresConeGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Dodecahedron.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 0],
+    color: '0xffffff',
+  },
+)
+
+const dodecahedronRef = shallowRef()
+
+defineExpose({
+  value: dodecahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="dodecahedronRef" v-bind="$attrs">
+    <TresDodecahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Icosahedron.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 0],
+    color: '0xffffff',
+  },
+)
+
+const icosahedronRef = shallowRef()
+
+defineExpose({
+  value: icosahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="icosahedronRef" v-bind="$attrs">
+    <TresIcosahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Octahedron.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 0],
+    color: '0xffffff',
+  },
+)
+
+const octahedronRef = shallowRef()
+
+defineExpose({
+  value: octahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="octahedronRef" v-bind="$attrs">
+    <TresOctahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Ring.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [0.5, 1, 32],
+    color: '0xffffff',
+  },
+)
+
+const ringRef = shallowRef()
+
+defineExpose({
+  value: ringRef,
+})
+</script>
+<template>
+  <TresMesh ref="ringRef" v-bind="$attrs">
+    <TresRingGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Sphere.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [2, 32, 16],
+    color: '0xffffff',
+  },
+)
+
+const sphereRef = shallowRef()
+
+defineExpose({
+  value: sphereRef,
+})
+</script>
+<template>
+  <TresMesh ref="sphereRef" v-bind="$attrs">
+    <TresSphereGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Tetrahedron.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 0],
+    color: '0xffffff',
+  },
+)
+
+const tetrahedronRef = shallowRef()
+
+defineExpose({
+  value: tetrahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="tetrahedronRef" :rotation="[-Math.PI / 2, 0, 0]" v-bind="$attrs">
+    <TresTetrahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Torus.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 1, 16, 80],
+    color: '0xffffff',
+  },
+)
+
+const torusRef = shallowRef()
+
+defineExpose({
+  value: torusRef,
+})
+</script>
+<template>
+  <TresMesh ref="torusRef" v-bind="$attrs">
+    <TresTorusGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/TorusKnot.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 0.4, 64, 8],
+    color: '0xffffff',
+  },
+)
+
+const torusKnotRef = shallowRef()
+
+defineExpose({
+  value: torusKnotRef,
+})
+</script>
+<template>
+  <TresMesh ref="torusKnotRef" v-bind="$attrs">
+    <TresTorusKnotGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Tube.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { CatmullRomCurve3, CubicBezierCurve3, LineCurve3, QuadraticBezierCurve3, Vector3 } from 'three'
+import { shallowRef } from 'vue'
+
+type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
+
+type TubeGeometryParams = [CurveType, number, number, number, boolean]
+
+withDefaults(
+  defineProps<{
+    args?: TubeGeometryParams
+    color?: TresColor
+  }>(),
+  {
+    args: () => [
+      new QuadraticBezierCurve3(new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)),
+      20,
+      0.2,
+      8,
+      false,
+    ],
+    color: '0xffffff',
+  },
+)
+
+const tubeRef = shallowRef()
+
+defineExpose({
+  value: tubeRef,
+})
+</script>
+<template>
+  <TresMesh ref="tubeRef" v-bind="$attrs">
+    <TresTubeGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/index.ts

@@ -6,8 +6,41 @@ import { GLTFModel } from './core/useGLTF/component'
 import { FBXModel } from './core/useFBX/component'
 import Text3D from './core/Text3D.vue'
 import Plane from './core/Plane.vue'
+import Box from './core/Box.vue'
+import Sphere from './core/Sphere.vue'
+import Torus from './core/Torus.vue'
+import TorusKnot from './core/TorusKnot.vue'
+import Circle from './core/Circle.vue'
+import Cone from './core/Cone.vue'
+import Tube from './core/Tube.vue'
+import Ring from './core/Ring.vue'
+import Tetrahedron from './core/Tetrahedron.vue'
+import Icosahedron from './core/Icosahedron.vue'
+import Octahedron from './core/Octahedron.vue'
+import Dodecahedron from './core/Dodecahedron.vue'
 
 export * from './core/useGLTF'
 export * from './core/useFBX'
 export * from './types'
-export { OrbitControls, TransformControls, useTweakPane, GLTFModel, FBXModel, Text3D, Plane, useAnimations }
+export {
+  OrbitControls,
+  TransformControls,
+  useTweakPane,
+  GLTFModel,
+  FBXModel,
+  Text3D,
+  Plane,
+  Box,
+  Sphere,
+  Torus,
+  TorusKnot,
+  Circle,
+  Cone,
+  Tube,
+  Ring,
+  Tetrahedron,
+  Icosahedron,
+  Octahedron,
+  Dodecahedron,
+  useAnimations,
+}

packages/cientos/tsconfig.json

@@ -10,10 +10,10 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "types": ["vite/client", "node"],
+    "types": ["vite/client", "node", "@tresjs/core"],
     "incremental": false,
     "skipLibCheck": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "declaration": true,

packages/tres/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.6.0 (2023-02-03)
+
+### Features
+
+- **core:** events support with Raytracing ([0b7767a](https://github.com/Tresjs/tres/commit/0b7767a80a8969585633cd0b570791faff36cbd4))
+
 # 1.5.1 (2023-01-19)
 
 ### Bug Fixes

packages/tres/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
-    "@tresjs/cientos": "workspace:^1.5.0",
+    "@tresjs/cientos": "workspace:^1.6.0",
     "@types/three": "^0.148.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.25.8",

packages/tres/src/components/Shapes.vue

@@ -1,7 +1,22 @@
 <script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
-import { reactive, shallowRef, watch } from 'vue'
-import { Plane, OrbitControls } from '../../../cientos/src/'
+import { BasicShadowMap, CubicBezierCurve3, DoubleSide, NoToneMapping, sRGBEncoding, Vector3 } from 'three'
+import { reactive, ref, shallowRef, watch } from 'vue'
+import {
+  Plane,
+  Tube,
+  Box,
+  Sphere,
+  Torus,
+  Ring,
+  TorusKnot,
+  Tetrahedron,
+  Icosahedron,
+  Octahedron,
+  Dodecahedron,
+  Circle,
+  Cone,
+  OrbitControls,
+} from '../../../cientos/src/'
 
 const state = reactive({
   clearColor: '#82DBC5',
@@ -14,20 +29,105 @@ const state = reactive({
 })
 
 const planeRef = shallowRef()
+const boxRef = shallowRef()
+const torusRef = shallowRef()
+const torusKnotRef = shallowRef()
+const circleRef = shallowRef()
+const tubeRef = shallowRef()
+const ringRef = shallowRef()
+const tetrahedronRef = shallowRef()
+const icosahedronRef = shallowRef()
+const octahedronRef = shallowRef()
+const dodecahedronRef = shallowRef()
 
 watch(planeRef, plane => {
   console.log('plane', plane.value.position)
 })
+watch(boxRef, box => {
+  console.log('box', box.value.position)
+})
+watch(torusRef, torus => {
+  console.log('torus', torus.value.position)
+})
+watch(torusKnotRef, torusKnot => {
+  console.log('torusKnot', torusKnot.value.position)
+})
+watch(circleRef, circle => {
+  console.log('circle', circle.value.position)
+})
+watch(tubeRef, tube => {
+  console.log('tube', tube.value.position)
+})
+watch(ringRef, ring => {
+  console.log('ring', ring.value.position)
+})
+watch(tetrahedronRef, tetrahedron => {
+  console.log('tetrahedron', tetrahedron.value.position)
+})
+watch(icosahedronRef, icosahedron => {
+  console.log('icosahedron', icosahedron.value.position)
+})
+watch(octahedronRef, octahedron => {
+  console.log('octahedron', octahedron.value.position)
+})
+watch(dodecahedronRef, dodecahedron => {
+  console.log('dodecahedron', dodecahedron.value.position)
+})
+
+const tubePath = new CubicBezierCurve3(
+  new Vector3(-1, 0, 0),
+  new Vector3(-0.5, -1, 0),
+  new Vector3(0.5, 1, 0),
+  new Vector3(1, 0, 0),
+)
 </script>
+
 <template>
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
     <OrbitControls />
     <TresScene>
-      <TresAmbientLight :color="0xffffff" :intensity="0.5" />
-      <Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
+      <TresAmbientLight :color="0xffffff" :intensity="1" />
+      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+      <Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>
         <TresMeshToonMaterial color="teal" />
       </Plane>
+      <Box ref="boxRef" :arg0s="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="orange" />
+      </Box>
+      <Sphere ref="sphereRef" :args="[1, 32, 16]" :position="[2, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="pink" />
+      </Sphere>
+      <Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="cyan" />
+      </Torus>
+      <TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]" cast-shadow>
+        <TresMeshToonMaterial color="lime" />
+      </TorusKnot>
+      <Circle ref="circleRef" :args="[0.9, 32]" :position="[0, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+        <TresMeshToonMaterial color="lightsalmon" :side="DoubleSide" />
+      </Circle>
+      <Cone ref="coneRef" :args="[1, 1, 6]" :position="[2, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+        <TresMeshToonMaterial color="slateblue" />
+      </Cone>
+      <Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[2, 6, -2]" cast-shadow>
+        <TresMeshToonMaterial color="lightblue" />
+      </Tube>
+      <Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[0, 6, -2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+        <TresMeshToonMaterial color="purple" :side="DoubleSide" />
+      </Ring>
+      <Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[-2, 6, -2]" cast-shadow>
+        <TresMeshToonMaterial color="yellow" />
+      </Tetrahedron>
+      <Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[-4, 6, -2]" cast-shadow>
+        <TresMeshToonMaterial color="red" />
+      </Icosahedron>
+      <Octahedron ref="octahedronRef" :args="[1, 0]" :position="[-4, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="greenyellow" />
+      </Octahedron>
+      <Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[-4, 6, 2]" cast-shadow>
+        <TresMeshToonMaterial color="deeppink" />
+      </Dodecahedron>
     </TresScene>
   </TresCanvas>
 </template>

packages/tres/src/components/TheEvents.vue

@@ -14,14 +14,14 @@ const state = reactive({
 
 function onClick(ev) {
   if (ev) {
-    ev.object.material.color.set('#00ffff')
+    ev.object.material.color.set('#008080')
   }
 }
 
 function onPointerEnter(ev) {
   console.log(ev)
   if (ev) {
-    ev.object.material.color.set('#ff0000')
+    ev.object.material.color.set('#DFFF45')
   }
 }
 

pnpm-lock.yaml

@@ -8,7 +8,7 @@ importers:
       '@changesets/changelog-github': ^0.4.7
       '@changesets/cli': ^2.25.2
       '@stackblitz/sdk': ^1.8.1
-      '@tresjs/cientos': workspace:^1.5.0
+      '@tresjs/cientos': workspace:^1.6.0
       '@tresjs/core': workspace:^1.5.1
       '@typescript-eslint/eslint-plugin': ^5.42.0
       '@typescript-eslint/parser': ^5.42.0
@@ -52,7 +52,7 @@ importers:
       '@iconify-json/carbon': ^1.1.13
       '@iconify-json/logos': ^1.1.22
       '@kidonng/daisyui': ^2.31.0
-      '@tresjs/cientos': workspace:^1.4.0
+      '@tresjs/cientos': workspace:^1.6.0
       '@tresjs/core': workspace:^1.5.0
       astro: ^1.9.2
       astro-seo: ^0.7.0
@@ -112,7 +112,7 @@ importers:
   packages/tres:
     specifiers:
       '@alvarosabu/utils': ^2.2.0
-      '@tresjs/cientos': workspace:^1.5.0
+      '@tresjs/cientos': workspace:^1.6.0
       '@types/three': ^0.148.0
       '@vitejs/plugin-vue': ^4.0.0
       '@vitest/coverage-c8': ^0.25.8