Как создать эффектную 3D-картинку с анимацией вращения для оформления сайта?

Для создания эффектной 3D-картинки с анимацией вращения для сайта можно воспользоваться следующими инструментами и подходами:

1. Blender — бесплатная и мощная программа для 3D-моделирования и анимации. Создайте 3D-модель, примените материалы и освещение, затем экспортируйте анимацию в формат, поддерживаемый браузерами (например, GLB).

2. Three.js — JavaScript-библиотека для создания интерактивных 3D-эффектов прямо в браузере. Позволяет легко интегрировать анимацию вращения и интерактивность.

3. Cinema 4D — коммерческий инструмент с удобным интерфейсом и мощными инструментами для моделирования и анимации. Экспортируйте анимацию в формат GLB или GLTF.

4. Adobe After Effects — для создания анимации вращения и постобработки. Экспортируйте результат в формат MP4 или GIF.

Пример простого кода на Three.js:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.lookAt(cube.position);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

Интегрируйте анимацию в сайт с помощью HTML и CSS, чтобы обеспечить плавное отображение и взаимодействие с пользователем.