social

Веб-приложения для 3D-печати и моделирования прямо в браузере – как с ними работать? Второй урок на примере сервиса Materiallab

С первым уроком от руководителя проекта Materiallab.ru Сергея Привалова можно ознакомиться здесь.

screen_1

Сначала был куб, или первый практикум

В действительности, если разобраться, в основе любой геометрической цифровой формы лежат кубики…ну или параллелограммы…округлость объекта — это всего лишь количество этих кубиков на единицу пространства, или разрешение. Я думаю, тут всем и все понятно. Поэтому начнем мы с простейшей штуки – нарисуем средствами threejs куб и подключим немного интерактива – дадим пользователям возможность вращать модель. Пример самый простой, но он позволит понять, как работают такие элементы сцены, как камера, рендерер, геометрия и прочие.

Что нам понадобится:

  • сам по себе скачанный фреймворк;
  • знание html и javascript;
  • руки — 2 шт любой формы, растущие откуда положено.

Создаем html-документ, например, index.html. Пишем в него:

<!DOCTYPE html>
 <html lang=“en”>
<head>
 <meta charset=“utf-8”>

Подключаем нужные нам скрипты:

<script src=“<!– Укажите свой путь к скрипту. –> /three.min.js”></script>

Кроме него нам пока что ничего не нужно. Начинаем создавать сцену. Перво-наперво создаем необходимые нам в будущем глобальные переменные. Аккуратно перечислим их сразу:

<script>

var container; //контейнер, содержащий сцену

var camera, scene, renderer; //камера, сцена и визуализатор

var cube, plane; //куб — главное действующее лицо и плоскость пола, над которой он «висит».

Зададим параметры, отвечающие за вращение и масштабирование сцены в зависимости от размеров окна:

var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

Оставим вызов функций, стандартных для всех примеров на threejs. Они отвечают за инициализацию и анимацию сцены:

init();
animate().

А вот сама функция инициализации:

function init() {

container = document.createElement(http://livelyminds.ru/http://livelyminds.ru/http://livelyminds.ru/“div” );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;

scene = new THREE.Scene();

// Создаем куб

var geometry = new THREE.CubeGeometry( 200, 200, 200 );

for ( var i = 0; i < geometry.faces.length; i ++ ) {

geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );

}

Давайте разберем, что происходит в этом отрезке кода. Сначала мы даем команду на создание DOM-элемента div на экране браузера. Затем размещаем в нем наш контейнер со всеми элементами сцены:

container = document.createElement( “div” );
document.body.appendChild( container ).

Затем создаем камеру (threejs поддерживает несколько типов камер, в данном примере мы возьмем простейшую камеру с проекцией перспективы).

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ).

Камера имеет несколько параметров:

  • 70 – удаленность от куба;
  • window.innerWidth / window.innerHeight — тут задается соотношение сторон проекции камеры;
  • 1 — расстояние до ближнего поля;
  • 1000 — расстояние до дальнего поля.

Кроме «перспективной» камеры, threejs поддерживает камеры с ортографической проекцией (OrthographicCamera) и мобильную камеру, движением которой можно управлять, двигая мышь с зажатой левой кнопкой (TrackballCamera). А эти параметры задают положение камеры в пространстве:

camera.position.y = 150;
camera.position.z = 500.

После создания камеры, мы запускаем создание сцены:

scene = new THREE.Scene().

Переходим к заданию параметров нашего кубика. Куб имеет всего 3 параметра — по количеству измерений. Наш куб 200x200x200 создан, и каждая его грань окрашена случайным цветом для наглядности. Но куб — это пока всего лишь виртуальная геометрия. А геометрию нельзя пощупать и от нее не будет проку в сцене. Чтобы геометрия «ожила», надо ее превратить в мэш, что мы и делаем, командуя:

var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );

cube = new THREE.Mesh( geometry, material ).

Мэш в триджиэс формируется на основе двух параметров — собственно геометрии и материала, которым эта геометрия будет «обтянута». Материал в нашем случае формируется на базе переменной, содержащей информацию о случайных цветах граней куба, полученной ранее. Тип материала — базовый — MeshBasicMaterial. Материалов поддерживается приличное количество, на каждом мы остановимся более подробно в другой раз:

  • LineBasicMaterial;
  • LineDashedMaterial;
  • MeshBasicMaterial;
  • MeshDepthMaterial;
  • MeshFaceMaterial;
  • MeshLambertMaterial;
  • MeshNormalMaterial;
  • MeshPhongMaterial;
  • ParticleSystemMaterial;
  • ShaderMaterial;
  • SpriteMaterial;
  • SpriteCanvasMaterial.

Наш MeshBasicMaterial поддерживает следующие свойства:

  • цвет в шестнадцатеричном виде (параметр color);
  • сеточность (рендер в виде вайрфрейма) (параметр wireframe);
  • толщина вайрфрейма (wireframeLinewidth, по-умолчанию — 1);
  • тип концов линий вайрфрейма (wireframeLinecap по-умолчанию — круглые);
  • тип пересечений линий вайрфрейма (wireframeLinejoin по-умолчанию — круглые);
  • тип шейдинга (параметр shading по умолчанию — THREE.SmoothShading);
  • цвет вершин (параметр vertexColors, по умолчанию — нет цвета);
  • карта освещения (параметр lightMap, по умолчанию — ноль);
  • карта отражения (параметр specularMap, по умолчанию — ноль);
  • карта окружения (параметр envMap);
  • скиннинг (параметр skinning, по умолчанию — выключен);
  • морфинг (параметр morphTargets, по умолчанию — выключен).

Теперь создадим «пол» для нашего кубика. Создаем плоскость 200×200. Она у нас будет имитировать тень, отбрасываемую кубом. Обратите внимание, что нам надо не забыть включить плоскость во вращение: (geometry.applyMatrix( new THREE.Matrix4().makeRotationX( – Math.PI / 2 ) );):

// Плоскость
var geometry = new THREE.PlaneGeometry( 200, 200 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( – Math.PI / 2 ) );

var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } );

plane = new THREE.Mesh( geometry, material );
scene.add( plane );

А вот и рендерер с размерами 1 в 1 по размеру окна браузера создаем его и пихаем в DOM:

renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

screen_2

ТриДжиЭс поддерживает 2 типа рендереров, простейший — Canvas.Renderer. Более продвинутый, предназначенный для визуализации спецэффектов и наворочанных текстур – WebGl.Renderer. Второй довольно некисло перегружает слабенькие машинки, поэтому пользуйтесь им осмотрительно и целесообразно.

Далее следует набор функций, стандартный для большинства скриптов в threejs. Они отвечают за поведение сцены при ресайзе окна и движении мыши. Их вы можете взять из примера «в сборе» чуть ниже.

В финале вся сцена подвергается визуализации, и тут же синхронизируется вращение плоскости-тени и куба.

function render() {
plane.rotation.y = cube.rotation.y += ( targetRotation – cube.rotation.y ) * 0.05;
renderer.render( scene, camera );
}

Весь пример полностью выглядит так:

<!DOCTYPE html>
 <html lang=“en”>
<head>

<title> cube</title>
 <meta charset=“utf-8”>
 <meta name=“viewport” content=“width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0”>
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>

</head>
<body>

<script src=“three.min.js”></script>

<script>

var container;

var camera, scene, renderer;

var cube, plane;

var targetRotation = 0;
var targetRotationOnMouseDown = 0;

var mouseX = 0;
var mouseXOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

container = document.createElement( “div” );
document.body.appendChild( container );

var info = document.createElement( “div” );
 info.style.position = “absolute”;
 info.style.top = “10px”;
 info.style.width = “100%”;
 info.style.textAlign = “center”;
 info.innerHTML = “Drag to spin the cube”;
container.appendChild( info );

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 500;

scene = new THREE.Scene();

// Cube

var geometry = new THREE.CubeGeometry( 200, 200, 200 );

for ( var i = 0; i < geometry.faces.length; i ++ ) {

geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );

}

var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );

cube = new THREE.Mesh( geometry, material );
cube.position.y = 150;
scene.add( cube );

// Plane

var geometry = new THREE.PlaneGeometry( 200, 200 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( – Math.PI / 2 ) );

var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } );

plane = new THREE.Mesh( geometry, material );
scene.add( plane );

renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( “mousedown”, onDocumentMouseDown, false );
 document.addEventListener( “touchstart”, onDocumentTouchStart, false );
 document.addEventListener( “touchmove”, onDocumentTouchMove, false );

//

window.addEventListener( “resize”, onWindowResize, false );

}

function onWindowResize() {

windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function onDocumentMouseDown( event ) {

event.preventDefault();

document.addEventListener( “mousemove”, onDocumentMouseMove, false );
 document.addEventListener( “mouseup”, onDocumentMouseUp, false );
 document.addEventListener( “mouseout”, onDocumentMouseOut, false );

mouseXOnMouseDown = event.clientX – windowHalfX;
targetRotationOnMouseDown = targetRotation;

}

function onDocumentMouseMove( event ) {

mouseX = event.clientX – windowHalfX;

targetRotation = targetRotationOnMouseDown + ( mouseX – mouseXOnMouseDown ) * 0.02;

}

function onDocumentMouseUp( event ) {

document.removeEventListener( “mousemove”, onDocumentMouseMove, false );
 document.removeEventListener( “mouseup”, onDocumentMouseUp, false );
 document.removeEventListener( “mouseout”, onDocumentMouseOut, false );

}

function onDocumentMouseOut( event ) {

document.removeEventListener( “mousemove”, onDocumentMouseMove, false );
 document.removeEventListener( “mouseup”, onDocumentMouseUp, false );
 document.removeEventListener( “mouseout”, onDocumentMouseOut, false );

}

function onDocumentTouchStart( event ) {

if ( event.touches.length === 1 ) {

event.preventDefault();

mouseXOnMouseDown = event.touches[ 0 ].pageX – windowHalfX;
targetRotationOnMouseDown = targetRotation;

}

}

function onDocumentTouchMove( event ) {

if ( event.touches.length === 1 ) {

event.preventDefault();

mouseX = event.touches[ 0 ].pageX – windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX – mouseXOnMouseDown ) * 0.05;

}

}

//

function animate() {

requestAnimationFrame( animate );

render();
stats.update();

}

function render() {

plane.rotation.y = cube.rotation.y += ( targetRotation – cube.rotation.y ) * 0.05;
renderer.render( scene, camera );

}

</script>

</body>
</html>

Удачи в создании трехмерный браузерных сцен!

Сергей Привалов, руководитель проекта Materiallab.ru

  • Задать вопрос через форму сайта

Войти с помощью: 

Вопросы запрещены.