3D Sphere of Images

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

Three.jsDrag rotation

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

3D Sphere of Images

'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>;
}