11import {
22 AmbientLight ,
33 AnimationMixer ,
4- BoxBufferGeometry ,
5- CircleBufferGeometry ,
4+ BoxGeometry ,
5+ CircleGeometry ,
66 Color ,
77 CubeTextureLoader ,
8- ConeBufferGeometry ,
8+ ConeGeometry ,
99 DirectionalLight ,
1010 DoubleSide ,
1111 Mesh ,
1212 MeshPhongMaterial ,
13- OctahedronBufferGeometry ,
13+ OctahedronGeometry ,
1414 PerspectiveCamera ,
1515 Raycaster ,
16- SphereBufferGeometry ,
17- sRGBEncoding ,
16+ SphereGeometry ,
1817 TextureLoader ,
19- Vector2
18+ Vector2 ,
19+ SRGBColorSpace
2020} from "three" ;
2121
2222import { ControlMode , SpatialControls } from "spatial-controls" ;
@@ -85,7 +85,7 @@ export class OutlineDemo extends PostProcessingDemo {
8585 /**
8686 * An effect.
8787 *
88- * @type {Effect }
88+ * @type {OutlineEffect }
8989 * @private
9090 */
9191
@@ -200,14 +200,14 @@ export class OutlineDemo extends PostProcessingDemo {
200200
201201 cubeTextureLoader . load ( urls , ( t ) => {
202202
203- t . encoding = sRGBEncoding ;
203+ t . colorSpace = SRGBColorSpace ;
204204 assets . set ( "sky" , t ) ;
205205
206206 } ) ;
207207
208208 textureLoader . load ( "textures/pattern.png" , ( t ) => {
209209
210- t . encoding = sRGBEncoding ;
210+ t . colorSpace = SRGBColorSpace ;
211211 assets . set ( "pattern-color" , t ) ;
212212
213213 } ) ;
@@ -270,9 +270,9 @@ export class OutlineDemo extends PostProcessingDemo {
270270
271271 // Lights
272272
273- const ambientLight = new AmbientLight ( 0x212121 ) ;
274- const mainLight = new DirectionalLight ( 0xff7e66 , 1.0 ) ;
275- const backLight = new DirectionalLight ( 0xff7e66 , 0.1 ) ;
273+ const ambientLight = new AmbientLight ( 0x656565 ) ;
274+ const mainLight = new DirectionalLight ( 0xffbbaa , 1.0 ) ;
275+ const backLight = new DirectionalLight ( 0xffbbaa , 0.1 ) ;
276276
277277 mainLight . position . set ( 14.4 , 2 , 20 ) ;
278278 backLight . position . copy ( mainLight . position ) . negate ( ) ;
@@ -285,7 +285,7 @@ export class OutlineDemo extends PostProcessingDemo {
285285 const meshes = [ ] ;
286286
287287 let mesh = new Mesh (
288- new SphereBufferGeometry ( 1 , 32 , 32 ) ,
288+ new SphereGeometry ( 1 , 32 , 32 ) ,
289289 new MeshPhongMaterial ( {
290290 color : 0xffff00
291291 } )
@@ -296,7 +296,7 @@ export class OutlineDemo extends PostProcessingDemo {
296296 selection . push ( mesh ) ;
297297
298298 mesh = new Mesh (
299- new OctahedronBufferGeometry ( ) ,
299+ new OctahedronGeometry ( ) ,
300300 new MeshPhongMaterial ( {
301301 color : 0xff00ff
302302 } )
@@ -307,7 +307,7 @@ export class OutlineDemo extends PostProcessingDemo {
307307 selection . push ( mesh ) ;
308308
309309 mesh = new Mesh (
310- new CircleBufferGeometry ( 0.75 , 32 ) ,
310+ new CircleGeometry ( 0.75 , 32 ) ,
311311 new MeshPhongMaterial ( {
312312 side : DoubleSide ,
313313 color : 0xff0000
@@ -320,7 +320,7 @@ export class OutlineDemo extends PostProcessingDemo {
320320 selection . push ( mesh ) ;
321321
322322 mesh = new Mesh (
323- new ConeBufferGeometry ( 1 , 1 , 32 ) ,
323+ new ConeGeometry ( 1 , 1 , 32 ) ,
324324 new MeshPhongMaterial ( {
325325 color : 0x00ff00
326326 } )
@@ -331,7 +331,7 @@ export class OutlineDemo extends PostProcessingDemo {
331331 selection . push ( mesh ) ;
332332
333333 mesh = new Mesh (
334- new BoxBufferGeometry ( 1 , 1 , 1 ) ,
334+ new BoxGeometry ( 1 , 1 , 1 ) ,
335335 new MeshPhongMaterial ( {
336336 color : 0x00ffff
337337 } )
@@ -426,41 +426,38 @@ export class OutlineDemo extends PostProcessingDemo {
426426 "use pattern" : false ,
427427 "pattern scale" : 60.0 ,
428428 "pulse speed" : effect . pulseSpeed ,
429- "edge strength" : uniforms . get ( "edgeStrength" ) . value ,
430- "visible edge" : color . copyLinearToSRGB (
431- uniforms . get ( "visibleEdgeColor" ) . value ) . getHex ( ) ,
432- "hidden edge" : color . copyLinearToSRGB (
433- uniforms . get ( "hiddenEdgeColor" ) . value ) . getHex ( ) ,
429+ "edge strength" : effect . edgeStrength ,
430+ "visible edge" : color . copyLinearToSRGB ( effect . visibleEdgeColor ) . getHex ( ) ,
431+ "hidden edge" : color . copyLinearToSRGB ( effect . hiddenEdgeColor ) . getHex ( ) ,
434432 "x-ray" : true ,
435433 "opacity" : blendMode . opacity . value ,
436434 "blend mode" : blendMode . blendFunction
437435 } ;
438436
439- menu . add ( params , "resolution" , [ 240 , 360 , 480 , 720 , 1080 ] )
440- . onChange ( ( value ) => {
437+ menu . add ( params , "resolution" , [ 240 , 360 , 480 , 720 , 1080 ] ) . onChange ( ( value ) => {
441438
442- effect . resolution . height = Number ( value ) ;
439+ effect . resolution . height = Number ( value ) ;
443440
444- } ) ;
441+ } ) ;
445442
446443 menu . add ( params , "blurriness" ,
447444 KernelSize . VERY_SMALL , KernelSize . HUGE + 1 , 1 ) . onChange ( ( value ) => {
448445
449- effect . blur = ( value > 0 ) ;
450- effect . blurPass . kernelSize = value - 1 ;
446+ effect . blurPass . enabled = ( value > 0 ) ;
447+ effect . blurPass . blurMaterial . kernelSize = value - 1 ;
451448
452449 } ) ;
453450
454451 menu . add ( params , "use pattern" ) . onChange ( ( value ) => {
455452
456453 if ( value ) {
457454
458- effect . setPatternTexture ( assets . get ( "pattern-color" ) ) ;
455+ effect . patternTexture = assets . get ( "pattern-color" ) ;
459456 uniforms . get ( "patternScale" ) . value = params [ "pattern scale" ] ;
460457
461458 } else {
462459
463- effect . setPatternTexture ( null ) ;
460+ effect . patternTexture = null ;
464461
465462 }
466463
@@ -486,15 +483,13 @@ export class OutlineDemo extends PostProcessingDemo {
486483
487484 menu . addColor ( params , "visible edge" ) . onChange ( ( value ) => {
488485
489- uniforms . get ( "visibleEdgeColor" ) . value . setHex ( value )
490- . convertSRGBToLinear ( ) ;
486+ effect . visibleEdgeColor . setHex ( value ) . convertSRGBToLinear ( ) ;
491487
492488 } ) ;
493489
494490 menu . addColor ( params , "hidden edge" ) . onChange ( ( value ) => {
495491
496- uniforms . get ( "hiddenEdgeColor" ) . value . setHex ( value )
497- . convertSRGBToLinear ( ) ;
492+ effect . hiddenEdgeColor . setHex ( value ) . convertSRGBToLinear ( ) ;
498493
499494 } ) ;
500495
0 commit comments