3d-сцены

3D-витрина товара

Трёхмерный объект парит, крутится автоматически и даёт пользователю ручной контроль обзора.

Three.js@react-three/fiberOrbitControls

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

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

Prompt для GPT

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

Создай выразительную 3D-анимацию «3D-витрина товара» для Next.js и React. Нужен эффект: hero-объект вращается в реальном времени по оси y и доступен для orbit. Используй Three.js, @react-three/fiber, OrbitControls, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

3D-витрина товара

'use client';

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

function ObjectMesh() {
  const ref = useRef<THREE.Mesh>(null);
  useFrame((_, delta) => {
    if (ref.current) ref.current.rotation.y += delta * 0.9;
  });
  return <mesh ref={ref}><torusKnotGeometry args={[1, 0.28, 180, 24]} /><meshStandardMaterial color="#bbff00" /></mesh>;
}

export function ProductViewer3D() {
  return (
    <Canvas>
      <ambientLight intensity={1} />
      <ObjectMesh />
      <OrbitControls enablePan={false} />
    </Canvas>
  );
}