1. @threlte/core
  2. ViewportAwareObject

@threlte/core

ViewportAwareObject

Provides information on the visibility of the object relative to the viewport through the means of the events viewportenter and viewportleave or the binding inViewport.

INFO

This is a trait component. Trait components are mostly used internally and make certain aspects of three.js objects accessible and reactive and interact with Threlte systems.

Import

Source

Github View Source Code

Package

NPM View Package

Basic Example

TIP

You most likely want to use a <MeshInstance> component in this scenario. The component <ViewportAwareObject> is part of the component <Object3DInstance>, which the component <MeshInstance> is extending.

<script>
	import { ViewportAwareObject } from '@threlte/core'
	import { Mesh } from 'three'

	const mesh = new Mesh()

	const onViewportEnter = () => {
		console.log('Mesh has entered the viewport!')
	}

	const onViewportLeave = () => {
		console.log('Mesh has entered the viewport!')
	}
</script>

<ViewportAwareObject
	object={mesh}
	viewportAware
	on:viewportenter={onViewportEnter}
	on:viewportleave={onViewportLeave}
/>

Properties

// required
object: Object3D
viewportAware: boolean = false

Bindings

inViewport: boolean