6D Pavillion, 6 Videos played in each face of a cube

A single video file with multiple offset is used

This is a Next.js project bootstrapped with create-next-app.

Demo URL

https://6d-pavilion-sajithamma.vercel.app/

Screenshot

The Original Video

Each face of the cube has a video texture from the video with different offset and repeat

 <mesh scale={1} rotation={[0, Math.PI, 0]} position={[0, 20, 0]} ref={leftscreen}>
 
    <planeBufferGeometry attach="geometry" args={[80, 40]} />

    <meshStandardMaterial emissive={"white"} side={THREE.DoubleSide}>

        <videoTexture repeat={[0.6, 0.35]} offset={[0.4, 0]} attach="map" args={[video]} encoding={THREE.sRGBEncoding} />
        <videoTexture attach="emissiveMap" args={[video]} />

    </meshStandardMaterial>

 </mesh>

Installation

First, run the development server:

npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.