Auto-Rotation Cube

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

Three.jsInteractive controls

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

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

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

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

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

React component

Auto-Rotation Cube

'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)}>Spin faster</button>
    </>
  );
}