3d-сцены

Сфера из изображений

Пространственная медиа-сфера для шоукейсов, коллекций и архивов moodboard-материалов.

Three.jsDrag rotation

Подробнее и перенос

Здесь собраны живое демо, prompt для генерации похожего решения и готовый React-сниппет для переноса в HTML embed или кастомный блок Tilda.

Prompt для GPT

Готовая формулировка для генерации похожего эффекта

Создай выразительную 3D-анимацию «Сфера из изображений» для Next.js и React. Нужен эффект: двадцать изображений собраны в вращающуюся сферу с drag-управлением. Используй Three.js, Drag rotation, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Сфера из изображений

'use client';

import { Canvas, useFrame } from '@react-three/fiber';
import { useMemo, useRef } from 'react';
import * as THREE from 'three';

function SphereCloud() {
  const groupRef = useRef<THREE.Group>(null);
  const points = useMemo(() => Array.from({ length: 20 }, (_, i) => i), []);

  useFrame((_, delta) => {
    if (groupRef.current) groupRef.current.rotation.y += delta * 0.22;
  });

  return <group ref={groupRef}>{points.map((point) => <mesh key={point}><planeGeometry args={[0.65, 0.65]} /><meshBasicMaterial color="#ffffff" /></mesh>)}</group>;
}

export function SphereOfImages3D() {
  return <Canvas><SphereCloud /></Canvas>;
}