3D Product Viewer

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

Three.js@react-three/fiberOrbitControls

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

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

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

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

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

React component

3D Product Viewer

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