How to use the OutlinePass function from three

Find comprehensive JavaScript three.OutlinePass code examples handpicked from public code repositorys.

three.OutlinePass is a post-processing effect that draws an outline around the edges of objects in a three.js scene.

OutlinePass.js

831
832
833
834
835
836
837
838
839
840
this.fsQuad.render(renderer);

// 4. Apply Blur on Half res
this.fsQuad.material = this.separableBlurMaterial1;
this.separableBlurMaterial1.uniforms["colorTexture"].value = this.renderTargetEdgeBuffer1.texture;
this.separableBlurMaterial1.uniforms["direction"].value = THREE.OutlinePass.BlurDirectionX;
this.separableBlurMaterial1.uniforms["kernelRadius"].value = this.edgeThickness;
renderer.setRenderTarget(this.renderTargetBlurBuffer1);
renderer.clear();
this.fsQuad.render(renderer);

+ 89 other calls in file

kye-three.js

GitHub: hupeky/three-cheesecake

676
677
678
679
680
681
682
683
684
685
composer = new THREE.EffectComposer( myView.renderer );

var renderPass = new THREE.RenderPass( myScene.scene, myView.camera );
composer.addPass( renderPass );

var outlinePass = new THREE.OutlinePass( new THREE.Vector2(myView.dimensions.x, myView.dimensions.y), myScene.scene, myView.camera);
outlinePass.edgeStrength = 2.0;
outlinePass.edgeGlow = 0.0;
outlinePass.edgeThickness = 1.0;
//outlinePass.pulsePeriod = 3;

+ 5 other calls in file

How does three.OutlinePass work?

three.OutlinePass is a post-processing effect in the Three.js library that highlights the edges of objects in a scene, creating an "outline" effect by rendering a duplicate of the scene in a buffer and using edge detection algorithms to identify the edges of objects. This effect can be used to create a visual emphasis on important objects or to create a stylized look for a scene.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

const outlinePass = new OutlinePass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  scene,
  camera
);
outlinePass.visibleEdgeColor.set("#ffffff");
outlinePass.hiddenEdgeColor.set("#ffffff");
composer.addPass(outlinePass);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  composer.render();
}

animate();

In this example, an instance of OutlinePass is created and added to an instance of EffectComposer. The EffectComposer is used to render the scene and apply the post-processing effect provided by the OutlinePass. The OutlinePass creates an outline effect around the mesh in the scene.

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About