Masquer Div en cliquant sur le bouton : démarrer l'animation

17 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Masquer Div en cliquant sur le bouton : démarrer l'animation

Recommandé

1 January 2025

Un code par Liamgilles76

HTML

CSS

@import "https://fonts.googleapis.com/css2?family=Aleo&display=swap";

* {
  font-family: Aleo, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
html,
body {
  color: #9d988a;
  font-size: 0.9em;
  overflow: hidden;
}
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}

#container {
  background-image: url(https://assets.codepen.io/262181/intro-bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 101;
  position: absolute;
}

#lottie {
  height: 40vh;
  max-height: 400px;
  z-index: 102;
  display: flex;
}

#explanation {
  display: flex;
  width: 66vw;
  max-width: 300px;
  background-color: #00000040;
  padding: 16px;
}

#enter {
  width: auto;
  border-radius:30px;
  margin:10px 20px 10px;
  padding:10px 10px 10px;
}
button {
  cursor: pointer;
  margin-top: 4px;
  padding: 4px;
  background-color: #9d988a;
  color: #6b2414;
  border-radius: 4px;
  border: none;
}

JS

import * as THREE from "https://esm.sh/three@0.174.0";
import { OrbitControls } from "https://esm.sh/three@0.174.0/addons/controls/OrbitControls.js";
import { GLTFLoader } from "https://esm.sh/three@0.174.0/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "https://esm.sh/three@0.174.0/examples/jsm/loaders/DRACOLoader";
import { RGBELoader } from "https://esm.sh/three@0.174.0/examples/jsm/loaders/RGBELoader";
import Lottie from "https://esm.sh/lottie-web";

raycaster.setFromCamera(pointer, camera);

// calculate objects intersecting the picking ray
  const intersects = raycaster.intersectObject(hitArea);
  if (intersects.length > 0) {
    //    console.log("clicking");
    //clicking the lever
    e.preventDefault();
    controls.enableRotate = false;
    mouse.isClicking = true;
  }
};
const isUp = (e) => {
  mouse.pressing = false;
  mouse.isClicking = false;
  mouse.direction = null;
  controls.enableRotate = true;
  if (mouse.dragStarted) {
    mouse.dragStarted = false;
    lever.rotation.x = 1;
  }
};
//
const isMove = (e) => {
  // console.log("isMove");
  let tgt = "";
  if (deviceType == "mobile") {
    tgt = e.targetTouches[0];
  } else {
    tgt = e;
  }
  mouse.x = tgt.clientX;
  mouse.y = tgt.clientY;

// console.log(mouse.y);
  if (mouse.pressing && mouse.isClicking) {
    e.preventDefault();
    controls.enableRotate = false;

if (mouse.curY == null) {
      //first click
    } else if (mouse.curY > tgt.clientY) {
      // console.log("moving up");
      mouse.direction = "up";
    } else if (mouse.curY < tgt.clientY) {
      // console.log("moving down");
      if (mouse.direction != "down") {
        mouse.direction = "down";
        mouse.dragDistance = 0;
      } else {
        //already moving down, lets move the lever
        let dist = tgt.clientY - mouse.curY;
        mouse.dragStarted = true;
        mouse.dragDistance += dist;
        let r = Math.min(2, mouse.dragDistance / 100 + 1);
        lever.rotation.x = r;
        if (inc < 0.4) {
          inc += r / 100;
        }
      }
    }
    mouse.curY = tgt.clientY;
  } else {
    mouse.mouseDirection = null;
    mouse.curY = null;
    return;
  }
};
//
const sizes = { width: window.innerWidth, height: window.innerHeight };

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

// Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

// Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

const camera = new THREE.PerspectiveCamera(
  35,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.set(10, -2.3, -15.4);
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.minDistance = 4;
controls.maxDistance = 7;
controls.maxPolarAngle = Math.PI / 2;
controls.maxAzimuthAngle = 0.785;
controls.minAzimuthAngle = -1.5;
//
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace;

//
const bakedTexture = textureLoader.load(
  "https://assets.codepen.io/262181/baked.jpg"
);
bakedTexture.flipY = false;
bakedTexture.colorSpace = THREE.SRGBColorSpace;

// const wheelTexture = textureLoader.load('wheelv1.png')
const wheelTexture = textureLoader.load(
  "https://assets.codepen.io/262181/wheel.jpg"
);
wheelTexture.flipY = false;
wheelTexture.colorSpace = THREE.SRGBColorSpace;
//
const shadowTexture = textureLoader.load(
  "https://assets.codepen.io/262181/shadow.png"
);
shadowTexture.flipY = false;
shadowTexture.colorSpace = THREE.SRGBColorSpace;
//
const bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture });
const wheelMaterial = new THREE.MeshBasicMaterial({ map: wheelTexture });
// const shadowMaterial = new THREE.MeshBasicMaterial({ map: shadowTexture, transparent:true, opacity:0.5 })
const shadowMaterial = new THREE.MeshBasicMaterial({
  map: shadowTexture,
  transparent: true,
  opacity: 0.5
});
const transpMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0x000000),
  transparent: true,
  opacity: 0
});
//
gltfLoader.load("https://assets.codepen.io/262181/carnival.glb", (gltf) => {
  // console.log(gltf);
  gltf.scene.traverse((child) => {
    // console.log(child.name);
    if (child.name == "lever") {
      lever = child;
      lever.rotation.x = 2;
      child.material = bakedMaterial;
    } else if (child.name == "hitarea") {
      hitArea = child;
      child.material = transpMaterial;
    } else if (child.name == "wheel") {
      child.material = wheelMaterial;
      wheel = child;
      // window.wheel=wheel
      ready = true;
    } else if (child.name == "shadow") {
      child.material = shadowMaterial;
      // child.visible = false;
    } else if (child.name == "sign_swing") {
      //pull sign at intro
      child.material = bakedMaterial;
      pullSign = child;
    } else if (child.name == "result_panel") {
      // result animation
      child.material = bakedMaterial;
      initResultAnimation(child, gltf);
    } else if (child.name.includes("num")) {
      numArr.push(child);
      child.material = bakedMaterial;
      child.visible = false;
    } else {
      child.material = bakedMaterial;
    }
  });
  scene.add(gltf.scene);
  // console.log(numArr);
});
let initResultAnimation = (child, gltf) => {
  resultSign = child;
  resultAnim = THREE.AnimationClip.findByName(
    gltf.animations,
    "result_panelAction"
  );
  // resultAnim = gltf.animations[0]
  animMixer = new THREE.AnimationMixer(resultSign);
  // animMixer.addEventListener( 'loop', (e) => { console.log("loopDone")})

animMixer.addEventListener("finished", (e) => {
    manageRevealAnim(e);
  });
  animAction = animMixer.clipAction(resultAnim);
  animAction.reset();
  animAction.clampWhenFinished = true;
  animAction.timeScale = 1;
  animAction.setLoop(THREE.LoopOnce, 1);
  // animAction.play();
};
let manageRevealAnim = (e) => {
  // console.log("finished");
  if (revealAnim.isShowing == true) {
    //         //its now closed
    if (!mouse.isSpinning) {
      revealAnim.isShowing = false;
    }
  } else {
    //         //its now open
    if (!mouse.isSpinning) {
      revealAnim.isShowing = true;
    }
  }
  revealAnim.isAnimating = false;
  animAction.paused = true;
  // console.log(revealAnim.isShowing);
};
//

const tick = () => {
  // const elapsedTime = clock.getElapsedTime()

// Update controls
  controls.update();
  //
  //    console.log(camera.position);
  if (ready) {
    //    console.log((wheel.rotation.z)*(180/Math.PI) ) %360;;
    // wheel.rotation.z  = 0
    if (window.start3) {
      speed += inc;
      if (inc > 0) {
        if (!mouse.isSpinning) {
          inc += 0.1;
        }
        wheel.rotation.z = speed;
        inc -= 0.001;
        mouse.isSpinning = true;
        // animAction.reset();
        if (revealAnim.isShowing) {
          // console.log("should be closing");
          animAction.paused = false;
          revealAnim.isAnimating = true;
          animAction.setLoop(THREE.LoopOnce);
          animAction.timeScale = -1;
          animAction.time = 0.5;
          animAction.play();
          revealAnim.isShowing = false;
        } else {
          //
        }
      } else {
        let rad = (wheel.rotation.z * (180 / Math.PI)) % 360;
        let answer = Math.floor(1 + rad / 36); // +1 for zero offset, /36 because there are 10 sections so 360/36 = 10
        if (mouse.isSpinning == true) {
          showNumber(answer);
          mouse.isSpinning = false;
          // console.log("should be opening");
          animAction.paused = false;
          revealAnim.isAnimating = true;
          animAction.setLoop(THREE.LoopOnce);
          animAction.timeScale = 1;
          animAction.play();
        }
      }
      if (incSpeed > 0) {
        if (pullSign != null) {
          pullSign.rotation.z = Math.sin(signSpinSpeed) / 3;
          signSpinSpeed += incSpeed / 100;
          incSpeed -= 0.068;
        }
      }
      if (!cameraSetup.cameraIsSettled) {
        // console.log("moving cam", cameraSetup.iteration, cameraSetup.totalIterations);
        cameraSetup.iteration++;

if (cameraSetup.iteration < 100) {
          let xx = easeOutCubic(
            cameraSetup.iteration,
            camera.position.x,
            cameraSetup.cameraTgt.x - camera.position.x,
            cameraSetup.totalIterations
          );
          let yy = easeOutCubic(
            cameraSetup.iteration,
            camera.position.y,
            cameraSetup.cameraTgt.y - camera.position.y,
            cameraSetup.totalIterations
          );
          let zz = easeOutCubic(
            cameraSetup.iteration,
            camera.position.z,
            cameraSetup.cameraTgt.z - camera.position.z,
            cameraSetup.totalIterations
          );
          camera.position.set(xx, yy, zz);
          let leverR = easeInOutCubic(
            cameraSetup.iteration,
            lever.rotation.x,
            cameraSetup.leverTgt - lever.rotation.x,
            80
          );
          lever.rotation.x = leverR;
          // console.log(cameraSetup.cameraTgt.y-camera.position.y);
          // if((Math.abs(cameraSetup.cameraTgt.y)-Math.abs(camera.position.y))<0.0000001){
          // cameraSetup.cameraIsSettled=true;
          // console.log(cameraSetup.iteration);
          // }
        } else {
          cameraSetup.cameraIsSettled = true;
        }
      }
    }
  }
  //reveal animation
  const delta = clock.getDelta();
  if (animMixer) animMixer.update(delta);
  //  console.log(delta);
  // Render
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};
init();
tick();
window.camera = camera;
window.controls = controls;
window.anim = anim;

Masquer Div en cliquant sur le bouton : démarrer l'animation

Recommandé

Senarig une page d'accueil

Un code par komplex

Un code par Liamgilles76

HTML

CSS

JS

Recommandé

Senarig une page d'accueil

Un code par komplex

Un code par Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS