Edges

The cientos package 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.

Usage

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Box, ContactShadows, Edges, OrbitControls } from '@tresjs/cientos'
import { MOUSE, TOUCH } from 'three'

const gl = {
  clearColor: '#f6f6f6',
  alpha: false,
}

const dataBoxes = [{
  color: '#82DBC5',
  edgeColor: '#505050',
}, {
  color: '#505050',
  edgeColor: 'white',
}, {
  color: '#F6B03B',
  edgeColor: '#505050',
}]
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <OrbitControls
      make-default
      auto-rotate
      :enableZoom="false"
      :auto-rotate-speed="1"
      :mouseButtons="{ LEFT: MOUSE.ROTATE, RIGHT: MOUSE.NONE }"
      :touches="{ ONE: TOUCH.ROTATE, TWO: TOUCH.NONE }"
    />

    <Box
      v-for="(x, index) in [-1.5, 0, 1.5]"
      :key="`docs-edges-demo-box-${index}`"
      :position="[x, 0, 0]"
    >
      <TresMeshBasicMaterial
        :color="dataBoxes[index].color"
      />
      <Edges :color="dataBoxes[index].edgeColor" />
    </Box>

    <ContactShadows
      :blur="2"
      :resolution="512"
      :opacity=".25"
      :position-y="-1"
    />
  </TresCanvas>
</template>

The <Edges> component is 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 provide a custom material to <Edges>. When a custom material is used, the color prop has no effect. (see code bellow)

<script setup lang="ts">
import { Box, Edges } from '@tresjs/cientos'
</script>

<template>
  <Box>
    <TresMeshNormalMaterial />

    <!-- Usage with the default material (LineBasicMaterial) -->
    <Edges color="#FF0000" />
    <!-- ———— -->

    <!-- Usage with an custom material -->
    <Edges>
      <TresMeshBasicMaterial color="#00FF00" />
    </Edges>
    <!-- ———— -->
  </Box>
</template>

Props

<Edges> is based on LineSegments & Line and supports all of its props.

Prop	Description	Default
color	THREE.Color — Color of the edges. More informations : TresColor — THREE.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

Exposed properties

Event	Description
instance	Instance reference — Inheritance of LineSegments.

const edgesRef = shallowRef(null)

console.log(edgesRef.value.instance) // instance properties

<template>
    <Edges ref="edgesRef" />
</template>