import { View } from './view.js';
import { Project } from '../project.js';
import { Scene, sRGBEncoding, LinearEncoding, LinearFilter, LinearToneMapping, CineonToneMapping, RGBAFormat, FloatType, Raycaster, Vector2, Vector3, Plane, UnsignedByteType, PMREMGenerator, Mesh, Quaternion } from '../../node_modules/three/build/three.module.js';
import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls.js';
import { Pass } from '../../node_modules/three/examples/jsm/postprocessing/Pass.js';
import { Reporter } from '../reporter/reporter.js';
import { checkPropTypes } from '../lib.js';
import { ContactShadow } from '../scene/contact_shadow.js'
import { ShaderPass } from '../../node_modules/three/examples/jsm/postprocessing/ShaderPass.js';
//import { GammaCorrectionShader } from '../../node_modules/three/examples/jsm/shaders/GammaCorrectionShader.js';
import { GammaCorrectionShader } from '../../test/resources/js/GammaCorrectionShader.js';
import { FXAAShader } from '../../node_modules/three/examples/jsm/shaders/FXAAShader.js';
import { CSS2DRenderer } from '../../node_modules/three/examples/jsm/renderers/CSS2DRenderer.js';
import { EXRLoader } from '../../node_modules/three/examples/jsm/loaders/EXRLoader.js';
import { KeyboardShortcuts } from '../../src/utilities/keyboardShortcuts.js';
import { EXR } from '../package/image/exr.js';
/**
* Default View
* @extends View
*/
class SketchView extends View {
/**
* @param {Reporter} reporter
* @param {Object} settings
* @param {Scene} settings.scene
*/
constructor(reporter, settings) {
super(
reporter,
{
scene: settings.scene,
rendererSettings: {
'antialias': false,
'alpha': true,
'preserveDrawingBuffer': true,
'precision': "highp",
'premultipliedAlpha': true,
'stencil': false,
'logarithmicDepthBuffer': false,
'toneMapping': CineonToneMapping, //LinearToneMapping, //ReinhardToneMapping, //THREE.NoToneMapping //; // Met NoToneMapping werkt de exposure niet! //CineonToneMapping, //THREE.ACESFilmicToneMapping //THREE.
'toneMappingExposure': 1,
'toneMappingWhitePoint': 1,
'gammaFactor': 2.2,
'outputEncoding': CineonToneMapping, //sRGBEncoding, // LinearEncoding, // //When using post-processing or in general when rendering to a render target, WebGLRenderer.outputEncoding is not evaluated.
'physicallyCorrectLights': true,
'minFilter': LinearFilter,
'magFilter': LinearFilter,
'format': RGBAFormat,
'stencilBuffer': false,
'type': FloatType, // line not present in original code
'shadowMap.enabled': false
},
cameraSettings: {
fov: 30,
aspect: window.innerWidth / window.innerHeight,
near: 0.01,
far: 1000
},
passes: [
new ShaderPass( FXAAShader ), //deze pass moet altijd als laatste komen zodat de anti aliasing het beste werkt
new ShaderPass(GammaCorrectionShader),
],
renderer: settings.renderer,
timer: settings.timer
}
);
//Settings / Variables
this.dragObject = null;
this.dragging = false;
this.allMeshes = [];
this.layerMap = Project.layerMap
this.onMouseDownActive = false;
this.shift = new Vector3();
this.intersects = new Vector3();
this.exrBackground = null;
//Window
//this.width = document.getElementsByClassName('workspace')[0].style.width //window.innerWidth;
//this.height = document.getElementsByClassName('workspace')[0].style.height //window.innerHeight;
this.width = window.innerWidth
this.height = window.innerHeight
//Renderer
this.renderer.setSize(this.width, this.height)
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setClearColor( 0xFFFFFF, 1 ); //deze is nodig om de FXAA goed te laten werken
//Label Renderer
this.labelRenderer = new CSS2DRenderer();
this.labelRenderer.setSize(this.width, this.height);
this.labelRenderer.domElement.style.position = 'absolute';
this.labelRenderer.domElement.style.top = '0px';
this.labelRenderer.domElement.style.outline = 'none';
this.labelRenderer.id = "labelRenderer"
//Composer Passes
this.pixelRatio = this.renderer.getPixelRatio();
//niet de juiste maat..
this.passes[1].uniforms.resolution.value.x = 1 / (window.innerWidth * this.pixelRatio);
this.passes[1].uniforms.resolution.value.y = 1 / (window.innerHeight * this.pixelRatio);
this.passes[1].name = "FXAA Pass";
this.passes[2].name = "Gamma Correction Pass";
//Camera
this.perspectiveCamera.position.set(-2, 1, 5);
//this.perspectiveCamera.layers.disable(2);
//this.perspectiveCamera.layers.disable(3);
//Raycaster
this.raycaster = new Raycaster();
//Shadow
this.shadow = new ContactShadow(reporter, {
scene: this.scene,
camera: this.perspectiveCamera,
renderer: this.renderer
});
this.shadow._build();
this.scene.add(this.shadow._shadowGroup);
this.shadow._update();
//Mouse
this.mouse = new Vector2();
//Mouse Intersection Plane
this.intersectionPlane = new Plane();
this.intersectionPlane.setFromCoplanarPoints(new Vector3(), new Vector3(1, 0, 0), new Vector3(0, 0, 1))
this.intersectionPlaneNormal = new Vector3(0, 1, 0);
this.pointOfIntersection = new Vector3();
//Event Listeners
// window.addEventListener('resize', this.onWindowResize, false);
// window.addEventListener( 'mouseover', onMouseOver );
// window.addEventListener( 'pointerdown', this.onMouseDown, false );
// window.addEventListener( 'pointerup', this.onMouseUp, false );
// window.addEventListener( 'pointermove', this.onMouseMove, false );
// window.addEventListener( 'dblclick', this.onMouseDoubleClick, false );
//Keyboard Shortcuts
KeyboardShortcuts(this.scene, this.perspectiveCamera, this.renderer, this.shadow, this.dragObject, this.allMeshes, this.onWindowResize) // onWindowResize
}
update() {
super.update();
}
onSceneUpdate() {
this.shadow._update();
super.onSceneUpdate();
}
// setupEXR( exrLoader, exrPath ) {
// return new Promise( function (resorenderlve, reject) {
// exrLoader.load(
// exrPath,
// // onLoad callback
// function ( image ) {
// //console.log( image )
// resolve ( image );
// },
// // onProgress callback currently not supported
// undefined,
// // onError callback
// function (err) {
// reject(err);
// }
// );
// })
// .then( (value) => {
// //PMREM
// this.pmremGenerator = new PMREMGenerator( this.renderer );
// this.pmremGenerator.compileEquirectangularShader();
// console.log("test 123")
// const exrCubeRenderTarget = this.pmremGenerator.fromEquirectangular( value );
// this.exrBackground = exrCubeRenderTarget.texture;
// return this.exrBackground
// })
// }
onWindowResize() {
return;
//this.width = document.getElementById("viewer").offsetWidth
//this.height = document.getElementById("viewer").offsetHeight
this.perspectiveCamera.aspect = this.width / this.height;
this.perspectiveCamera.updateProjectionMatrix();
this.composer.setSize(this.width, this.height);
this.labelRenderer.setSize(this.width, this.height);
}
// animate() {
// this.raycaster.setFromCamera( this.mouse, this.perspectiveCamera );
// this.raycaster.layers.set( 0 );
// this.intersects2 = this.raycaster.intersectObjects( this.allMeshes, true );
// if ( this.intersects2.length > 0 && this.onMouseDownActive === false ) {
// //console.log( "set pointer")
// //console.log( intersects[0].object )
// document.getElementById("viewer").style.cursor = "pointer";
// }
// else if ( this.intersects2.length === 0 ) {
// document.getElementById("viewer").style.cursor = "default";
// }
// requestAnimationFrame( this.animate );
// this.orbitControls.update();
// this.render()
// };
// //ON DOUBLE CLICK
// onMouseDoubleClick( event ){
// this.intersects = this.raycaster.intersectObjects( this.allMeshes, true );
// if ( this.intersects.length > 0 ) {
// console.log( "onMouseDoubleClick")
// //object.parent.quaternion.set(new Vector3( 0, Math.PI / 2, 0));
// const object = this.intersects[ 0 ].object
// object.parent.quaternion.multiply({ _w: 0.7071, _x: 0, _y: 0.7071, _z: 0 }) //.applyQuaternion({ _W: 0, _x:0, _y:1, _z:0 } )
// this.shadow._update();
// }
// };
// //ON MOUSE DOWN
// onMouseDown( event ) {
// event.preventDefault();
// this.onMouseDownActive = true;
// this.intersects = this.raycaster.intersectObjects( this.allMeshes, true );
// //SELECT
// if ( this.intersects.length > 0 ) {
// console.log("onMouseDown")
// document.getElementById("viewer").style.cursor = "all-scroll"; // hier de juiste div invullen
// this.perspectiveCamera.layers.enable( 2 );
// this.orbitControls.enableRotate = false;
// //set the draggable object
// this.dragObject = this.intersects[ 0 ].object.parent
// console.log( this.dragObject )
// this.intersectionPlane.setFromNormalAndCoplanarPoint( this.intersectionPlaneNormal, this.intersects[0].point )
// this.shift.subVectors( this.dragObject.position, this.intersects[0].point );
// this.dragging = true;
// this.shadow._update( [this.dragObject] );
// }
// //DESELECT
// if ( this.intersects.length === 0 ) {
// console.log( "no intersection" )
// this.perspectiveCamera.layers.disable( 2 );
// this.dragObject = null;
// };
// }
// //ON MOUSE MOVE
// onMouseMove(event) {
// this.mouse.x = ( event.clientX / this.width ) * 2 - 1;
// this.mouse.y = - ( event.clientY / this.height ) * 2 + 1;
// if ( this.intersects.length > 0 && this.onMouseDownActive === true ){
// document.getElementById("viewer").style.cursor = "all-scroll";
// //ConnectorLine( dragObject )
// }
// if ( this.intersects.length == 0 || !this.dragging ) return;
// this.raycaster.ray.intersectPlane( this.intersectionPlane, this.pointOfIntersection );
// this.dragObject.position.copy( this.pointOfIntersection ).add( this.shift );
// };
// //ON MOUSE UP
// onMouseUp( event ) {
// console.log("onMouseUp")
// this.onMouseDownActive = false;
// this.orbitControls.enableRotate = true;
// document.getElementById("viewer").style.cursor = "default";
// this.dragging = false;
// this.shadow._update();
// }
};
export { SketchView };