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

Материал из Викиучебника — открытых книг для открытого мира
Содержимое удалено Содержимое добавлено
оформление
Строка 1: Строка 1:
{{BlenderBook|BlenderWeb}}
{{BlenderBook|BlenderWeb}}
{{BlenderBook/HardPart|программирование|программирования|[[Blender для начинающих/Python|Python]] и [[Основы PascalABC.Net]]}}
{{BlenderBook/HardPart|программирование|программирования|[[Blender для начинающих/Python|Python]] и [[Основы PascalABC.Net]]}}
=Blend4Web и Web=
=[http://medictionary.ru/ Blend4Web] и Web=
«Blend4Web» - аддон, написанный для Blender, и нужный для создания интерактивных Web-страниц с элементами 3D. По данной причине, Вы должны знать основы JS, Ajax и JSON.
«Blend4Web» - аддон, написанный для Blender, и нужный для создания интерактивных Web-страниц с элементами 3D. По данной причине, Вы должны знать основы JS, Ajax и JSON.



Версия от 14:25, 4 апреля 2017



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

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;

Переменные let

Эти переменные имеют еще более узкую область видимости - только внутри того блока, в котором объявлены. Например, в следующих блоках:

  1. if
  2. for
  3. while

Их декларация происходит следующим образом:

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

Массивы

Массивы объявляются с помощью функции 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 нужен тогда, когда надо выполнять какие-то действия до тех пор, пока условие верно:

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)

Ajax

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

Методы Get и Post

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

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

Этапы работы 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"