title: OutlineNode category: Addons layout: docs

OutlineNode

Post processing node for rendering outlines around selected objects. The node gives you great flexibility in composing the final outline look depending on your requirements.

Code Example

const postProcessing = new THREE.PostProcessing( renderer );
const scenePass = pass( scene, camera );
// outline parameter
const edgeStrength = uniform( 3.0 );
const edgeGlow = uniform( 0.0 );
const edgeThickness = uniform( 1.0 );
const visibleEdgeColor = uniform( new THREE.Color( 0xffffff ) );
const hiddenEdgeColor = uniform( new THREE.Color( 0x4e3636 ) );
outlinePass = outline( scene, camera, {
	selectedObjects,
	edgeGlow,
	edgeThickness
} );
// compose custom outline
const { visibleEdge, hiddenEdge } = outlinePass;
const outlineColor = visibleEdge.mul( visibleEdgeColor ).add( hiddenEdge.mul( hiddenEdgeColor ) ).mul( edgeStrength );
postProcessing.outputNode = outlineColor.add( scenePass );

Import

OutlineNode is an addon, and must be imported explicitly, see Installation#Addons.

import { outline } from 'three/addons/tsl/display/OutlineNode.js';

Constructor

new OutlineNode( scene : Scene, camera : Camera, params : Object )

Constructs a new outline node.

scene | A reference to the scene.
---|---
camera | The camera the scene is rendered with.
params | The configuration parameters. | selectedObjects | An array of selected objects.
---|---
edgeThickness | The thickness of the edges. Default is float(1).
edgeGlow | Can be used for an animated glow/pulse effects. Default is float(0).
downSampleRatio | The downsample ratio. Default is 2.