Создание интерактивного проекта о Конституции Казахстана в 3D

@prmkroma

Концепция проекта Название: "Конституция Казахстана в 3D" Формат: Интерактивная 3D-сцена с книгой Конституции на столе. Структура проекта 1. Главная страница (3D-сцена) 3D-стол (деревянный, как в примере) с книгой Конституции РК. Книга (толстая, с золотым тиснением, надпись "Конституция Казахстана"). Фон: кабинет или библиотека в стиле сайта city3d.kz (можно добавить элементы казахстанского орнамента). Кнопка "Открыть" (при наведении — анимация свечения). 2. Открытие книги (интерактив) При клике книга раскрывается с 3D-анимацией. На первой странице: Заголовок: "Конституция Республики Казахстан" Краткое описание: "Основной закон страны, принятый 30 августа 1995 года". Фоновое изображение: флаг Казахстана или Акорда. 3. Перелистывание страниц Каждая страница содержит разделы: История Конституции (1995 г., поправки). Основные принципы (светское государство, права человека). Структура (разделы, статьи). Интересные факты (например, как проходил референдум). Галерея (фото Назарбаева, Токаева, здания Парламента). 4. Дополнительные элементы 3D-кнопки для навигации (листать вперед/назад). Фоновая музыка (гимн или инструментальная казахская мелодия). Режим "VR" (опционально, если нужно погружение).

DeepSeek V3

<jitProject id="constitution-kz-3d" title="3D Конституция Казахстана"> <jitFile type="file" filePath="index.html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Конституция Казахстана в 3D</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } #open-btn { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); padding: 15px 30px; background: rgba(0, 76, 150, 0.8); color: white; border: 2px solid gold; border-radius: 5px; font-size: 18px; cursor: pointer; transition: all 0.3s; z-index: 100; } #open-btn:hover { background: rgba(0, 76, 150, 1); box-shadow: 0 0 20px gold; } </style> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.166/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166/examples/jsm/" } } </script> </head> <body> <button id="open-btn">Открыть</button> <script type="module" src="main.js"></script> </body> </html> </jitFile> <jitFile type="file" filePath="main.js"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

// Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x333333);

// Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 2, 5);

// Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window*

Updated files

@prmkroma

делай

DeepSeek V3

продолжение файла main.js:

// Add lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(1, 1, 1); scene.add(directionalLight);

// Load 3D book model const loader = new GLTFLoader(); let bookModel;

loader.load('book.glb', function(gltf) { bookModel = gltf.scene; bookModel.scale.set(0.5, 0.5, 0.5); bookModel.position.set(0, 0, 0); scene.add(bookModel); }, undefined, function(error) { console.error('Error loading book model:', error); });

// Post-processing effects const bloomParams = { exposure: 1, bloomStrength: 1.5, bloomThreshold: 0, bloomRadius: 0.5 };

const renderScene = new RenderPass(scene, camera); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), bloomParams.bloomStrength, bloomParams.bloomRadius, bloomParams.bloomThreshold );

const composer = new EffectComposer(renderer); composer.addPass(renderScene); composer.addPass(bloomPass);

// Book opening animation let isBookOpen = false; const openBtn = document.getElementById('open-btn');

openBtn.addEventListener('click', () => { if (!bookModel) return;

if (!isBookOpen) { // Open book animation gsap.to(bookModel.rotation, { y: Math.PI / 2, duration: 1.5, ease: "power2.inOut" }); isBookOpen = true; openBtn.textContent = "Закрыть"; } else { // Close book animation gsap.to(bookModel.rotation, { y: 0, duration: 1.5, ease: "power2.inOut" }); isBookOpen = false; openBtn.textContent = "Открыть"; } });

// Window resize handler window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); });

// Animation loop function animate() { requestAnimationFrame(animate); composer.render(); }

animate(); </jitFile> </jitProject>