Affichage en relief de "11022022 19h47s hery Arzachel"
L'image 3D correspondant à l'affichage peut être téléchargée en cliquant sur l'icône "Appareil photo". Le chargement de l'image peut prendre une dizaine de secondes.
Vous pouvez déplacer le point de vue avec les boutons gauche et droit de la souris ainsi qu'avec la molette. Les effets 3D peuvent être approximatifs en particulier s'ils sont impactés par les aberrations de l'image initiale. Les données altimétriques qui ont servi de base de départ aux calculs des déplacements proviennent de : LROC
';
const win = window.open();
win.document.open();
win.document.write( page );
win.document.close();
}
// lancement après chargement texture
manager.onLoad = function() { // quand toutes les ressources sont chargées
console.log("manager.onLoad");
animate();
}
function init(){
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(1300, 850);
document.getElementById('container').appendChild(renderer.domElement);
//renderer.outputEncoding = THREE.sRGBEncoding; // pour gamma
renderer.info.autoReset = false; // optimisation composer
//renderer.toneMapping= THREE.NoToneMapping;
//renderer.toneMapping= THREE.LinearToneMapping;
//renderer.toneMapping= THREE.ReinhardToneMapping;
//renderer.toneMapping= THREE.CineonToneMapping;
//renderer.toneMappingExposure = 1.4;
// camera
let coeffOrtho = 1.2;
cameraOrtho = new THREE.OrthographicCamera( -coeffOrtho*parseInt(document.getElementById('container').style.width)/2, coeffOrtho*parseInt(document.getElementById('container').style.width)/2,coeffOrtho*parseInt(document.getElementById('container').style.height)/2, -coeffOrtho*parseInt(document.getElementById('container').style.height)/2, 1, 1000000);
cameraPerspective = new THREE.PerspectiveCamera( 30, parseInt(document.getElementById('container').style.width)/parseInt(document.getElementById('container').style.height), 1, 100000);
cameraOrtho.position.y = cameraPerspective.position.y = -1081.2;
cameraOrtho.position.z = cameraPerspective.position.z = 852.66666666667;
// scene
scene = new THREE.Scene();
if( false ) // si true -> camera ortho
cameraActive = cameraOrtho;
else
cameraActive = cameraPerspective;
scene.add(cameraActive);
//const helper = new THREE.CameraHelper( camera );
//scene.add( helper );
cameraMem = cameraActive; // pour effet light
// effet boule light
lightP = new THREE.PointLight( 0xffffff, 2.3, 1279/4 );//console.log(lightP);
lightP.distanceMem = lightP.distance;
lightP.cmaxht = 70;
scene.add( lightP );
lightP.visible=false;
lightP.flag = false; // pas actif à l'init
let lampe = new THREE.SphereGeometry( 5, 48, 48 );
let material = new THREE.MeshPhongMaterial( { color: lightP.color, emissive: lightP.color, shininess:10} );
let emitter = new THREE.Mesh( lampe, material );
lightP.add( emitter );
// camera Light
cameraLight = new THREE.PerspectiveCamera(6, 1300 / 850,1, 180000);
cameraLight.position.y = -2883.2;
cameraLight.position.z = 852.66666666667;
lightP.add( cameraLight );
// CONTROL pour camera principal
/*controls = new OrbitControls( cameraActive, renderer.domElement );
controls.rotateSpeed = 0.4;
controls.zoomSpeed = 0.5;*/
controls = new TrackballControls( cameraActive, renderer.domElement );
controls.rotateSpeed = 2.0;
controls.zoomSpeed = 1.4;
controls.panSpeed = 0.4;
// CONTROL pour camera sphere luminruse
controls2 = new TrackballControls( cameraLight, renderer.domElement );
controls2.rotateSpeed = 2.0;
controls2.zoomSpeed = 1.4;
controls2.panSpeed = 0.4;
//composer pour sharpen
composer = new EFFET.EffectComposer( renderer );
composer.addPass( new PASS.RenderPass( scene, cameraActive ) );
sharpenEffect = new SHADER.ShaderPass( sharpenShader );
sharpenEffect.uniforms.width.value = 1300;
sharpenEffect.uniforms.height.value = 850;
composer.addPass( sharpenEffect );
/*passthrough = new SHADER.ShaderPass( GammaCorrectionShader);
passthrough.renderToScreen = true;
composer.addPass( passthrough );*/
img = new THREE.MeshStandardMaterial({
color:0xc7c7c7,
roughness : 1,
metalness:0,
precision:"highp",
side : THREE.DoubleSide , // les 2 faces sont visibles
map: textureLoader.load("../img_caa/1664462786-11022022_18h48_hery.jpg"),
displacementMap: textureLoader.load( "../img3D/DEP-3D-ID192-11022022 19h47s hery Arzachel.jpg?1739654111" ),
displacementScale: 37,
displacementBias : -(37/1.5 )
});
/*img = new THREE.MeshPhongMaterial({
specular: 0x151515,
color:0xc7c7c7,
//wireframe:true,
side : THREE.DoubleSide , // les 2 faces sont visibles
map: textureLoader.load("../img_caa/1664462786-11022022_18h48_hery.jpg"),
displacementMap: textureLoader.load( "../img3D/DEP-3D-ID192-11022022 19h47s hery Arzachel.jpg?1739654111" ),
displacementScale: 37,
displacementBias : -(37/1.5 )
});*/
img.map.minFilter = THREE.NearestMipmapLinearFilter;
//img.map.minFilter = THREE.LinearFilter;
//img.map.maxFilter = THREE.NearestFilter ;
// plan
let plan = new THREE.Mesh(new THREE.PlaneGeometry(1279, 901,639,450),img);
scene.add(plan);
// lumiere ambiante
ambientLight = new THREE.AmbientLight(0xffffff,1.35);
ambientLight.intensityMem = ambientLight.intensity;
scene.add(ambientLight);
// menu Gui
gui = new GUI({ autoPlace: false, width:500 });
document.getElementById('up').appendChild(gui.domElement);
let folder1 = gui.addFolder('Affichage 3D');
folder1.open();
parameters =
{
disp: 37,
val_def:true,
lumiere : 1.35,
sharpen : false,
lightP:false,
lightPInt : 2.3,
vit:vitesse,
fact_dist_ecl:1,
cmaxht : lightP.cmaxht,
rebond:2.0
};
let dispS = folder1.add( parameters, 'disp' ).name('Facteur 3D').min(0).max(37*3).step(1).listen();
dispS.onChange(function(value) { //console.log( "value = "+ value);
img.displacementScale = value;
img.displacementBias = -value/1.5;
if( value != 37) {// depositionne automatiquement la case "valeur par defaut"
if( valDef3D.getValue() )
valDef3D.setValue (false);
}
else
valDef3D.setValue (true);// positionne automatiquement la case "valeur par defaut" si la vaur atteint la valeur par defaut
});
let valDef3D = folder1.add( parameters, 'val_def' ).name('Valeur 3D étalonnée').listen();
valDef3D.onChange(function(value) {
if ( value ) {
img.displacementScale = 37;
img.displacementBias = -37/1.5;
if( dispS.getValue() != 37 ) // pour régler pb appels récursifs avec dispS
dispS.setValue (37);
}
else{
if( dispS.getValue() == 37 )
valDef3D.setValue (true); // repositionne automatiquement la case "valeur par defaut" si la valeur est la valeur par defaut
}
});
let lum = folder1.add( parameters, 'lumiere' ).name('Lumière').min(1).max(3).step(0.025).listen();
lum.onChange(function(value) { //console.log( "value = "+ value);
if( !lightP.flag )
ambientLight.intensity=value;
ambientLight.intensityMem = value;
});
let sharpenGui = folder1.add( parameters, 'sharpen' ).name('Renforcer la netteté').listen();
sharpenGui.onChange(function(value) {
if ( !value) {
composerActif = false;
}
else {
composerActif = true;
}
});
// lightP
let folder2 = gui.addFolder('Sphère Lumineuse');
let effLight = folder2.add( parameters, 'lightP' ).name('Activation Sphère Lumineuse').listen();
effLight.onChange(function(value) {
if ( value) {
cameraActive = cameraLight;
lightP.visible=true;
lightP.flag = true;
ambientLight.intensity = 0;
}
else {
cameraActive = cameraMem;
lightP.visible=false;
lightP.flag = false;
ambientLight.intensity = ambientLight.intensityMem;
}
//controls.object = cameraActive;
});
let lightPI = folder2.add( parameters, 'lightPInt' ).name('Intensité lumineuse').min(1).max(4).step(0.1).listen();
lightPI.onChange(function(value) { //console.log( "value = "+ value);
lightP.intensity=value;
});
let fdistE = folder2.add( parameters, 'fact_dist_ecl' ).name('Rayon éclairage').min(0.5).max(2).step(0.1).listen();
fdistE.onChange(function(value) { //console.log( "value = "+ value);
lightP.distance = lightP.distanceMem*value;
});
let lpmht = folder2.add( parameters, 'cmaxht' ).name('Coef. hauteur max rebond').min(30).max(150).step(5).listen();
lpmht.onChange(function(value) { //console.log( "value = "+ value);
lightP.cmaxht = value;
});
let vitS = folder2.add( parameters, 'vit' ).name('Vitesse').min(0.00015).max(0.0005).step(0.000025).listen();
vitS.onChange(function(value) {
vitesse=value;
});
let rb = folder2.add( parameters, 'rebond' ).name('Coef. Rebond').min(1.0).max(10.0).step(0.25).listen();
rb.onChange(function(value) {
parameters.rebond = value;
});
let param = { color : '#ffffff' };
let colorLightP = folder2.addColor(param, 'color').name('Couleur');
colorLightP.onChange(function(value) { value=value.replace("#","0x");
lightP.color.setHex(value);
lightP.children[0].material.emissive.setHex(value); // emitter
lightP.children[0].material.color.setHex(value); // emitter
});
// snapshot
document.getElementById("snapshot").addEventListener( 'click', function(){SnapShot()}, false );
capturer = null;
var sCB = document.getElementById( 'start-capturing-button' ),
dVB = document.getElementById( 'download-video-button' ),
progress = document.getElementById( 'progress' );
sCB.addEventListener( 'click', function( e ) {
var framerate = document.querySelector('input[name="framerate"]:checked').value;
capturer = new CCapture( {
verbose: false,
display: true,
framerate: framerate,
motionBlurFrames: ( 960 / framerate ) * ( document.querySelector('input[name="motion-blur"]').checked ? 1 : 0 ),
quality: 99,
format: document.querySelector('input[name="encoder"]:checked').value,
workersPath: 'ccapture/src/',
timeLimit: 150,
frameLimit: 0,
autoSaveTime: 0
//onProgress: function( p ) { progress.style.width = ( p * 100 ) + '%' }
} );
capturer.start();
this.style.display = 'none';
dVB.style.display = 'block';
e.preventDefault();
}, false );
dVB.addEventListener( 'click', function( e ) {
capturer.stop();
this.style.display = 'none';
//this.setAttribute( 'href', );
capturer.save();
sCB.style.display = 'inline-block';// go 11 03 2025
}, false );
}// fin init
let delta = 0;
function animate(){
requestAnimationFrame( animate );
//delta = clock.getDelta();
//controls.update(delta);
if( lightP.flag ) {
controls2.update();
let time = Date.now() * vitesse;
lightP.position.x = Math.sin( time * 0.70 ) * 639.5*0.98;
lightP.position.y = Math.cos( time * 1.0 ) * 450.5*0.98;
lightP.position.z = Math.abs(Math.cos( time * parameters.rebond )) * lightP.cmaxht ; //eventuell. + img.displacementScale/20;
cameraLight.lookAt(lightP.position);
}
else
controls.update();
if( !composerActif || lightP.flag )
renderer.render(scene,cameraActive);
else
composer.render();
renderer.info.reset(); // mieux avec composer
if( capturer ) capturer.capture( renderer.domElement );
}