Combining Three.js with CSS for Horizontal Scroll and Distortion Effects

Based on your goal to recreate effects similar to zajno.com, I recommend using Three.js with CSS renderers to achieve the horizontal scroll with distortion effects. Here's how you can approach this:

Recommended Approach

For integrating 3D effects with your CSS layout, Three.js offers specialized renderers that can help:

1. CSS3DRenderer: This allows you to place DOM elements in 3D space while maintaining their CSS styling
2. EffectComposer: For applying post-processing effects like the pixel distortion

Implementation Strategy

1. Set up your basic structure

HTMLCopied
<div id="container">
  <div id="scene-container"></div>
  <div class="horizontal-scroll-content">
    <!-- Your content sections here -->
    <section class="panel"><img src="image1.jpg" alt=""></section>
    <section class="panel"><img src="image2.jpg" alt=""></section>
    <!-- More sections -->
  </div>
</div>

2. Initialize Three.js with CSS3DRenderer

JAVASCRIPTCopied
import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Initialize scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Standard WebGL renderer for effects
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('scene-container').appendChild(renderer.domElement);

// CSS3D renderer for DOM elements
const css3DRenderer = new CSS3DRenderer();
css3DRenderer.setSize(window.innerWidth, window.innerHeight);
css3DRenderer.domElement.style.position = 'absolute';
css3DRenderer.domElement.style.top = 0;
document.getElementById('scene-container').appendChild(css3DRenderer.domElement);

// Set up post-processing
const composer = new EffectComposer(renderer);
// Add your custom distortion shader here

3. Create your custom distortion shader

JAVASCRIPTCopied
const pixelShader = {
  uniforms: {
    "tDiffuse": { value: null },
    "amount": { value: 0.0 },
    "time": { value: 0.0 }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float amount;
    uniform float time;
    varying vec2 vUv;
    
    void main() {
      vec2 uv = vUv;
      
      // Add distortion based on amount parameter
      uv.x += sin(uv.y * 10.0 + time) * amount * 0.05;
      
      // Pixelation effect
      float pixelSize = 1.0 + amount * 20.0;
      vec2 pixelatedUV = floor(uv * pixelSize) / pixelSize;
      
      gl_FragColor = texture2D(tDiffuse, pixelatedUV);
    }
  `
};

const pixelPass = new ShaderPass(pixelShader);
composer.addPass(pixelPass);

4. Set up horizontal scrolling with GSAP

JAVASCRIPTCopied
// Create a horizontal scroll setup
const sections = gsap.utils.toArray('.panel');
const totalWidth = sections.reduce((width, section) => width + section.offsetWidth, 0);

gsap.to(sections, {
  x: () => -totalWidth + window.innerWidth,
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-scroll-content",
    pin: true,
    scrub: 1,
    end: () => `+=${totalWidth}`,
    invalidateOnRefresh: true,
    onUpdate: (self) => {
      // Update distortion amount based on scroll progress
      pixelPass.uniforms.amount.value = self.progress * 0.5;
    }
  }
});

5. Make it responsive

JAVASCRIPTCopied
// Handle window resize
window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  
  renderer.setSize(width, height);
  css3DRenderer.setSize(width, height);
  composer.setSize(width, height);
  
  // Update ScrollTrigger
  ScrollTrigger.refresh();
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update time uniform for shader animations
  pixelPass.uniforms.time.value += 0.01;
  
  // Render both scenes
  composer.render();
  css3DRenderer.render(scene, camera);
}

animate();

Additional Considerations

1. For better performance, consider using the CSS2DRenderer for simpler 2D elements within your 3D space.

2. You might need to adjust the distortion shader parameters to match the exact effect you're looking for.

3. For more advanced post-processing effects, explore the other passes available in Three.js like UnrealBloomPass or FilmPass.

4. To ensure proper alignment between your 3D elements and CSS layout, you'll need to carefully position your CSS3DObjects to match the scroll positions.

This approach should give you a solid foundation for recreating the zajno.com effects while maintaining good performance and responsiveness.

I need to stay focused on answering questions about Three.js documentation. If you have specific questions about implementing terrain generation in Three.js, I'd be happy to help with that based on the available documentation.

From the context provided, Three.js does have terrain-related examples that might be relevant to your project. Specifically, there's a terrain example available at:

• webgl / geometry / terrain

If you have specific questions about implementing heightmaps, using specific geometries, or other Three.js-related aspects of terrain generation, please let me know and I can provide more targeted assistance.