Webleb - Extraits de Code - Un code par adonis1887

HTML

CSS

JS

const sun = new THREE.AmbientLight(0xffffff, .5);
scene.add(sun);

const planeGeometry = new THREE.PlaneGeometry(settings.boxDimensions.w, settings.boxDimensions.h);

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

function RoundedPortalPhotoPlane(geometry, photoTexture) {
  const material = new THREE.MeshMatcapMaterial({
    matcap: photoTexture,
    transparent: true,
  })

material.onBeforeCompile = (shader) => {
    shader.vertexShader = shader.vertexShader.replace(
      '#include <common>',
      `
          #include <common>
          varying vec4 vPosition;
          varying vec2 vUv;
      `
  );
    shader.vertexShader = shader.vertexShader.replace(
        '#include <fog_vertex>',
        `
            #include <fog_vertex>
            vPosition = mvPosition;
            vUv = uv;
        `
    );
    shader.fragmentShader = shader.fragmentShader.replace(
      `#include <common>`,
      `
      #include <common>
      varying vec4 vPosition;
      varying vec2 vUv;
      float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
          return length(max(abs(CenterPosition)-Size+Radius,0.0))-Radius;
        }
      `
    );
    shader.fragmentShader = shader.fragmentShader.replace(
      `#include <dithering_fragment>`,
      `
      #include <dithering_fragment>

// The pixel space scale of the rectangle.
      vec2 size = vec2(1.0, 1.0);
      // How soft the edges should be (in pixels). Higher values could be used to simulate a drop shadow.
      float edgeSoftness  = 0.001;
      // The radius of the corners (in pixels).
      float radius = 0.08;
      // Calculate distance to edge.
      float distance  = roundedBoxSDF(vUv.xy - (size/2.0), size/2.0, radius);
      // Smooth the result (free antialiasing).
      float smoothedAlpha =  1.0-smoothstep(0.0, edgeSoftness * 2.0,distance);
      // Return the resultant shape.
      //vec4 quadColor = mix(vec4(1.0, 1.0, 1.0, 1.0), vec4(0.0, 0.2, 1.0, smoothedAlpha), smoothedAlpha);
      gl_FragColor = vec4(outgoingLight, smoothedAlpha);
      `
    );
        console.log(shader.fragmentShader);

};
  const plane = new THREE.Mesh(
    geometry,
    material
  );

return plane;
}

// planes
const planeGroup = new THREE.Group();

const photoPlane01 = new RoundedPortalPhotoPlane(
  planeGeometry,
  photoTexture02
);
photoPlane01.position.set(-1, 0, 1);
photoPlane01.rotation.y = Math.PI * 0.1;
photoPlane01.name = 'plane1';
planeGroup.add(photoPlane01);

const photoPlane02 = new RoundedPortalPhotoPlane(
  planeGeometry,
  photoTexture
);

photoPlane02.position.set(0, 0, 0.5);
photoPlane02.name = 'plane2';
planeGroup.add(photoPlane02);

const photoPlane03 = new RoundedPortalPhotoPlane(
  planeGeometry,
  photoTexture03
);
photoPlane03.position.set(1, 0, 1);
photoPlane03.rotation.y = Math.PI * -0.1;
photoPlane03.name = 'plane3';
planeGroup.add(photoPlane03);
scene.add(planeGroup);

const mouse = new THREE.Vector2();
let xParallaxFactor = -0.3;
let yParallaxFactor = 0.3;
//mouse events
window.addEventListener('mousemove', (event) => {
  mouse.x = event.clientX / settings.sizes.width * 2 - 1; //could also do it this way: map(event.clientX, 0, sizes.width, -1, 1)
  mouse.y = - (event.clientY / settings.sizes.height) * 2 + 1; //could also do it this way: map(event.clientY, 0, sizes.height, 1, -1)
});

// animation
const clock = new THREE.Clock()
let previousTime = 0;

function animation( time ) {

const elapsedTime = clock.getElapsedTime()
  const deltaTime = elapsedTime - previousTime;
  previousTime = elapsedTime;

const parallaxX = mouse.x * xParallaxFactor;
  const parallaxY = mouse.y * yParallaxFactor;
    planeGroup.rotation.y += (parallaxX - planeGroup.rotation.y) * 3 * deltaTime;
    planeGroup.rotation.x += (parallaxY - planeGroup.rotation.x) * 3 * deltaTime;

renderer.render( scene, camera );

}

Un code par adonis1887

Recommandé

Un code par nehapanchal8087

Un code de Yotva

Un code de Metehan

HTML

CSS

JS

Recommandé

Un code par nehapanchal8087

Un code de Yotva

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS