Статьи

Совет: отображение 3D-модели с помощью Papervision3D

Март 9, 2019

В этом кратком совете мы рассмотрим, как встроить и отобразить 3D-модель во Flash с помощью Papervision3D.

Окончательный результат предварительного просмотра

Давайте посмотрим на конечный результат, к которому мы будем стремиться:

Вступление

Чтобы использовать это руководство, вам понадобится 3D-модель, экспортированная в виде файла .dae, и ее текстура в виде файла изображения.

Я собираюсь использовать низкополигональную модель горного велосипеда из 3DOcean, созданную OneManBand (которая также создала этот аккуратный 3D Object Viewer в AIR).

Вам нужно будет скачать копию Papervision3D (вы также можете найти копию в исходных файлах)

Шаг 1: Создание файла Flash

Создайте новый документ ActionScript 3 с размерами 550x200px и установите частоту кадров 30 кадров в секунду. Также установите класс документа на «EmbeddingDAE».

Создайте прямоугольник, который покрывает всю сцену, и заполните его радиальным градиентом от #FFFFFF до # D9D9D9. Настройте градиент с помощью Gradient Transform Tool, чтобы он выглядел так:

Шаг 2: Настройка класса документа

Создайте новый файл ActionScript 3 и назовите его «EmbeddingDAE». Этот класс расширит класс Papervision, в котором настроены все основные функции.

Поскольку мы собираемся встроить 3D-модель в ваш SWF-файл, мы должны убедиться, что файл полностью загружен, прежде чем пытаться использовать его.

Вот код для этого:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
package
{
    import flash.events.Event;
    import org.papervision3d.view.BasicView;
     
    public class EmbeddingDAE extends BasicView
    {
         
        public function EmbeddingDAE()
        {
            this.loaderInfo.addEventListener ( Event.COMPLETE, onFullyLoaded ) ;
        }
         
        private function onFullyLoaded(e:Event):void
        {
             
        }
         
    }
 
}

Шаг 3: Вложение ресурсов

Вместо того, чтобы размещать наши ресурсы на веб-сервере и загружать их оттуда, мы просто добавим их в SWF. Мы делаем это с помощью тега Flex SDK Embed . Если у вас нет Flex SDK или у вас возникли проблемы с предустановленной версией, вы можете скачать ее здесь

Flash знает, как обращаться с определенными типами файлов, такими как мой файл текстуры .png , но не знает формат файла .dae . Поэтому мы должны установить вторичный параметр, тип MIME , для application/octet-stream — это означает, что файл будет преобразован в ByteArray .

При использовании тега Embed мы должны ссылаться на относительный (или полный) путь к файлу и назначать класс этому файлу. Позже мы можем создать экземпляр встроенного файла, используя этот класс.

Здесь вы можете увидеть код:

1
2
3
4
5
6
7
8
9
public class EmbeddingDAE extends BasicView
{
    [Embed(source=»mountain_bike.dae», mimeType=»application/octet-stream»)]
    private var bikeModelClass:Class;
     
    [Embed(source=»bike_texture.png»)]
    private var bikeTextureClass:Class;
     
    public function EmbeddingDAE()

Вам нужно будет заменить пути, чтобы они соответствовали вашим собственным файлам.

Шаг 4: Обработка текстуры

Чтобы использовать нашу текстуру с нашей моделью в Papervision3D, нам нужно сделать три вещи:

  1. Создайте экземпляр текстуры как Bitmap чтобы мы могли получить доступ к его bitmapData .
  2. Создайте Material с этим bitmapData — он будет работать как текстура.
  3. Создайте список MaterialsList , который свяжет наш материал с нашей моделью. Для этого понадобится название материала, использованного для модели. Если у вас есть только один файл текстуры (который является наиболее распространенным), вам не нужно беспокоиться об этом, просто используйте «все».

Вот код, делающий это (добавлен в onFullyLoaded() ):

1
2
3
4
5
6
var bitmap:Bitmap = new bikeTextureClass ( ) ;
 
var bitmapMaterial:BitmapMaterial = new BitmapMaterial ( bitmap.bitmapData ) ;
 
var materialsList:MaterialsList = new MaterialsList ( ) ;
materialsList.addMaterial ( bitmapMaterial, «all» ) ;

Не забудьте импортировать:

1
2
3
import flash.display.Bitmap;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.utils.MaterialsList;

Шаг 5: Загрузите модель

Чтобы загрузить нашу модель, нам нужно сделать четыре вещи:

  1. Создайте переменную для нашей модели — думайте об этом как о пустой оболочке.
  2. Создайте экземпляр ByteArray содержащий нашу модель.
  3. Создайте экземпляр переменной для нашей модели — создание оболочки.
  4. Загрузите нашу модель, передавая ByteArray и MaterialsList в нашу пустую оболочку.

Сначала создайте переменную:

1
private var bikeModelDAE:DAE;

Затем сделайте все остальное (добавив в onFullyLoaded )

1
2
3
4
var byteArray:ByteArray = new bikeModelClass ( ) ;
 
bikeModelDAE = new DAE ( ) ;
bikeModelDAE.load ( byteArray, materialsList ) ;

Не забудьте импортировать:

1
2
import flash.utils.ByteArray;
import org.papervision3d.objects.parsers.DAE;

Шаг 6: Отображение модели

Теперь все, чего нам не хватает, так это возможности увидеть модель, которая является куском пирога. Я также корректирую положение камеры, чтобы мы могли лучше рассмотреть эту модель. Затем я говорю Papervision3D перерисовывать каждый кадр.

Вот код (снова добавление к onFullyLoaded() ):

1
2
3
4
5
this.scene.addChild ( bikeModelDAE ) ;
 
this.camera.z = 500;
 
this.startRendering ( ) ;

Вот как это будет выглядеть:

Шаг 7: Добавление вращения

Теперь мы можем видеть модель, но только с одной точки зрения. Это немного скучно, не так ли? Давайте добавим немного вращения! Здесь мы собираемся переопределить функцию, которая вызывается каждый кадр механизмом Papervision3D.

1
2
3
4
5
override protected function onRenderTick(event:Event = null):void
{
    super.onRenderTick ( event ) ;
    bikeModelDAE.yaw ( 1 ) ;
}

Вот это еще раз:

Вывод

Теперь вы знаете, как добавить 3D-модели в ваши Flash-проекты, и это на самом деле довольно просто. Надеюсь, вам понравилось читать и вы нашли это полезным.

Спасибо за прочтение!

36
Share: