Знакомство с JavaScript-библиотекой Three.js для создания трёхмерной графики
Степень завершённости урока: 50%
Статистика урока:
- Количество фрагментов кода: 1
- Количество полного кода: 1
- Количество снимков: 1
- Время чтения: менее 15 минут
- Уровень сложности: лёгкий
Three.js это JavaScript-библиотека, предназначенная для создания трёхмерной графики, с которой можно взаимодействовать в браузере.
Официальный сайт библиотеки Three.js указан ниже:
https://threejs.org (по состоянию на 22 марта 2026 года)
Cкачивание последней версии Three.js доступно по по ссылке
http://github.com/mrdoob/three.js/releases (по состоянию на 22 марта 2026 года)
Для начала создадим шаблон веб-страницы и импортируем библиотеку Three.js
<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>Пример использования Three.js</title> </head> <body> <script src="scripts/three.js"></script> </body></html>Для успешного использования Three.js понадобится несколько компонентов:
- сцена
- камера
- рендерер (отвечает за показ картинки)
- свет
- объект
- геометрия
- материал
- меш
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Простое three.js приложение</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three'; const scene = new THREE.Scene(); scene.background = new THREE.Color( 0x808080 ); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 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.position.z = 5; function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } animate(); </script> </body></html>Предложить идею по улучшению урока в мессенджере Max или мессенджере Telegram
Страница обновлена 22 марта 2026 года.