|
@@ -11,14 +11,23 @@
|
|
|
margin: 0px;
|
|
margin: 0px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
|
|
|
+ #info {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 10px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
+ <div id="info">
|
|
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
<script src="../build/three.js"></script>
|
|
<script src="../build/three.js"></script>
|
|
|
|
|
|
|
|
<script src="js/shaders/BokehShader2.js"></script>
|
|
<script src="js/shaders/BokehShader2.js"></script>
|
|
|
-
|
|
|
|
|
<script src="js/cameras/CinematicCamera.js"></script>
|
|
<script src="js/cameras/CinematicCamera.js"></script>
|
|
|
|
|
|
|
|
<script src="js/libs/stats.min.js"></script>
|
|
<script src="js/libs/stats.min.js"></script>
|
|
@@ -26,32 +35,19 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
|
|
- var container, stats;
|
|
|
|
|
- var camera, scene, raycaster, renderer;
|
|
|
|
|
|
|
+ var camera, scene, raycaster, renderer, stats;
|
|
|
|
|
|
|
|
var mouse = new THREE.Vector2(), INTERSECTED;
|
|
var mouse = new THREE.Vector2(), INTERSECTED;
|
|
|
var radius = 100, theta = 0;
|
|
var radius = 100, theta = 0;
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
init();
|
|
init();
|
|
|
animate();
|
|
animate();
|
|
|
|
|
|
|
|
function init() {
|
|
function init() {
|
|
|
|
|
|
|
|
- container = document.createElement( 'div' );
|
|
|
|
|
- document.body.appendChild( container );
|
|
|
|
|
-
|
|
|
|
|
- var info = document.createElement( 'div' );
|
|
|
|
|
- info.style.position = 'absolute';
|
|
|
|
|
- info.style.top = '10px';
|
|
|
|
|
- info.style.width = '100%';
|
|
|
|
|
- info.style.textAlign = 'center';
|
|
|
|
|
- info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes';
|
|
|
|
|
- container.appendChild( info );
|
|
|
|
|
camera = new THREE.CinematicCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
camera = new THREE.CinematicCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
- camera.setLens(5);
|
|
|
|
|
- camera.position.set(2, 1, 500);
|
|
|
|
|
|
|
+ camera.setLens( 5 );
|
|
|
|
|
+ camera.position.set( 2, 1, 500 );
|
|
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
|
scene.background = new THREE.Color( 0xf0f0f0 );
|
|
scene.background = new THREE.Color( 0xf0f0f0 );
|
|
@@ -62,8 +58,7 @@
|
|
|
light.position.set( 1, 1, 1 ).normalize();
|
|
light.position.set( 1, 1, 1 ).normalize();
|
|
|
scene.add( light );
|
|
scene.add( light );
|
|
|
|
|
|
|
|
-
|
|
|
|
|
- var geometry = new THREE.BoxGeometry( 20, 20, 20 );
|
|
|
|
|
|
|
+ var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
|
|
|
|
|
|
|
|
for ( var i = 0; i < 1500; i ++ ) {
|
|
for ( var i = 0; i < 1500; i ++ ) {
|
|
|
|
|
|
|
@@ -82,15 +77,13 @@
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- container.appendChild(renderer.domElement);
|
|
|
|
|
|
|
+ document.body.appendChild(renderer.domElement);
|
|
|
|
|
|
|
|
stats = new Stats();
|
|
stats = new Stats();
|
|
|
- container.appendChild( stats.dom );
|
|
|
|
|
|
|
+ document.body.appendChild( stats.dom );
|
|
|
|
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
|
|
var effectController = {
|
|
var effectController = {
|
|
@@ -123,23 +116,31 @@
|
|
|
|
|
|
|
|
var matChanger = function( ) {
|
|
var matChanger = function( ) {
|
|
|
|
|
|
|
|
- for (var e in effectController) {
|
|
|
|
|
- if (e in camera.postprocessing.bokeh_uniforms)
|
|
|
|
|
- camera.postprocessing.bokeh_uniforms[ e ].value = effectController[ e ];
|
|
|
|
|
|
|
+ for ( var e in effectController ) {
|
|
|
|
|
+
|
|
|
|
|
+ if ( e in camera.postprocessing.bokeh_uniforms ) {
|
|
|
|
|
+
|
|
|
|
|
+ camera.postprocessing.bokeh_uniforms[ e ].value = effectController[ e ];
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
camera.postprocessing.bokeh_uniforms[ 'znear' ].value = camera.near;
|
|
camera.postprocessing.bokeh_uniforms[ 'znear' ].value = camera.near;
|
|
|
camera.postprocessing.bokeh_uniforms[ 'zfar' ].value = camera.far;
|
|
camera.postprocessing.bokeh_uniforms[ 'zfar' ].value = camera.far;
|
|
|
- camera.setLens(effectController.focalLength, camera.frameHeight ,effectController.fstop, camera.coc);
|
|
|
|
|
- effectController['focalDepth'] = camera.postprocessing.bokeh_uniforms["focalDepth"].value;
|
|
|
|
|
|
|
+ camera.setLens( effectController.focalLength, camera.frameHeight, effectController.fstop, camera.coc );
|
|
|
|
|
+ effectController[ 'focalDepth' ] = camera.postprocessing.bokeh_uniforms[ 'focalDepth' ].value;
|
|
|
|
|
+
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+ //
|
|
|
|
|
|
|
|
var gui = new dat.GUI();
|
|
var gui = new dat.GUI();
|
|
|
|
|
|
|
|
- gui.add( effectController, "focalLength", 1, 135, 0.01 ).onChange( matChanger );
|
|
|
|
|
- gui.add( effectController, "fstop", 1.8, 22, 0.01 ).onChange( matChanger );
|
|
|
|
|
- gui.add( effectController, "focalDepth", 0.1, 100, 0.001 ).onChange( matChanger );
|
|
|
|
|
- gui.add( effectController, "showFocus", true ).onChange( matChanger );
|
|
|
|
|
|
|
+ gui.add( effectController, 'focalLength', 1, 135, 0.01 ).onChange( matChanger );
|
|
|
|
|
+ gui.add( effectController, 'fstop', 1.8, 22, 0.01 ).onChange( matChanger );
|
|
|
|
|
+ gui.add( effectController, 'focalDepth', 0.1, 100, 0.001 ).onChange( matChanger );
|
|
|
|
|
+ gui.add( effectController, 'showFocus', true ).onChange( matChanger );
|
|
|
|
|
|
|
|
matChanger();
|
|
matChanger();
|
|
|
|
|
|
|
@@ -147,8 +148,7 @@
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
- function onWindowResize() {
|
|
|
|
|
|
|
+ function onWindowResize() {
|
|
|
|
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
camera.updateProjectionMatrix();
|
|
camera.updateProjectionMatrix();
|
|
@@ -166,7 +166,6 @@
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
function animate() {
|
|
function animate() {
|
|
|
|
|
|
|
|
requestAnimationFrame( animate, renderer.domElement );
|
|
requestAnimationFrame( animate, renderer.domElement );
|
|
@@ -197,9 +196,8 @@
|
|
|
if ( intersects.length > 0 ) {
|
|
if ( intersects.length > 0 ) {
|
|
|
|
|
|
|
|
var targetDistance = intersects[ 0 ].distance;
|
|
var targetDistance = intersects[ 0 ].distance;
|
|
|
-
|
|
|
|
|
- //Using Cinematic camera focusAt method
|
|
|
|
|
- camera.focusAt(targetDistance);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ camera.focusAt( targetDistance ); // using Cinematic camera focusAt method
|
|
|
|
|
|
|
|
if ( INTERSECTED != intersects[ 0 ].object ) {
|
|
if ( INTERSECTED != intersects[ 0 ].object ) {
|
|
|
|
|
|
|
@@ -218,13 +216,13 @@
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ //
|
|
|
|
|
|
|
|
- if(camera.postprocessing.enabled){
|
|
|
|
|
- //rendering Cinematic Camera effects
|
|
|
|
|
- camera.renderCinematic(scene, renderer);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if ( camera.postprocessing.enabled ) {
|
|
|
|
|
|
|
|
- else {
|
|
|
|
|
|
|
+ camera.renderCinematic( scene, renderer );
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
|
|
|
scene.overrideMaterial = null;
|
|
scene.overrideMaterial = null;
|
|
|
|
|
|
Mugen87