3d-сцены

Вращающийся куб

Сцена с полноценным трёхмерным кубом, непрерывным spin и отдельной кнопкой ускорения.

Three.jsInteractive controls

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

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

Prompt для GPT

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

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

React-компонент

Вращающийся куб

'use client';

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

function SpinCube({ speed }: { speed: number }) {
  const ref = useRef<THREE.Mesh>(null);
  useFrame((_, delta) => {
    if (!ref.current) return;
    ref.current.rotation.x += delta * speed * 0.5;
    ref.current.rotation.y += delta * speed;
  });
  return <mesh ref={ref}><boxGeometry args={[1.7, 1.7, 1.7]} /><meshStandardMaterial color="#bbff00" /></mesh>;
}

export function AutoRotationCube() {
  const [speed, setSpeed] = useState(1);

  return (
    <>
      <Canvas><SpinCube speed={speed} /></Canvas>
      <button onClick={() => setSpeed((value) => value + 0.35)}>Ускорить</button>
    </>
  );
}