JavaScript и 3D-графика: возможности браузерной визуализации

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Интерактивный 3D визуализатор объектов с управлением через клавиатуру и сенсорный экран. Создавайте и вращайте 3D модели онлайн без плагинов.">
<meta name="keywords" content="3D визуализация, JavaScript 3D, WebGL, интерактивная графика, three.js, мобильный 3D, вращение объектов">
<meta name="author" content="Interactive 3D Studio">
<title>Interactive 3D Object Viewer - Вращение 3D Моделей Онлайн</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
#canvas-container {
width: 100%;
height: 100%;
position: relative;
}
canvas {
display: block;
touch-action: none;
}
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
z-index: 100;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.controls-row {
display: flex;
gap: 10px;
align-items: center;
}
.control-btn {
width: 60px;
height: 60px;
border: none;
border-radius: 15px;
background: linear-gradient(145deg, #ffffff, #e6e6e6);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 
inset 0 -3px 10px rgba(0, 0, 0, 0.1),
inset 0 3px 10px rgba(255, 255, 255, 0.8);
cursor: pointer;
font-size: 24px;
color: #2a5298;
transition: all 0.1s ease;
display: flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
}
.control-btn:active {
transform: scale(0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 3px 10px rgba(0, 0, 0, 0.1);
}
.control-btn.active {
background: linear-gradient(145deg, #2a5298, #1e3c72);
color: white;
}
.info-panel {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 10px;
backdrop-filter: blur(5px);
max-width: 300px;
z-index: 100;
}
.info-panel h1 {
font-size: 18px;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.info-panel p {
font-size: 14px;
line-height: 1.5;
opacity: 0.9;
}
.object-selector {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 100;
}
.obj-btn {
padding: 12px 20px;
border: none;
border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
color: #2a5298;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.obj-btn:hover, .obj-btn.active {
background: #2a5298;
color: white;
transform: translateX(-5px);
}
.rotation-indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.rotation-indicator.show {
opacity: 1;
}
.axis-indicator {
width: 100px;
height: 100px;
position: relative;
}
.axis-line {
position: absolute;
background: rgba(255, 255, 255, 0.5);
transform-origin: center;
}
.axis-x {
width: 100%;
height: 2px;
top: 50%;
left: 0;
}
.axis-y {
width: 2px;
height: 100%;
left: 50%;
top: 0;
}
@media (max-width: 768px) {
.control-btn {
width: 50px;
height: 50px;
font-size: 20px;
}
.info-panel {
max-width: 200px;
padding: 10px;
}
.info-panel h1 {
font-size: 16px;
}
.object-selector {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
max-width: 200px;
}
.obj-btn {
padding: 8px 15px;
font-size: 12px;
}
}
.auto-rotate-btn {
margin-top: 10px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid white;
color: white;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
}
.auto-rotate-btn.active {
background: white;
color: #2a5298;
}
.speed-control {
display: flex;
align-items: center;
gap: 10px;
color: white;
margin-top: 10px;
}
.speed-control input {
width: 100px;
}
</style>
</head>
<body>
<div id="canvas-container">
<div class="info-panel">
<h1>🎮 3D Визуализатор</h1>
<p>Управление: стрелки на клавиатуре или кнопки ниже. Поддержка сенсорного экрана.</p>
<div class="speed-control">
<span>Скорость:</span>
<input type="range" id="speedRange" min="1" max="10" value="3">
</div>
<button class="auto-rotate-btn" id="autoRotateBtn">Автовращение</button>
</div>
<div class="object-selector">
<button class="obj-btn active" data-obj="cube">Куб</button>
<button class="obj-btn" data-obj="sphere">Сфера</button>
<button class="obj-btn" data-obj="torus">Торус</button>
<button class="obj-btn" data-obj="knot">Узел</button>
<button class="obj-btn" data-obj="cone">Конус</button>
<button class="obj-btn" data-obj="cylinder">Цилиндр</button>
<button class="obj-btn" data-obj="dodecahedron">Додекаэдр</button>
<button class="obj-btn" data-obj="icosahedron">Икосаэдр</button>
<button class="obj-btn" data-obj="octahedron">Октаэдр</button>
</div>
<div class="controls">
<div class="controls-row">
<button class="control-btn" data-dir="up">▲</button>
</div>
<div class="controls-row">
<button class="control-btn" data-dir="left">◀</button>
<button class="control-btn" data-dir="down">▼</button>
<button class="control-btn" data-dir="right">▶</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Основные переменные
let scene, camera, renderer, currentMesh;
let rotationSpeed = 0.03;
let autoRotate = false;
let autoRotateSpeed = 0.01;
let touchStartX = 0;
let touchStartY = 0;
let isTouching = false;
// Объекты для отслеживания нажатых кнопок
const keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false
};
// Инициализация сцены
function init() {
// Создание сцены
scene = new THREE.Scene();
// Камера
camera = new THREE.PerspectiveCamera(
75, 
window.innerWidth / window.innerHeight, 
0.1, 
1000
);
camera.position.z = 5;
// Рендерер
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.getElementById('canvas-container').appendChild(renderer.domElement);
// Освещение
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
scene.add(directionalLight);
const pointLight = new THREE.PointLight(0x2a5298, 0.5);
pointLight.position.set(-10, -10, -5);
scene.add(pointLight);
// Создание начального объекта
createObject('cube');
// Добавление частиц для эффекта глубины
createParticles();
// Обработчики событий
setupEventListeners();
// Запуск анимации
animate();
}
// Создание различных 3D объектов
function createObject(type) {
if (currentMesh) {
scene.remove(currentMesh);
}
let geometry, material;
switch(type) {
case 'cube':
geometry = new THREE.BoxGeometry(2, 2, 2);
break;
case 'sphere':
geometry = new THREE.SphereGeometry(1.5, 32, 32);
break;
case 'torus':
geometry = new THREE.TorusGeometry(1.2, 0.4, 16, 100);
break;
case 'knot':
geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
break;
case 'cone':
geometry = new THREE.ConeGeometry(1.5, 3, 32);
break;
case 'cylinder':
geometry = new THREE.CylinderGeometry(1, 1, 3, 32);
break;
case 'dodecahedron':
geometry = new THREE.DodecahedronGeometry(1.5);
break;
case 'icosahedron':
geometry = new THREE.IcosahedronGeometry(1.5);
break;
case 'octahedron':
geometry = new THREE.OctahedronGeometry(1.5);
break;
default:
geometry = new THREE.BoxGeometry(2, 2, 2);
}
material = new THREE.MeshPhongMaterial({
color: 0x4a90e2,
emissive: 0x1a1a2e,
specular: 0xffffff,
shininess: 100,
wireframe: false
});
currentMesh = new THREE.Mesh(geometry, material);
// Добавление каркаса для эффекта
const wireframeGeometry = new THREE.WireframeGeometry(geometry);
const wireframeMaterial = new THREE.LineBasicMaterial({ 
color: 0x00ffff, 
transparent: true, 
opacity: 0.3 
});
const wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial);
currentMesh.add(wireframe);
scene.add(currentMesh);
}
// Создание фоновых частиц
function createParticles() {
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 1000;
const posArray = new Float32Array(particlesCount * 3);
for(let i = 0; i < particlesCount * 3; i++) {
posArray[i] = (Math.random() - 0.5) * 20;
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
color: 0xffffff,
transparent: true,
opacity: 0.5
});
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particlesMesh);
}
// Настройка обработчиков событий
function setupEventListeners() {
// Клавиатура
window.addEventListener('keydown', (e) => {
if (keys.hasOwnProperty(e.code)) {
keys[e.code] = true;
updateButtonState(e.code, true);
}
});
window.addEventListener('keyup', (e) => {
if (keys.hasOwnProperty(e.code)) {
keys[e.code] = false;
updateButtonState(e.code, false);
}
});
// Кнопки управления (мышь и касание)
const buttons = document.querySelectorAll('.control-btn');
buttons.forEach(btn => {
const dir = btn.dataset.dir;
const keyMap = {
'up': 'ArrowUp',
'down': 'ArrowDown',
'left': 'ArrowLeft',
'right': 'ArrowRight'
};
// Мышь
btn.addEventListener('mousedown', () => {
keys[keyMap[dir]] = true;
btn.classList.add('active');
});
btn.addEventListener('mouseup', () => {
keys[keyMap[dir]] = false;
btn.classList.remove('active');
});
btn.addEventListener('mouseleave', () => {
keys[keyMap[dir]] = false;
btn.classList.remove('active');
});
// Касание (мобильные)
btn.addEventListener('touchstart', (e) => {
e.preventDefault();
keys[keyMap[dir]] = true;
btn.classList.add('active');
});
btn.addEventListener('touchend', (e) => {
e.preventDefault();
keys[keyMap[dir]] = false;
btn.classList.remove('active');
});
});
// Смена объекта
const objButtons = document.querySelectorAll('.obj-btn');
objButtons.forEach(btn => {
btn.addEventListener('click', () => {
objButtons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
createObject(btn.dataset.obj);
});
});
// Автовращение
document.getElementById('autoRotateBtn').addEventListener('click', function() {
autoRotate = !autoRotate;
this.classList.toggle('active');
});
// Скорость вращения
document.getElementById('speedRange').addEventListener('input', (e) => {
rotationSpeed = e.target.value / 100;
});
// Свайп для мобильных устройств
const canvas = renderer.domElement;
canvas.addEventListener('touchstart', (e) => {
isTouching = true;
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}, { passive: false });
canvas.addEventListener('touchmove', (e) => {
if (!isTouching) return;
e.preventDefault();
const touchX = e.touches[0].clientX;
const touchY = e.touches[0].clientY;
const deltaX = touchX - touchStartX;
const deltaY = touchY - touchStartY;
if (currentMesh) {
currentMesh.rotation.y += deltaX * 0.01;
currentMesh.rotation.x += deltaY * 0.01;
}
touchStartX = touchX;
touchStartY = touchY;
}, { passive: false });
canvas.addEventListener('touchend', () => {
isTouching = false;
});
// Мышь (драг)
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
previousMousePosition = { x: e.clientX, y: e.clientY };
});
canvas.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const deltaX = e.clientX - previousMousePosition.x;
const deltaY = e.clientY - previousMousePosition.y;
if (currentMesh) {
currentMesh.rotation.y += deltaX * 0.01;
currentMesh.rotation.x += deltaY * 0.01;
}
previousMousePosition = { x: e.clientX, y: e.clientY };
});
canvas.addEventListener('mouseup', () => {
isDragging = false;
});
// Изменение размера окна
window.addEventListener('resize', onWindowResize);
}
// Обновление состояния кнопок на экране
function updateButtonState(keyCode, isPressed) {
const keyMap = {
'ArrowUp': 'up',
'ArrowDown': 'down',
'ArrowLeft': 'left',
'ArrowRight': 'right'
};
if (keyMap[keyCode]) {
const btn = document.querySelector(`[data-dir="${keyMap[keyCode]}"]`);
if (btn) {
if (isPressed) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
}
}
}
// Изменение размера окна
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Анимация
function animate() {
requestAnimationFrame(animate);
if (currentMesh) {
// Управление стрелками
if (keys.ArrowUp) currentMesh.rotation.x -= rotationSpeed;
if (keys.ArrowDown) currentMesh.rotation.x += rotationSpeed;
if (keys.ArrowLeft) currentMesh.rotation.y -= rotationSpeed;
if (keys.ArrowRight) currentMesh.rotation.y += rotationSpeed;
// Автовращение
if (autoRotate) {
currentMesh.rotation.x += autoRotateSpeed;
currentMesh.rotation.y += autoRotateSpeed;
}
// Плавная анимация без действий
currentMesh.rotation.x += 0.001;
currentMesh.rotation.y += 0.001;
}
// Анимация частиц
scene.children.forEach(child => {
if (child instanceof THREE.Points) {
child.rotation.y += 0.0005;
}
});
renderer.render(scene, camera);
}
// Запуск приложения
init();
</script>
</body>
</html>