<PointsMaterial>

An extended THREE.PointsMaterial that renders antialiased round dots.

Show Code

• App.svelte
• Scene.svelte

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import { T } from '@threlte/core'
  import { useGltf, PointsMaterial, OrbitControls, Grid } from '@threlte/extras'
  import { Vector3 } from 'three'

  const gltf = useGltf('/models/pointcloud_plant_in_a_pot.glb')
</script>

<T.PerspectiveCamera
  makeDefault
  position={[1, 1, 2]}
>
  <OrbitControls autoRotate />
</T.PerspectiveCamera>

{#await gltf then result}
  <T.Points rotation.x={-Math.PI / 2}>
    <T is={result.nodes.Object_2.geometry} />
    <PointsMaterial
      size={0.05}
      vertexColors
      toneMapped={false}
    />
  </T.Points>
{/await}

<Grid
  position.y={-0.5}
  infiniteGrid
  cellColor="#fff"
  sectionColor="#fff"
  cellSize={0.25}
  fadeDistance={2}
  type="circular"
  fadeOrigin={new Vector3()}
/>

Potted plant by Federica Girola.

Usage

<script lang="ts">
  import { T } from '@threlte/core'
  import { PointsMaterial } from '@threlte/extras'
</script>

<T.Points>
  <T.BufferGeometry />
  <PointsMaterial />
</T.Points>

Component Signature

<PointsMaterial> extends < T . PointsMaterial > and supports all its props, snippets, bindings and events.