Three.js – это легкая 3D-библиотека JavaScript для визуализации холста в веб-браузере. Он использует рендерер WebGL для рендеринга в браузере. WebGL (библиотека веб-графики) — это API JavaScript для рендеринга 3D-графики в веб-браузере.

Убедитесь, что ваш браузер поддерживает WebGL, и вы можете проверить WebGL для своего браузера здесь

Установка Three.js

  1. Сеть доставки контента (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();

Дальнейшее чтение

Ждите следующего поста :)