<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/postprocessing@6.21.2/build/postprocessing.min.js"></script>
<script src="https://mevedia.com/share/InfiniteGridHelper.js?c"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.127.0/examples/js/utils/BufferGeometryUtils.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/utils/BufferGeometryUtils.js"></script>
</head>
<body>
<div class="background">
<div class="left-side">
<div class="scene3d">
<section id="loading-screen">
<img src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/logo3_b3dc0423-2e3d-4fb4-8e91-38742631acc9.png?v=1613649713" class="animate" id="loading-logo">
</section>
<canvas>
</canvas>
</div>
</div>
<div class="right-side">
<div class="main">
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK AVANT</h2>
<label id="big-checkbox-avant" class="switch switch2">
<input type="checkbox" id="lebigbouton-packavant">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de croisement</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton1-packavant">
<span class="slider round"></span>
</label>
<img class="symbol croisement" alt="Light symbol" id="feu-croisement"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/feux_croisement.svg?v=1616431530">
<p class="references">H7</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de route</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton2-packavant">
<span class="slider round"></span>
</label>
<img class="symbol croisement" alt="Light symbol" id="feu-route"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/feux_route.svg?v=1616431529">
<p class="references">H7</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de brouillard</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton3-packavant">
<span class="slider round"></span>
</label>
<img class="symbol brouillard" alt="Light symbol" id="brouillard-avant"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/brouillard_avant.svg?v=1616431529">
<p class="references">H11</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de position</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton4-packavant">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="position-avant"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de jour</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton5-packavant">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="feux-jour"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">P21W</p>
</div>
</div>
</div>
</div>
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK ARRIÈRE</h2>
<label id="big-checkbox-arriere" class="switch switch2">
<input type="checkbox" id="lebigbouton-packarriere">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux stop</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton1-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol croisement" alt="Light symbol" id="feux-stop"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/feux_stop.svg?v=1616438297">
<p class="references">P21/5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de position</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton2-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="position-arriere"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de brouillard</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton3-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol brouillard" alt="Light symbol" id="brouillard-arriere"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/brouillard_arriere.svg?v=1616431530">
<p class="references">P21W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de recul</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton4-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="feux-recul"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W16W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Éclairage plaque</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton5-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="eclairage-plaque"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_plafonnier.svg?v=1616378225">
<p class="references">W5W</p>
</div>
</div>
</div>
</div>
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK CLIGNOTANTS</h2>
<label id="big-checkbox-clignotants" class="switch switch2">
<input type="checkbox" id="lebigbouton-packclignotants">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Clignotants avants</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packclignotants"
id="lebouton1-packclignotants">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="cligno-avant"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_clignotants.svg?v=1616431529">
<p class="references">PY21W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Clignotants arrières</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packclignotants"
id="lebouton2-packclignotants">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="cligno-arriere"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_clignotants.svg?v=1616431529">
<p class="references">PY21W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Clignotants latéraux</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packclignotants"
id="lebouton3-packclignotants">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="cligno-lat"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_clignotants.svg?v=1616431529">
<p class="references">W5W</p>
</div>
</div>
</div>
</div>
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK INTÉRIEUR</h2>
<label id="big-checkbox-interieur" class="switch switch2">
<input type="checkbox" id="lebigbouton-packinterieur">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Plafonniers</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton1-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="plafonniers"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_plafonnier.svg?v=1616378225">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Boite à gants</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton2-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="boite-a-gants"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">C5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Portes avants</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton3-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="portes-avants"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Portes arrières</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton4-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="portes-arrieres"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Coffre</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton5-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="coffre"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Pieds</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton6-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="pieds"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Miroir de courtoisie</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton7-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="miroir-de-courtoisie"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Ouverture portière</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur"
id="lebouton8-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="ouverture-portiere"
src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>body {
margin: 0px;
background-color: #0e111b;
}
.background {
display: block;
}
.left-side {
flex: 1;
margin: 0;
}
.scene3d {
width: 100%;
height: 50vh;
margin: 0px;
padding: 0px;
border: solid 0px white;
border-radius: 8px;
}
canvas {
width: 100%;
height: 100%;
}
.right-side {
flex: 1;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
z-index: 4;
border-radius: 10px;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 10px;
margin: 10px;
width: 45vw;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
z-index: 4;
padding: 0 0px;
border-radius: 10px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.main {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: center;
padding: Opx;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0px 0px;
width: 45vw;
border-radius: 12px;
padding: 0px;
background-color: #fff;
}
.class1 {
flex-basis: 25%;
margin: 24px;
padding: 0px 8px;
}
.class2 {
background-color: #222838;
display: inline-block;
border-radius: 12px;
height: 180px;
width: 100%;
box-shadow: 3px 3px 6px 1px rgba(35, 35, 35, 0.5);
}
.switch {
position: relative;
margin-top: 5%;
float: right;
margin-right: 5%;
display: inline;
width: 30px;
height: 17px;
z-index: 4;
}
.switch2 {
width: 60px;
height: 34px;
position: relative;
right: 0%;
margin: auto;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.2s;
transition: 0.2s;
box-shadow: 3px 3px 6px 1px rgba(35, 35, 35, 0.5);
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.slider2:before {
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
}
input:checked + .slider {
background-color: #30b77a;
}
input:focus + .slider {
box-shadow: 0 0 1px #30b77a;
box-shadow: 3px 3px 6px 1px rgba(35, 35, 35, 0.5);
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
input:checked + .slider2:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.titre-pack {
color: #222838;
text-shadow: 3px 3px 6px rgba(35, 35, 35, 0.25);
margin-left: 5%;
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: 800;
font-size: 200%;
display: inline;
width: 60%;
}
.titre-feu {
color: #fff;
margin-left: 7.5%;
margin-top: 5%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 14px;
display: inline-block;
}
.references {
color: #fff;
position: relative;
top: 8%;
float: right;
margin-right: 5%;
margin-bottom: 5%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 14px;
display: inline-block;
}
.symbol {
display: block;
height: 35%;
position: relative;
margin: auto;
margin-top: 13%;
}
.plafonniers {
width: 45%;
}
.croisement {
width: 38%;
}
.brouillard {
width: 32%;
}
#big-checkbox {
display: inline;
}
.heading {
width: 94%;
display: inline-block;
}
* {
border: 0px solid red;
}
@media only screen and (max-width: 800px) {
.accordion,
.background {
display: block;
}
.accordion {
width: 95vw;
}
.container {
width: 95vw;
}
.scene3d {
padding: 0px;
margin-left: auto;
margin-right: auto;
height: 250px;
}
.class1 {
margin: 12px;
}
.class2 {
height: 90px;
}
}
#loading-screen {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0e111b;
opacity: 1;
transition: 1s opacity;
}
#loading-screen.fade-out {
opacity: 0;
}
#loading-logo {
position: relative;
top: 20%;
height: 7.5%;
object-fit: contain;
}
.animate {
display:flex;
justify-content: center;
align-items: center;
height:100%;
margin: auto;
/* width: 350px; */
/* font-size:26px; */
font-family: Helvetica, sans-serif, Arial;
animation: load 1.2s infinite 0s ease-in-out;
animation-direction: alternate;
text-shadow: 0 0 1px white;
}
@keyframes load {
0%{
opacity: 0.08;
/* font-size: 10px; */
/* font-weight: 400; */
filter: blur(5px);
letter-spacing: 3px;
}
100%{
/* opacity: 1; */
/* font-size: 12px; */
/* font-weight:600; */
/* filter: blur(0); */
}
}let scene, camera, renderer, controls, composer1, composer2;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x0e111b);
camera = new THREE.PerspectiveCamera(30, window.innerHeight / window.innerWidth, 10, 250);
camera.position.set(0, 25, -100);
scene.add(camera);
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector(".scene3d canvas"),
antialias: true
});
renderer.setPixelRatio( window.devicePixelRatio );
const color = new THREE.Color(0xc0c0ff);
const grid = new THREE.InfiniteGridHelper(10, 100, color, 250);
scene.add(grid);
const loadingManager = new THREE.LoadingManager(() => {
const loadingScreen = document.getElementById('loading-screen');
loadingScreen.classList.add('fade-out');
// optional: remove loader from DOM via event listener
loadingScreen.addEventListener('transitionend', onTransitionEnd);
});
let gltfLoader = new THREE.GLTFLoader(loadingManager);
let dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.1/');
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load('https://cdn.shopify.com/s/files/1/0532/1805/0224/files/audia7-processed.gltf?v=1616803625', function (gltf) {
car = gltf.scene;
car.scale.set(.25, .25, .25);
scene.add(gltf.scene);
});
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.minDistance = 75;
controls.maxDistance = 125;
controls.enableDamping = true
controls.dampingFactor = .05;
controls.enablePan = false;
controls.maxPolarAngle = Math.PI / 2.025;
controls.minPolarAngle = Math.PI / 2.025;
controls.target.set(0, 12, 0);
controls.autoRotate = true;
controls.autoRotateSpeed = 1;
let ambientLight = new THREE.DirectionalLight(color, .3);
scene.add(ambientLight);
let pointLight1 = new THREE.PointLight(color, .3, 500);
pointLight1.position.set(250, 25, 0);
scene.add(pointLight1);
let pointLight2 = new THREE.PointLight(color, .3, 500);
pointLight2.position.set(-250, 25, 0);
scene.add(pointLight2);
let sphereGeo = new THREE.SphereBufferGeometry(.5, 16, 16);
var geometry1 = new THREE.SphereBufferGeometry( .5, 16, 16);
//geometry1.position.set(-13.15, 12.5, -40.5);
var geometry2 = new THREE.SphereBufferGeometry( .5, 16, 16);
//geometry2.position.set(13.15, 12.5, -40.5);
var merged = THREE.BufferGeometryUtils.mergeBufferGeometries([geometry1, geometry2]);
let testMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 1
});
let test = new THREE.Mesh(merged, testMat);
//scene.add(test);
let feuderouteMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let croisementMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let positionMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let feustopMat = new THREE.MeshBasicMaterial({
color: 0xff0000,
opacity: 0
});
let positionarriereMat = new THREE.MeshBasicMaterial({
color: 0xff0000,
opacity: 0
});
let reculMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let clignotantavantMat = new THREE.MeshBasicMaterial({
color: 0xff8500,
opacity: 0
});
let clignotantarriereMat = new THREE.MeshBasicMaterial({
color: 0xff8500,
opacity: 0
});
let clignotantlatMat = new THREE.MeshBasicMaterial({
color: 0xff8500,
opacity: 0
});
let plaqueMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let brouillardarriereMat = new THREE.MeshBasicMaterial({
color: 0xff0000,
opacity: 0
});
let brouillardavantMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let feudejourMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let feuderoute1 = new THREE.Mesh(sphereGeo, feuderouteMat);
feuderoute1.position.set(-11.5, 12.35, -41.35);
scene.add(feuderoute1);
let feuderoute2 = new THREE.Mesh(sphereGeo, feuderouteMat);
feuderoute2.position.set(11.5, 12.35, -41.35);
scene.add(feuderoute2);
//let feuderoute = THREE.BufferGeometryUtils.mergeBufferGeometries([feuderoute1, feuderoute2]);
let croisement1 = new THREE.Mesh(sphereGeo, croisementMat);
croisement1.position.set(-13.15, 12.5, -40.5);
scene.add(croisement1);
let croisement2 = new THREE.Mesh(sphereGeo, croisementMat);
croisement2.position.set(13.15, 12.5, -40.5);
scene.add(croisement2);
let position1 = new THREE.Mesh(sphereGeo, positionMat);
position1.position.set(-14.15, 12.65, -39.5);
scene.add(position1);
let position2 = new THREE.Mesh(sphereGeo, positionMat);
position2.position.set(14.15, 12.65, -39.5);
scene.add(position2);
let feustop1 = new THREE.Mesh(sphereGeo, feustopMat);
feustop1.position.set(-11, 15.5, 42);
scene.add(feustop1);
let feustop2 = new THREE.Mesh(sphereGeo, feustopMat);
feustop2.position.set(11, 15.5, 42);
scene.add(feustop2);
let positionarriere1 = new THREE.Mesh(sphereGeo, positionarriereMat);
positionarriere1.position.set(-12.25, 15.5, 41.25);
scene.add(positionarriere1);
let positionarriere2 = new THREE.Mesh(sphereGeo, positionarriereMat);
positionarriere2.position.set(12.25, 15.5, 41.25);
scene.add(positionarriere2);
let recul1 = new THREE.Mesh(sphereGeo, reculMat);
recul1.position.set(-9, 15.5, 42.5);
scene.add(recul1);
let recul2 = new THREE.Mesh(sphereGeo, reculMat);
recul2.position.set(9, 15.5, 42.5);
scene.add(recul2);
let clignotantavant1 = new THREE.Mesh(sphereGeo, clignotantavantMat);
clignotantavant1.position.set(-15, 12.75, -38.5);
scene.add(clignotantavant1);
let clignotantavant2 = new THREE.Mesh(sphereGeo, clignotantavantMat);
clignotantavant2.position.set(15, 12.75, -38.5);
scene.add(clignotantavant2);
let clignotantarriere1 = new THREE.Mesh(sphereGeo, clignotantarriereMat);
clignotantarriere1.position.set(-13.25, 15.5, 40.5);
scene.add(clignotantarriere1);
let clignotantarriere2 = new THREE.Mesh(sphereGeo, clignotantarriereMat);
clignotantarriere2.position.set(13.25, 15.5, 40.5);
scene.add(clignotantarriere2);
let clignotantlat1 = new THREE.Mesh(sphereGeo, clignotantlatMat);
clignotantlat1.position.set(-15, 16.75, -15.5);
scene.add(clignotantlat1);
let clignotantlat2 = new THREE.Mesh(sphereGeo, clignotantlatMat);
clignotantlat2.position.set(15, 16.75, -15.5);
scene.add(clignotantlat2);
let plaque = new THREE.Mesh(sphereGeo, plaqueMat);
plaque.position.set(0, 15.6, 43);
scene.add(plaque);
let brouillardarriere1 = new THREE.Mesh(sphereGeo, brouillardarriereMat);
brouillardarriere1.position.set(-10, 8, 43);
scene.add(brouillardarriere1);
let brouillardarriere2 = new THREE.Mesh(sphereGeo, brouillardarriereMat);
brouillardarriere2.position.set(10, 8, 43);
scene.add(brouillardarriere2);
let brouillardavant1 = new THREE.Mesh(sphereGeo, brouillardavantMat);
brouillardavant1.position.set(-12, 6.3, -40.25);
scene.add(brouillardavant1);
let brouillardavant2 = new THREE.Mesh(sphereGeo, brouillardavantMat);
brouillardavant2.position.set(12, 6.3, -40.25);
scene.add(brouillardavant2);
let feudejour1 = new THREE.Mesh(sphereGeo, feudejourMat);
feudejour1.position.set(-10.15, 12.45, -41.95);
scene.add(feudejour1);
let feudejour2 = new THREE.Mesh(sphereGeo, feudejourMat);
feudejour2.position.set(10.15, 12.45, -41.95);
scene.add(feudejour2);
let godraysEffect1 = new POSTPROCESSING.GodRaysEffect(camera, feuderoute1, {
resolutionScale: 1,
exposure: .54,
density: .96,
decay: .92,
weight: .95,
samples: 25,
clampMax: 1.0
});
let godraysEffect2 = new POSTPROCESSING.GodRaysEffect(camera, feuderoute2, {
resolutionScale: 1,
exposure: .54,
density: .96,
decay: .92,
weight: .95,
samples: 25,
clampMax: 1.0
});
let godraysEffect3 = new POSTPROCESSING.GodRaysEffect(camera, feustop1, {
resolutionScale: 1,
exposure: .54,
density: .96,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect4 = new POSTPROCESSING.GodRaysEffect(camera, feustop2, {
resolutionScale: 1,
exposure: .54,
density: .96,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect5 = new POSTPROCESSING.GodRaysEffect(camera, croisement1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .5,
samples: 25,
clampMax: 1.0
});
let godraysEffect6 = new POSTPROCESSING.GodRaysEffect(camera, croisement2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .5,
samples: 25,
clampMax: 1.0
});
let godraysEffect7 = new POSTPROCESSING.GodRaysEffect(camera, positionarriere1, {
resolutionScale: 1,
exposure: .54,
density: .92,
decay: .9,
weight: .35,
samples: 25,
clampMax: 1.0
});
let godraysEffect8 = new POSTPROCESSING.GodRaysEffect(camera, positionarriere2, {
resolutionScale: 1,
exposure: .54,
density: .92,
decay: .9,
weight: .35,
samples: 25,
clampMax: 1.0
});
let godraysEffect9 = new POSTPROCESSING.GodRaysEffect(camera, position1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .30,
samples: 25,
clampMax: 1.0
});
let godraysEffect10 = new POSTPROCESSING.GodRaysEffect(camera, position2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .30,
samples: 25,
clampMax: 1.0
});
let godraysEffect11 = new POSTPROCESSING.GodRaysEffect(camera, recul1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect12 = new POSTPROCESSING.GodRaysEffect(camera, recul2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect13 = new POSTPROCESSING.GodRaysEffect(camera, clignotantavant1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect14 = new POSTPROCESSING.GodRaysEffect(camera, clignotantavant2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect15 = new POSTPROCESSING.GodRaysEffect(camera, clignotantarriere1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect16 = new POSTPROCESSING.GodRaysEffect(camera, clignotantarriere2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect17 = new POSTPROCESSING.GodRaysEffect(camera, clignotantlat1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect18 = new POSTPROCESSING.GodRaysEffect(camera, clignotantlat2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .45,
samples: 25,
clampMax: 1.0
});
let godraysEffect19 = new POSTPROCESSING.GodRaysEffect(camera, plaque, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .225,
samples: 25,
clampMax: 1.0
});
let godraysEffect20 = new POSTPROCESSING.GodRaysEffect(camera, brouillardarriere1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .25,
samples: 25,
clampMax: 1.0
});
let godraysEffect21 = new POSTPROCESSING.GodRaysEffect(camera, brouillardarriere2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .25,
samples: 25,
clampMax: 1.0
});
let godraysEffect22 = new POSTPROCESSING.GodRaysEffect(camera, brouillardavant1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .35,
samples: 25,
clampMax: 1.0
});
let godraysEffect23 = new POSTPROCESSING.GodRaysEffect(camera, brouillardavant2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .35,
samples: 25,
clampMax: 1.0
});
let godraysEffect24 = new POSTPROCESSING.GodRaysEffect(camera, feudejour1, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .35,
samples: 25,
clampMax: 1.0
});
let godraysEffect25 = new POSTPROCESSING.GodRaysEffect(camera, feudejour2, {
resolutionScale: 1,
exposure: .54,
density: .94,
decay: .92,
weight: .35,
samples: 25,
clampMax: 1.0
});
let renderPass = new POSTPROCESSING.RenderPass(scene, camera);
let effectPass1 = new POSTPROCESSING.EffectPass(
camera,
godraysEffect1,
godraysEffect2,
godraysEffect3,
godraysEffect4,
godraysEffect5,
godraysEffect6,
godraysEffect7,
godraysEffect8,
godraysEffect9,
godraysEffect10,
godraysEffect11,
godraysEffect12,
godraysEffect19,
godraysEffect20,
godraysEffect21
);
effectPass1.renderToScreen = true;
let effectPass2 = new POSTPROCESSING.EffectPass(
camera,
godraysEffect13,
godraysEffect14,
godraysEffect15,
godraysEffect16,
godraysEffect17,
godraysEffect18,
godraysEffect22,
godraysEffect23,
godraysEffect24,
godraysEffect25
);
effectPass2.renderToScreen = true;
composer1 = new POSTPROCESSING.EffectComposer(renderer);
composer1.addPass(renderPass);
composer1.addPass(effectPass1);
//composer1.addPass(effectPass2);
composer2 = new POSTPROCESSING.EffectComposer(renderer);
composer2.addPass(renderPass);
composer2.addPass(effectPass2);
$("#lebigbouton-packavant").click(function () {
if ($(this).prop("checked") == true) {
feuderouteMat.opacity = 1;
croisementMat.opacity = 1;
positionMat.opacity = 1;
brouillardavantMat.opacity = 1;
feudejourMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
feuderouteMat.opacity = 0;
croisementMat.opacity = 0;
positionMat.opacity = 0;
brouillardavantMat.opacity = 0;
feudejourMat.opacity = 0;
}
});
$("#lebouton1-packavant").click(function () {
if ($(this).prop("checked") == true) {
croisementMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
croisementMat.opacity = 0;
}
});
$("#lebouton2-packavant").click(function () {
if ($(this).prop("checked") == true) {
feuderouteMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
feuderouteMat.opacity = 0;
}
});
$("#lebouton3-packavant").click(function () {
if ($(this).prop("checked") == true) {
brouillardavantMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
brouillardavantMat.opacity = 0;
}
});
$("#lebouton4-packavant").click(function () {
if ($(this).prop("checked") == true) {
positionMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
positionMat.opacity = 0;
}
});
$("#lebouton5-packavant").click(function () {
if ($(this).prop("checked") == true) {
feudejourMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
feudejourMat.opacity = 0;
}
});
$("#lebigbouton-packarriere").click(function () {
if ($(this).prop("checked") == true) {
feustopMat.opacity = 1;
positionarriereMat.opacity = 1;
reculMat.opacity = 1;
plaqueMat.opacity= 1;
brouillardarriereMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
feustopMat.opacity = 0;
positionarriereMat.opacity = 0;
reculMat.opacity = 0;
plaqueMat.opacity= 0;
brouillardarriereMat.opacity = 0;
}
});
$("#lebouton1-packarriere").click(function () {
if ($(this).prop("checked") == true) {
feustopMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
feustopMat.opacity = 0;
}
});
$("#lebouton2-packarriere").click(function () {
if ($(this).prop("checked") == true) {
positionarriereMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
positionarriereMat.opacity = 0;
}
});
$("#lebouton3-packarriere").click(function () {
if ($(this).prop("checked") == true) {
brouillardarriereMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
brouillardarriereMat.opacity = 0;
}
});
$("#lebouton4-packarriere").click(function () {
if ($(this).prop("checked") == true) {
reculMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
reculMat.opacity = 0;
}
});
$("#lebouton5-packarriere").click(function () {
if ($(this).prop("checked") == true) {
plaqueMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
plaqueMat.opacity = 0;
}
});
$("#lebigbouton-packclignotants").click(function () {
if ($(this).prop("checked") == true) {
clignotantavantMat.opacity = 1;
clignotantarriereMat.opacity = 1;
clignotantlatMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
clignotantavantMat.opacity = 0;
clignotantarriereMat.opacity = 0;
clignotantlatMat.opacity = 0;
}
});
$("#lebouton1-packclignotants").click(function () {
if ($(this).prop("checked") == true) {
clignotantavantMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
clignotantavantMat.opacity = 0;
}
});
$("#lebouton2-packclignotants").click(function () {
if ($(this).prop("checked") == true) {
clignotantarriereMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
clignotantarriereMat.opacity = 0;
}
});
$("#lebouton3-packclignotants").click(function () {
if ($(this).prop("checked") == true) {
clignotantlatMat.opacity = 1;
} else if ($(this).prop("checked") == false) {
clignotantlatMat.opacity = 0;
}
});
animate();
}
function animate() {
controls.update();
resizeCanvasToDisplaySize();
requestAnimationFrame(animate/2);
composer1.render();
//composer2.render();
}
function resizeCanvasToDisplaySize() {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
if (canvas.width !== width || canvas.height !== height) {
composer1.setSize(width, height, false);
composer2.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}
function onTransitionEnd(event) {
event.target.remove();
}
init();
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
$(document).ready(function () {
$("#lebigbouton-packavant").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packavant, #lebouton2-packavant, #lebouton3-packavant, #lebouton4-packavant, #lebouton5-packavant"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packavant, #lebouton2-packavant, #lebouton3-packavant, #lebouton4-packavant, #lebouton5-packavant"
).prop("checked", false);
}
});
$(".lesboutons-packavant").click(function () {
if (
$(".lesboutons-packavant:checked").length ==
$(".lesboutons-packavant").length
) {
$("#lebigbouton-packavant").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packavant").prop("checked", false);
}
});
$("#lebigbouton-packavant, #lebouton1-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#feu-croisement").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feu-croisement").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton2-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#feu-route").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feu-route").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton3-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#brouillard-avant").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#brouillard-avant").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton4-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#position-avant").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#position-avant").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton5-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#feux-jour").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feux-jour").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
});
$(document).ready(function () {
$("#lebigbouton-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packarriere, #lebouton2-packarriere, #lebouton3-packarriere, #lebouton4-packarriere, #lebouton5-packarriere"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packarriere, #lebouton2-packarriere, #lebouton3-packarriere, #lebouton4-packarriere, #lebouton5-packarriere"
).prop("checked", false);
}
});
$(".lesboutons-packarriere").click(function () {
if (
$(".lesboutons-packarriere:checked").length ==
$(".lesboutons-packarriere").length
) {
$("#lebigbouton-packarriere").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packarriere").prop("checked", false);
}
});
$("#lebigbouton-packarriere, #lebouton1-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#feux-stop").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feux-stop").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packarriere, #lebouton2-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#position-arriere").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#position-arriere").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packarriere, #lebouton3-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#brouillard-arriere").css(
"filter",
`drop-shadow(0px 0px 5px #e0e0ff)`
);
} else if ($(this).prop("checked") == false) {
$("#brouillard-arriere").css(
"filter",
`drop-shadow(0px 0px 0px #e0e0ff)`
);
}
});
$("#lebigbouton-packarriere, #lebouton4-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#feux-recul").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feux-recul").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packarriere, #lebouton5-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#eclairage-plaque").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#eclairage-plaque").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
});
$(document).ready(function () {
$("#lebigbouton-packclignotants").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packclignotants, #lebouton2-packclignotants, #lebouton3-packclignotants"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packclignotants, #lebouton2-packclignotants, #lebouton3-packclignotants"
).prop("checked", false);
}
});
$(".lesboutons-packclignotants").click(function () {
if (
$(".lesboutons-packclignotants:checked").length ==
$(".lesboutons-packclignotants").length
) {
$("#lebigbouton-packclignotants").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packclignotants").prop("checked", false);
}
});
$("#lebigbouton-packclignotants, #lebouton1-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$("#cligno-avant").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#cligno-avant").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
}
);
$("#lebigbouton-packclignotants, #lebouton2-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$("#cligno-arriere").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#cligno-arriere").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
}
);
$("#lebigbouton-packclignotants, #lebouton3-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$("#cligno-lat").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#cligno-lat").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
}
);
});
$(document).ready(function () {
$("#lebigbouton-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packinterieur, #lebouton2-packinterieur, #lebouton3-packinterieur, #lebouton4-packinterieur, #lebouton5-packinterieur, #lebouton6-packinterieur, #lebouton7-packinterieur, #lebouton8-packinterieur"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packinterieur, #lebouton2-packinterieur, #lebouton3-packinterieur, #lebouton4-packinterieur, #lebouton5-packinterieur, #lebouton6-packinterieur, #lebouton7-packinterieur, #lebouton8-packinterieur"
).prop("checked", false);
}
});
$(".lesboutons-packinterieur").click(function () {
if (
$(".lesboutons-packinterieur:checked").length ==
$(".lesboutons-packinterieur").length
) {
$("#lebigbouton-packinterieur").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packinterieur").prop("checked", false);
}
});
$("#lebigbouton-packinterieur, #lebouton1-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#plafonniers").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#plafonniers").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton2-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#boite-a-gants").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#boite-a-gants").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton3-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#portes-avants").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#portes-avants").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton4-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#portes-arrieres").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#portes-arrieres").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton5-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#coffre").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#coffre").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton6-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#pieds").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#pieds").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton7-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#miroir-de-courtoisie").css(
"filter",
`drop-shadow(0px 0px 5px #e0e0ff)`
);
} else if ($(this).prop("checked") == false) {
$("#miroir-de-courtoisie").css(
"filter",
`drop-shadow(0px 0px 0px #e0e0ff)`
);
}
});
$("#lebigbouton-packinterieur, #lebouton8-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#ouverture-portiere").css(
"filter",
`drop-shadow(0px 0px 5px #e0e0ff)`
);
} else if ($(this).prop("checked") == false) {
$("#ouverture-portiere").css(
"filter",
`drop-shadow(0px 0px 0px #e0e0ff)`
);
}
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.