Outline of clicked/selected object

🌵 Needle Engine
1

I found this example on three.js three.js examples Can we do this this effect with needle? I

Original Post on Discord

by user 869976161550217286

2

Yes you can either implement the example code from above (see the three.js sample code)

Or add a new postprocessing effect.

For that run npm i postprocessing in your package directory

And then add this to your scripts:

import { EffectProviderResult, PostProcessingEffect, registerCustomEffectType, serializable } from "@needle-tools/engine";
import { OutlineEffect } from "postprocessing";
import { Object3D } from "three";


export class OutlinePostEffect extends PostProcessingEffect {
    get typeName(): string {
        return "Outline";
    }

    @serializable(Object3D)
    selection!: Object3D[];

    private _outlineEffect: void | undefined | OutlineEffect;

    onCreateEffect(): EffectProviderResult | undefined {

        const outlineEffect = new OutlineEffect(this.context.scene, this.context.mainCamera!);
        this._outlineEffect = outlineEffect;
        outlineEffect.edgeStrength = 10;
        outlineEffect.visibleEdgeColor.set(0xff0000);
        for (const obj of this.selection) {
            outlineEffect.selection.add(obj);
        }

        return outlineEffect;
    }

    updateSelection() {
        if (this._outlineEffect) {
            this._outlineEffect.selection.clear();
            for (const obj of this.selection) {
                this._outlineEffect.selection.add(obj);
            }
        }
    }
}
registerCustomEffectType("Outline", OutlinePostEffect);

And then you can add it to a Volume like so:

3

image.png

4

it is using this library: Post Processing - Demo

5

image.png
image.png953×843 26.9 KB

6

thank you

by user 869976161550217286

7

hi Marcel, my structure is C:\Users\MISS3RADIM\Desktop\unity_test\My project\Needle\Svojanov

by user 869976161550217286

8

image.png
image.png5120×1440 229 KB

by user 869976161550217286

9

so in VS i go to Svojanov and run npm i postprocessing, to get postprocessing folder in node_modules?

by user 869976161550217286

10

image.png
image.png5120×1440 202 KB

by user 869976161550217286

11

yes

12

I am getting this errors now, cant build my scene now

by user 869976161550217286

13

image.png
image.png5120×1440 700 KB

by user 869976161550217286

14

should i clear packageCache? and run clean install?

by user 869976161550217286

15

eh its some error related to exporter

by user 869976161550217286

16

ok, I have reinstalled vite, and it seems to be OK now

by user 869976161550217286

17

I am not sure what I am missing, but probably correct profile? What is GameOject in profile asigned?

by user 869976161550217286

18

image.png
image.png5120×1440 1.18 MB

by user 869976161550217286

19

Have you assigned the object in the scene?

20

yes

by user 869976161550217286