Blender для начинающих/Основы Web технологий: различия между версиями

Материал из Викиучебника — открытых книг для открытого мира
Содержимое удалено Содержимое добавлено
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
{{BlenderBook|2016 Web.png}}
{{BlenderBook|2016 Web}}
{{BlenderBook/HardPart|программирование|программирования|[[Blender для начинающих/Python|Python]] и [[Основы PascalABC.Net]]}}
{{BlenderBook/HardPart|программирование|программирования|[[Blender для начинающих/Python|Python]] и [[Основы PascalABC.Net]]}}
=Blend4Web и Web=
=Blend4Web и Web=

Версия от 13:48, 31 октября 2016



- перейти к комбинациям клавиш.
- перейти к первому необязательному для изучения разделу.
- переход к следующей по курсу главе (порядок глав не совпадает с порядком глав по содержанию).

CTRL+ALT+U

CTRL+U

SHIFT+S

CTRL+Q

A

R

G

S

SHIFT+D

ALT+D

CTRL+NUMPAD+

CTRL+NUMPAD-

SHIFT+L

SHIFT+G

ALT+M

F

CTRL+ALT+SHIFT+C

SHIFT+S

D

T

I

Shift+B

B

C

Одни из главных классов Python: bpy.ops | bpy.data | bpy.types.ID

Рендеринг Рендер-ферма
Отсечение Шейдер
Трассировка лучей Сжатие текстур

Расположение элементов интерфейса


Ссылки на материалы
Возможно, Вас заинтересует следующее:
О Blender 2.76 Скачать Blender 2.76

Данная глава требует знаний по темам: программирование. Убедительная просьба, изучите основы, иначе часть информации, изложенной здесь, может быть вами не воспринята.

Изучить основы программирования можно здесь: Python и Основы PascalABC.Net.

Blend4Web и Web

Blend4Web - аддон, написанный для Blender, нужный для создания интерактивных Web-страниц с элементами 3D. По данной причине Вы должны знать основы JS, Ajax и JSON.

JavaScript

JavaScript - скриптовый язык программирования, встраивающийся в web-страницы сайтов, и выполняющийся на стороне клиента (компьютера пользователя), а не сервера.

Подключение JS

Для использования JS в файле.html надо написать следующее между тегами <body> и </body>:

<script type="text/javascript">
   //код
</script>

Первая стока указывает тип языка, на котором ниже будет писаться код до </script>. Атрибут type принимает значение «text/javascript», указывающее на то, что ниже располагающейся код написан на JS.

Размещать скрипты можно и в <head> </head>:

<script type="text/javascript">
   //код
</script>

Другим способом является использование кода на этом языке из внешнего файла:

<script type="text/javascript" src="путь"></script>

Путь - путь к файлу, в котором лежит ваш скрипт.

Комментарии

Комментарии в JS могут начинаться с //, если они длятся всего одну строку:

// комментарий

Или начинаться с /*, и заканчиваться */, если это многострочные комментарии:

/*
комментарий
*/

Вывод на экран

Вывод чего-либо на страницу производится функцией document.write():

document.write('что-то');

При том, внутри скобок все пишется по правилам HTML (то, что требуется отобразить).

Например, вывод жирного текста:

document.write('<b>пример жирного текста</b>');

Переменные

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

var переменная;

Переменная будет локальной, если она объявлена в теле функции. Если же объявлять без var, то переменная будет будет глобальной всегда, не зависимо от места ее создания. Также можно сразу указывать ее значение:

var переменная = значение;

К примеру:

var a = 23;

Можно и удалить переменные, написав конструкцию:

delete переменная;

Это действует на переменные, объявленные без var. Если же переменная декларирована с var, то есть два способа ее удалить:

переменная = undefined;
переменная = null;

Массивы

Массивы объявляются с помощью функции Array(), созадющую пустой массив:

переменная = new Array()

Для заполнения массива используйте конструкцию:

массив[индекс] = значение

Например:

a = new Array();
a[0] = 12
a[2] = 0

Причем, если Вы указали индекс элемента массива, который превышает все предыдущее, длина массива станет равна i + 1, где i - этот индекс.

Условный оператор if

Условный оператор if в JS имеет синтаксис:

if условие
{
   // команды
}
else
{
   // команды2
}}

В условие могут входить такие знаки сравнения:

Оператор сравнения Описание
== равно
=== равно (если и типы переменных равны)
!= не равно
> больше
>= больше или равно
< меньше
<= меньше или равно

Вывод сообщения в зависимости от значений переменных:

var a = 3;
var b = 7;
if (a==b)
{
   document.write('a равно b')
}
else
{
   document.write('a не равно b')
}}

Иная форма оператора if представлена ниже:

if условие
{
   // команды
}
else if условие2
{
   // команды2
}
...
else
{
   // командыN
}}

Даная форма условного оператора нужна для проверки большого количества условий. Если одно из условий выполнилось, то выполнятся команды написанные для этого условия, и браузер завершит проверку остальных условий.

Например, здесь выведется только одно сообщение о равенстве переменных:

var a = 3;
var b = 3;
if (a==b)
{
   document.write('a равно b')
}
else if (a==b)
{
   document.write('a равно b второе сообщение')
}
else
{
   document.write('a не равно b')
}}

Сложные условия

Для написания более сложных условий требуются специальные логические операторы: && (и), || (или) и ! (не).

Записать условие «a либо равно b, или равно c» с их помощью можно следующим образом:

if ((a==b) || (a==c))

Циклы

Бывают 4 вида циклов:

  1. for
  2. while
  3. do while
  4. for in

Цикл for

Цикл for описывается так:

for (объявление переменной, условие, изменение переменной)
{
   //команды
}

Первым объявляется любая переменная, доступная только для использования ее циклом. Ее значение изменения прописывается в самом конце.

Команды в теле цикла выполняются до тех пор, пока условие выполняется, к примеру:

for (v=0, v<100, i+1)
{
   document.write(v+'</br>')
}

Цикл while

Цикл While является аналогом for, и ни имеет никаких отличий, кроме синтаксиса:

while условие
{
   // команды
}

Например:

while (i<100)
{
   i = i + 1
   document.write(v+'</br>')
}

Цикл do while

От цикла while имеет оно отличие - блок команд выполняется всегда от одного и более раз. Например:

do
{
   i = i + 1
   document.write(v+'</br>')
}
while (i<100);

Цикл for in

Этот цикл нужен лишь тогда, когда некоторая переменная поочередно должна принять все значения массива. Форма его записи такова:

for (переменная in массив)
{
   // команды
}

Перебирание всех элементов массива:

var a;
var arr = new Array;
arr[0] = 'Учимся ';
arr[1] = 'программировать ';
arr[2] = 'вместе.';
for (a in arr)
{
   document.write(a): // будет выведено 'Учимся программировать вместе.'
}

Команды break и continue

  1. break используется для выхода из цикла.
  2. continue - для новой итерации цикла.

Например выход из цикла при равенстве a = 3:

for (a=-2, a<100, a+1)
{
   if (a = 3)
      {
      document.write('Цикл завершен.');
      break;
      }
   document.write('a== ' + a):
}

Функции

Функции оформляются вот так:

var имя=function(параметры)
{
   //команды
}

Например:

var d;
var f=function(a, b, c)
{
   d = a + b + c;
}

Но функции могут также и возвращать значения с помощью оператора return:

var имя=function(параметры)
{
   //команды
   return значение
}

Например:

var d;
var f=function(a, b, c)
{
   return a + b + c;
}
d = f(1,2,3)

Получние значение по идентификатору

Каждый объект (кнопка, ползунок, картинка и т. д.) имеет свой идентификатор, указанный в атрибуте id. Для получения значения объекта, зная только его идентификации следует написать:

переменная = document.GetElementById(идентификатор).value

Ajax

Ajax - технология, позволяющая обновить данные страницы не обновляя страницу полностью. Используется в социальных сетях, таких как: «ВК», «Facebook» и других.

Методы Get и Post

Эти методы используются для передачи данных на сервер. Они различаются при работе тем, что:

  1. Метод get передает все данные серверу в заголовке, что ограничивает возможный размер передаваемой информации.
  2. Метод post передает заметно данные серверу, на URL это не отражается.

Этапы работы Ajax

При работе с Ajax придется пройти такие этапы:

  1. Получение данных с формы.
  2. Формировние URL для подключения.
  3. Создание соединения с сервером.
  4. Установка функции, которая выполнится, когда придет ответ с сервера.
  5. Передача данных серверу.

JSON

JSON - простой способ хранить сложные структурированные данные.

Представление данных

Любые данные в JSON представляются двумя способами. Для массивов:

[
   поле:значение
]

И для объектов:

{
   поле:значение
}

Например:

[
   "Имя":"Вася",
   "Фамилия":"Петров",
]

Данную структуру можно включить в объект:

{
   "Дата регистрации":"сегодня",
   "Персона":
      [
      "Имя":"Вася",
      "Фамилия":"Петров",
      ]
}

Конвертирование в строку JSON и наоборот

В JS есть встроенная функция, конвертирующая содержание некоторой переменной в строку JSON - JSON.stringify().

Пусть имеем:

var a = {
   "RegistrationDate":"today",
   "Person":
      [
      "Name":"Den",
      "FriendName":"Kolya",
      ]
}
JSON.stringify(a); // получим: '{"RegistrationDate":"today","Person":["Name":"Den","FriendName":Kolya"]}'

Данный метод просто запишет содержание переменной в одну строку.

Противоположное действие имеет метод JSON.parse():

var a = JSON.parse('{"RegistrationDate":"today","Person":["Name":"Den","FriendName":Kolya"]}')
a.Person[0] // равно "Den"