CodePen Home ThreeJS 'Planos de Portal' com Matcaps

2485 Andev.web

Abrir no Editor Video Publique Seu Código

CodePen Home ThreeJS 'Planos de Portal' com Matcaps

Recomendado

19 January 2026

Henry Stickmin: Dirigível - Jogue o jogo em Flash com Ruffle

3 June 2025

Um código de fluxyftnpro

9 December 2024

Efeito de animação de hover em HTML, CSS e Javascript

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 );

}

Recomendado

Henry Stickmin: Dirigível - Jogue o jogo em Flash com Ruffle

Um código de fluxyftnpro

Efeito de animação de hover em HTML, CSS e Javascript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS