Skip to content

Commit 187f7ee

Browse files
author
Juho Räsänen
committed
two stencil scenes
1 parent bc43de2 commit 187f7ee

File tree

3 files changed

+462
-170
lines changed

3 files changed

+462
-170
lines changed

‎main.js

+36-170
Original file line numberDiff line numberDiff line change
@@ -1,204 +1,70 @@
1-
import * as THREE from 'three'
2-
import Stats from 'three/addons/libs/stats.module.js';
3-
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
1+
import * as THREE from 'three';
2+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
3+
import Stats from 'three/addons/libs/stats.module.js'
44

5-
import { CinematicCamera } from 'three/addons/cameras/CinematicCamera.js';
5+
import { Stencil } from './scenes/stencil'
6+
import { StencilBLue } from './scenes/stencil-blue'
67

7-
let camera, scene, raycaster, renderer, stats;
8-
9-
const mouse = new THREE.Vector2();
10-
let INTERSECTED;
11-
const radius = 100;
12-
let theta = 0;
8+
let scene, renderer, stats, controls;
139

1410
init();
1511
animate();
1612

1713
function init() {
1814

19-
camera = new CinematicCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
20-
camera.setLens( 5 );
21-
camera.position.set( 2, 1, 500 );
22-
23-
scene = new THREE.Scene();
24-
scene.background = new THREE.Color( 0xf0f0f0 );
25-
26-
scene.add( new THREE.AmbientLight( 0xffffff ) );
27-
28-
const light = new THREE.DirectionalLight( 0xffffff );
29-
light.position.set( 1, 1, 1 ).normalize();
30-
scene.add( light );
31-
32-
const geometry = new THREE.BoxGeometry( 20, 20, 20 );
33-
34-
for ( let i = 0; i < 1500; i ++ ) {
35-
36-
const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
37-
38-
object.position.x = Math.random() * 800 - 400;
39-
object.position.y = Math.random() * 800 - 400;
40-
object.position.z = Math.random() * 800 - 400;
15+
scene = new Stencil();
4116

42-
scene.add( object );
43-
44-
}
45-
46-
raycaster = new THREE.Raycaster();
17+
// Stats
18+
stats = new Stats();
19+
document.body.appendChild( stats.dom );
4720

21+
// Renderer
4822
renderer = new THREE.WebGLRenderer( { antialias: true } );
23+
renderer.shadowMap.enabled = true;
4924
renderer.setPixelRatio( window.devicePixelRatio );
5025
renderer.setSize( window.innerWidth, window.innerHeight );
51-
document.body.appendChild( renderer.domElement );
52-
53-
stats = new Stats();
54-
document.body.appendChild( stats.dom );
55-
56-
document.addEventListener( 'mousemove', onDocumentMouseMove );
26+
renderer.setClearColor( 0x263238 );
5727

5828
window.addEventListener( 'resize', onWindowResize );
29+
document.body.appendChild( renderer.domElement );
5930

60-
const effectController = {
61-
62-
focalLength: 15,
63-
// jsDepthCalculation: true,
64-
// shaderFocus: false,
65-
//
66-
fstop: 2.8,
67-
// maxblur: 1.0,
68-
//
69-
showFocus: false,
70-
focalDepth: 3,
71-
// manualdof: false,
72-
// vignetting: false,
73-
// depthblur: false,
74-
//
75-
// threshold: 0.5,
76-
// gain: 2.0,
77-
// bias: 0.5,
78-
// fringe: 0.7,
79-
//
80-
// focalLength: 35,
81-
// noise: true,
82-
// pentagon: false,
83-
//
84-
// dithering: 0.0001
85-
86-
};
87-
88-
const matChanger = function ( ) {
89-
90-
for ( const e in effectController ) {
91-
92-
if ( e in camera.postprocessing.bokeh_uniforms ) {
93-
94-
camera.postprocessing.bokeh_uniforms[ e ].value = effectController[ e ];
95-
96-
}
97-
98-
}
99-
100-
camera.postprocessing.bokeh_uniforms[ 'znear' ].value = camera.near;
101-
camera.postprocessing.bokeh_uniforms[ 'zfar' ].value = camera.far;
102-
camera.setLens( effectController.focalLength, camera.frameHeight, effectController.fstop, camera.coc );
103-
effectController[ 'focalDepth' ] = camera.postprocessing.bokeh_uniforms[ 'focalDepth' ].value;
104-
105-
};
106-
107-
//
108-
109-
const gui = new GUI();
31+
renderer.localClippingEnabled = true;
11032

111-
gui.add( effectController, 'focalLength', 1, 135, 0.01 ).onChange( matChanger );
112-
gui.add( effectController, 'fstop', 1.8, 22, 0.01 ).onChange( matChanger );
113-
gui.add( effectController, 'focalDepth', 0.1, 100, 0.001 ).onChange( matChanger );
114-
gui.add( effectController, 'showFocus', true ).onChange( matChanger );
33+
setTimeout(() => {
34+
scene = new StencilBLue();
35+
const controls = new OrbitControls( scene.getCamera, renderer.domElement );
36+
controls.minDistance = 2;
37+
controls.maxDistance = 20;
38+
controls.enabled = false;
39+
controls.update();
40+
}, 5000);
11541

116-
matChanger();
42+
// Controls
43+
const controls = new OrbitControls( scene.getCamera, renderer.domElement );
44+
controls.minDistance = 2;
45+
controls.maxDistance = 20;
46+
controls.enabled = false;
47+
controls.update();
11748

11849
}
11950

12051
function onWindowResize() {
12152

122-
camera.aspect = window.innerWidth / window.innerHeight;
123-
camera.updateProjectionMatrix();
53+
scene.getCamera.aspect = window.innerWidth / window.innerHeight;
54+
scene.getCamera.updateProjectionMatrix();
12455

12556
renderer.setSize( window.innerWidth, window.innerHeight );
12657

12758
}
12859

129-
function onDocumentMouseMove( event ) {
130-
131-
event.preventDefault();
132-
133-
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
134-
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
135-
136-
}
137-
13860
function animate() {
13961

140-
requestAnimationFrame( animate, renderer.domElement );
141-
142-
render();
143-
stats.update();
144-
145-
}
146-
147-
148-
function render() {
149-
150-
theta += 0.1;
151-
152-
camera.position.x = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
153-
camera.position.y = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
154-
camera.position.z = radius * Math.cos( THREE.MathUtils.degToRad( theta ) );
155-
camera.lookAt( scene.position );
156-
157-
camera.updateMatrixWorld();
158-
159-
// find intersections
160-
161-
raycaster.setFromCamera( mouse, camera );
162-
163-
const intersects = raycaster.intersectObjects( scene.children, false );
164-
165-
if ( intersects.length > 0 ) {
166-
167-
const targetDistance = intersects[ 0 ].distance;
168-
169-
camera.focusAt( targetDistance ); // using Cinematic camera focusAt method
170-
171-
if ( INTERSECTED != intersects[ 0 ].object ) {
172-
173-
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
174-
175-
INTERSECTED = intersects[ 0 ].object;
176-
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
177-
INTERSECTED.material.emissive.setHex( 0xff0000 );
178-
179-
}
180-
181-
} else {
182-
183-
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
184-
185-
INTERSECTED = null;
186-
187-
}
188-
189-
//
190-
191-
if ( camera.postprocessing.enabled ) {
192-
193-
camera.renderCinematic( scene, renderer );
194-
195-
} else {
196-
197-
scene.overrideMaterial = null;
62+
requestAnimationFrame( animate );
19863

199-
renderer.clear();
200-
renderer.render( scene, camera );
64+
scene.animate()
20165

202-
}
66+
stats.begin();
67+
renderer.render( scene.getScene, scene.getCamera );
68+
stats.end();
20369

20470
}

0 commit comments

Comments
 (0)