Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: edges #390

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

damienmontastier
Copy link
Contributor

@damienmontastier damienmontastier commented Apr 29, 2024

This component provides an abstraction of EdgesGeometry from Three.js, <Edges> is specifically designed for rendering visible edges of objects in a scene graph. This enhances the visual quality by highlighting contours and providing a stylized appearance which contributes to the artistic aspect of 3D visualizations.

  • Easy to set up as it automatically derives geometry from its parent
  • You can simply wrap it around any Object3D, Mesh, or primitive to automatically apply edge rendering.
  • You can give to <Edges> a custom material

Local Playgroundpnpm run playground

Local Documentationpnpm run docs:dev

Copy link

stackblitz bot commented Apr 29, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@JaimeTorrealba JaimeTorrealba self-requested a review April 30, 2024 12:21
Copy link
Member

@JaimeTorrealba JaimeTorrealba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi man, I'm glad you're back :), and thanks for this one

Did you know you can now open PRs directly to TresJs (you should be now part of the team)
Regarding the PR I didn't see any major changes, just little details, as always let me know

v-bind="$attrs"
>
<template v-if="hasChildren">
<slot />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, here is better to use default slots (others component uses too)
for example


the TresLineBasicMaterial will act as fallback if any other slot has passed
Official docs here in case you want to check more about it: https://vuejs.org/guide/components/slots.html#fallback-content

So we can delete lines (23 and 25)

| Prop | Description | Default |
| :---------------- | :--------------------------------------------------- | ------------------------- |
| **color** | `THREE.Color` — Color of the edges. <br> More informations : [TresColor](https://docs.tresjs.org/api/instances-arguments-and-props.html#colors) — [THREE.Color](https://threejs.org/docs/#api/en/math/Color) | `#ff0000` |
| **threshold** | `number` — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value | `1` |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I would add one more column with the LineSegments as a general (properly indicated in the description) or all the linesSegment props individually (better to be explicit, trust me we target several non-advance users)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for knowledge which props support LineSegments? I couldn't find any :o
The ThreeJs Docs sends me to Line (but this doesn't have any specific props, I was spectic line width or line-width but couldn't find any)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants