Wiki-учебник по веб-технологиям: JavaScript/ОперативныеVrml ...

Главная | Каталог |

Создание оперативных VRML-сцен


Чтобы показать гибкость JavaScript, мы теперь собираемся создать оперативную VRML-сцену. VRML расшифровывается как Vitual Reality Modelling Language. Это — язык для создания 3-мерных сцен. Итак, возьмите ваши стерео очки, и наслаждайтесь зрелищем... Нет, это просто пример — синий куб.

Вам необходима VRML-надстройка, чтобы просмотреть этот пример. Этот сценарий не проверяет, доступна ли VRML-надстройка (загрузка надстройки не будет проблемой).

Ниже представлен исходный код:

<html>
<head>
<script language="JavaScript">
<!-- hide

function vrmlScene() {
  vrml= open("", "displayWindow", 
    "width=500,height=400,status=yes,toolbar=yes,menubar=yes");

  // open document for further output
  vrml.document.open("x-world/x-vrml");
   
  vr= vrml.document;

  // create VRML-scene
  vr.writeln("#VRML V1.0 ascii");

  // Light
  vr.write("Separator { DirectionalLight { ");
  vr.write("direction 3 -1 -2.5 } ");

  // Camera
  vr.write("PerspectiveCamera { position -8.6 2.1 5.6 ");
  vr.write("orientation -0.1352 -0.9831 -0.1233 1.1417 ");
  vr.write("focalDistance 10.84 } ");

  // Cube
  vr.write("Separator { Material { diffuseColor 0 0 1 } ");
  vr.write("Transform { translation -2.4 .2 1 rotation 0 0.5 1 .9 } ");
  vr.write("Cube {} } }");

  // close the document - (not the window!)
  vrml.document.close();  
}

// -->
</script>
</head>
<body>

<form>
<input type=button value="VRML on-the-fly" onClick="vrmlScene()">
</form>

</body>
</html>


Этот исходный текст совершенно аналогичен последнему примеру. Сначала мы открываем новое окно. Затем мы должны открыть документ, чтобы подготовить его к выводу. Рассмотрите этот код:

// open document for further output
  vrml.document.open("x-world/x-vrml");


В последнем примере мы ничего не писали в скобках. Что означает «x-world/x-vrml»? Это MIME-тип файла, который мы хотим создать. Итак, здесь мы сообщаем браузеру, какие данные последуют. Если мы ничего не пишем в скобках, MIME-тип установлен в «text/html» по умолчанию (это MIME-тип HTML-файлов).

Имеются различные способы, чтобы узнать определённый MIME-тип — браузер имеет у себя список известных MIME-типов. Вы можете найти этот список в меню preferences или option.

Мы должны написать vrml.document.write() для создания 3-мерной сцены. Это очень длинно, следовательно мы определяем vr= vrml.document. Теперь мы можем писать vr.write() вместо vrml.document.write().

Теперь мы можем вывести обычный VRML-код. Я не собираюсь описывать элементы VRML-сцены. Имеются несколько хороших VRML источников, вышедшие в Internet. Простой VRML-код выглядит так:

#VRML V1.0 ascii
 
Separator { 
 
  DirectionalLight { direction 3 -1 -2.5 }
 
  PerspectiveCamera {
    position -8.6 2.1 5.6
    orientation -0.1352 -0.9831 -0.1233 1.1417
    focalDistance 10.84
  }
 
  Separator {
    Material {
      diffuseColor 0 0 1
    }
    Transform {
      translation -2.4 .2 1
      rotation 0 0.5 1 .9
    }
    Cube {}
  }
}


Это код, который мы выводим через команду document.write().

Конечно совершенно бессмысленно создать оперативную сцену, которая также может быть загружен как нормальный VRML-файл (cube.wrl). Это становится более интересным, если вы например делаете форму, где пользователь может вводить различные объекты — типа сфера, цилиндр, конус и т.д. — и JavaScript создает сцену из этих данных