Interactive3d Hero

Interactive 3D voxel painter with Three.js that allows users to create and manipulate 3D cubes on a grid. Features real-time mouse interaction, cube placement/removal, camera controls.

Best Viewed on

Dependencies

Interaction Type

CLI UNAVAILABLE

pro component, try copying the source code from top right corner

import { InteractiveMeshCanvas } from "@/components/v1/skiper36";

// Customizing the voxel painter
const CustomVoxelPainter = () => {
  return (
    <div className="h-screen w-full">
      <InteractiveMeshCanvas
        backgroundColor="#1a1a1a"
        textColor="#ffffff"
        cubeColor="#ff6b6b"
        rollOverColor="#4ecdc4"
        cubeSize={30}
        gridSize={800}
        initialCubesCount={8}
        enablePan={true}
        enableZoom={true}
        enableRotate={true}
      />
    </div>
  );
};

Source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

License & Usage:

• Free to use and modify in both personal and commercial projects.
• Attribution to Skiper UI is required when using the free version.
• No attribution required with Skiper UI Pro.