Rendering Points
<script>
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
</script>
<div>
<Canvas>
<Scene />
</Canvas>
</div>
<style>
div {
height: 100%;
}
</style>Using Points
Points work in Threlte the same way they do in Three. Check three docs about Points and Point Material to learn more.
Ensuring Points Work Correctly with BufferGeometry
For your points to function correctly, it’s essential that they have an associated BufferGeometry with a specified attribute for point positions. Here’s a straightforward method using the default Threlte approach:
<T.Points>
<T.BufferGeometry>
<T.BufferAttribute
args={[positions, 3]}
attach={(parent, self) => {
parent.setAttribute('position', self)
return () => {
// cleanup function called when ref changes or the component unmounts
// https://threlte.xyz/docs/reference/core/t#attach
}
}}
/>
</T.BufferGeometry>
<T.PointsMaterial size={0.25} />
</T.Points>In the case of <T.BufferAttribute>, it is not enough to make it a child of <T.BufferGeometry>. To actually link it,
you must invoke the attach method. If you skip this step, the attribute
won’t be associated with the geometry. Learn more about how attach works.
Alternatively, you can also define and manage BufferGeometry within <script> tags or
in an external file. Once done, the <T> component allows for direct attachment
to <T.Points>, like so:
<T.Points>
<T is={pointsBufferGeometry} />
<T.PointsMaterial size={0.25} />
</T.Points>Working code for this approach can be found in SceneAlternative.svelte file of this example.