three.js — урок № 1 — создание первой сцены
Three.js — это легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. (wikipedia).
В данных уроках мы будем рассматривать практическое применение этой библиотеки.
Официальный сайт проекта находится на treejs.org, здесь вы сможете найти множество потрясных примеров.
Большую часть примеров планирую вывести в jsfiddle.
Итак, для большинства примеров на понадобиться html каркас
<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<script type="text/javascript" src="../libs/three.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to
use the complete page */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
// here we'll put the Three.js stuff
};
window.onload = init
</script>
</body>
</html>
Этот каркас не отобразит ничего, если вы захотите его просмотреть. Он использует пока одну единственную js библиотек three.js. Скачать ее можно от сюда https://megakolyan.ru/libs/three.js
Создадим нашу первую сцену
<!DOCTYPE html>
<html>
<head>
<title>Example 01.02 - First Scene</title>
<script type="text/javascript" src="../libs/three.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex()
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
// show axes in the screen
var axes = new THREE.AxisHelper( 20 );
scene.add(axes);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
// rotate and position the plane
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0
// add the plane to the scene
scene.add(plane);
// create a cube
var cubeGeometry = new THREE.BoxGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// position the cube
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;
// add the cube to the scene
scene.add(cube);
// create a sphere
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
// position the sphere
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;
// add the sphere to the scene
scene.add(sphere);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// render the scene
renderer.render(scene, camera);
};
window.onload = init;
</script>
</body>
</html>
Здесь мы создали 4 объекта — камеру, с координатами X,Y,Z, чтобы видеть наши объекты. Куб, с красными границами, сферу синего цвета и плоскость — plane, серого цвета, которая является площадкой, на которой находятся наши 3d примитивы. Я советую вам на локальном компьютере, поменять значения (числовые, цвет), так вы намного быстрее разберетесь с каждой строчкой кода, и запомните больше. Да и вообще чем больше вы сделаете руками, тем больший результат получите.
Ну а теперь по порядку
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
До данного примера мы создали и вызвали сцену, камеру, и визуализацию. Переменная сцена является контейнером, который используется для хранения и отслеживания всех объектов
что мы хотим сделать.
В следующих уроках, вы узнаете о Работе с основными компонентами, которые составляют Three.js сцену. Вы узнаете больше о аргументов, которые можно передать в камеру. Затем мы создали объект визуализации (render).
Визуализация отвечает за то, как сцена будет выглядеть в браузере на основе ракурса. Мы создадим WebGLRenderer объект в этом примере, который будет использовать вашу видеокарту, чтобы построить нашу сцен.
[ Если вы посмотрите документацию three.js, то узнаете что помимо визуализации с помощью WebGL, можно визуализировать сцену, с помощью canvas и даже SVG. Но лучше их не использовать,т.к. они очень ресурсотребовательные, и плохо поддерживают работу с материалами и тенями]var axes = new THREE.AxisHelper( 20 ); //создаем Объект вспомогательных осей x,y,z - цветные.
scene.add(axes);//Добавляем на сцену
var planeGeometry = new THREE.PlaneGeometry(60,20);// создаем плоское геометрическое тело размерами 60 на 20
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//материал для рисования (плоским или каркасным способом), по умолчанию плоский, wireframe:true - каркасный
var plane = new THREE.Mesh(planeGeometry,planeMaterial);// на основе параметров создает меш объектов
plane.rotation.x = -0.5*Math.PI;//разворот плоскости по x
plane.position.x = 15;// позиционирование х
plane.position.y = 0;// позиционирование y
plane.position.z = 0;// позиционирование z
scene.add(plane); // добавление плоскости в сценуthree.js — урок № 1 — создание куба
var cubeGeometry = new THREE.BoxGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// position the cube
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;
// add the cube to the scene
scene.add(cube);
BoxGeometry создает примитивный класс геометрии — четырехугольник. Это, как правило, используется для создания куба или неправильного четырехугольника, с размерами ‘Ширина’, ‘высота’ и ‘глубина «, которые можно создать аргументами конструктора.
Также как описывалось выше MeshBasicMaterial создает материал куба, его цвет, и отображение как каркаса/заливка его граней.
И на основе Mesh с переданными параметрами создается меш куба.
Затем задается позиция куба в сцене.
Также создается и сфера, камере задаем позицию, и наконец выводим все созданное нами в сцену с помощью renderer.render(scene, camera), где первый аргумент это все что добавлено в сцену, и созданyая нами камера с установленными позициями по осям XYZ.
Еще раз рекомендую создать свой пример на локальном компьютере и «поиграться» со значениями камеры,сферы,кубом и плоскостью.
