Three.js – это легкая 3D-библиотека JavaScript для визуализации холста в веб-браузере. Он использует рендерер WebGL для рендеринга в браузере. WebGL (библиотека веб-графики) — это API JavaScript для рендеринга 3D-графики в веб-браузере.
Убедитесь, что ваш браузер поддерживает WebGL, и вы можете проверить WebGL для своего браузера здесь
Установка Three.js
- Сеть доставки контента (CDN)
https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js
2. Бауэр
bower install three --save
3. НПМ
npm install three --save
4. Скачать вручную здесь
https://github.com/mrdoob/three.js/archive/master.zip
Начнем с кода
Начните с базового шаблона HTML
<html> <head> <meta charset="utf-8"> <title>Three.js Basics</title> </head> <body> </body> </html>
Импорт Three.js
<script src="node_modules/three/build/three.min.js"></script>
Создание сцены, визуализации и камеры
- Сцена — это область, в которой мы можем размещать такие элементы, как геометрия, освещение, камера и многое другое.
- Renderer — это то, что заставляет объект появляться на экране.
- Камера сообщает средству визуализации, с какой точки зрения она должна отображать изображение на экране.
<body> <script type="text/javascript"> // create scene var scene = new THREE.Scene(); // create renderer var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(500, 500); renderer.setClearColor(0xffffff, 1); // sets to white colour // append renderer to html document.body.appendChild(renderer.domElement); // create camera var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); camera.position.set(0, 0, 10); // sets z position of camera scene.add(camera); </script> <body>
Создание сферы с использованием геометрии, материала и сетки
- Геометрия связана с формой, размером, положением и свойствами объектов.
- Материал описывает внешний вид объектов.
- Сетка — это объект, который применяет материал к геометрии.
// create geometry var geometry = new THREE.SphereGeometry(5, 100, 100); // create material var material = new THREE.MeshBasicMaterial({ color: 0xC6ED2C, wireframe: true }); // set colour and wireframe to true // create mesh - mixing geometry and material var sphere = new THREE.Mesh(geometry, material); scene.add(sphere); // adding sphere to scene
Выводить все на экран
- Функция requestAnimationFrame запрашивает визуализатор для анимации сцены и камеры на экране.
var animate = function () { requestAnimationFrame(animate); renderer.render(scene, camera); } // calling animate function to render on screen animate();
Дальнейшее чтение
Ждите следующего поста :)