Skip to content

Commit efa9b24

Browse files
author
Juho Räsänen
committed
initial files
1 parent 7815389 commit efa9b24

File tree

7 files changed

+828
-0
lines changed

7 files changed

+828
-0
lines changed

‎.devcontainer/Dockerfile

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
FROM mcr.microsoft.com/devcontainers/base:alpine-3.18
2+
3+
RUN apk add --no-cache nodejs npm

‎.devcontainer/devcontainer.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
2+
// README at: https://github.com/devcontainers/templates/tree/main/src/alpine
3+
{
4+
"name": "Alpine",
5+
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
6+
"build": {
7+
"dockerfile": "Dockerfile"
8+
},
9+
"portsAttributes": {
10+
"5173": {
11+
"label": "Vite"
12+
}
13+
}
14+
15+
// Features to add to the dev container. More info: https://containers.dev/features.
16+
// "features": {},
17+
18+
// Use 'forwardPorts' to make a list of ports inside the container available locally.
19+
// "forwardPorts": [],
20+
21+
// Use 'postCreateCommand' to run commands after the container is created.
22+
// "postCreateCommand": "uname -a",
23+
24+
// Configure tool-specific properties.
25+
// "customizations": {},
26+
27+
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
28+
// "remoteUser": "root"
29+
}

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Graffathon 2023 demo</title>
6+
<style>
7+
body { margin: 0; padding: 0; }
8+
</style>
9+
</head>
10+
<body>
11+
<script type="module" src="/main.js"></script>
12+
</body>
13+
</html>

‎main.js

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
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';
4+
5+
import { CinematicCamera } from 'three/addons/cameras/CinematicCamera.js';
6+
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;
13+
14+
init();
15+
animate();
16+
17+
function init() {
18+
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;
41+
42+
scene.add( object );
43+
44+
}
45+
46+
raycaster = new THREE.Raycaster();
47+
48+
renderer = new THREE.WebGLRenderer( { antialias: true } );
49+
renderer.setPixelRatio( window.devicePixelRatio );
50+
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 );
57+
58+
window.addEventListener( 'resize', onWindowResize );
59+
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();
110+
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 );
115+
116+
matChanger();
117+
118+
}
119+
120+
function onWindowResize() {
121+
122+
camera.aspect = window.innerWidth / window.innerHeight;
123+
camera.updateProjectionMatrix();
124+
125+
renderer.setSize( window.innerWidth, window.innerHeight );
126+
127+
}
128+
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+
138+
function animate() {
139+
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;
198+
199+
renderer.clear();
200+
renderer.render( scene, camera );
201+
202+
}
203+
204+
}

0 commit comments

Comments
 (0)